Parcel Sandbox

by farazshaikh

HTML

<div id="root"></div>
<script type="importmap">
	{
		"imports": {
      "three": "https://unpkg.com/three/build/three.module.js",
		  "three/webgpu": "https://unpkg.com/three/build/three.webgpu.js",
			"three/tsl": "https://unpkg.com/three/build/three.tsl.js",
      "three/addons/": "https://unpkg.com/three/examples/jsm/"
		}
	}
</script>

CSS

body {
  font-family: sans-serif;
  margin: 0;
  background-color: #080808;
}

JavaScript

import * as THREE from "three/webgpu";
import { OrbitControls } from "three/addons/controls/OrbitControls";
import * as TSL from "three/tsl";

export default function App(root) {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.x = 2;
  camera.position.y = 2;
  camera.position.z = 2;

  const renderer = new THREE.WebGPURenderer({
    antialias: true,
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  const light = new THREE.DirectionalLight();
  light.position.set(5, 5, -5);
  light.intensity = 5;
  scene.add(light);

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshStandardMaterial({ color: "red" });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  const controls = new OrbitControls(camera, renderer.domElement);

  const post = new THREE.PostProcessing(renderer);

  const scenePass = TSL.pass(scene, camera);
  scenePass.setMRT(
    TSL.mrt({
      output: TSL.output,
      diffuse: TSL.diffuseColor,
      normal: TSL.directionToColor(TSL.normalView)
    })
  );

 const scenePass2 = TSL.pass(scene, camera);
  scenePass2.setMRT(
    TSL.mrt({
      output: TSL.output,
      diffuse: TSL.diffuseColor,
      normal: TSL.directionToColor(TSL.normalView)
    })
  );

  const diffuseNode = scenePass.getTextureNode("diffuse") 
  const normalNode = scenePass2.getTextureNode("normal") // Does not work
  // const normalNode = scenePass.getTextureNode("normal") // Works


  let f = true
  setInterval(() => {
    console.log(f)
    post.outputNode = f ? diffuseNode  : normalNode
    post.needsUpdate = true
    f = !f
  }, 1000)

  function animate() {
    requestAnimationFrame(animate);

    mesh.rotation.x += 0.01
    mesh.rotation.y += 0.01

    post.render();
...