Parcel Sandbox

by farazshaikh

HTML

<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>
<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;
  width: 100%;
  height: 100%;
}


#canvas1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: blue;
}

#canvas2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: red;
  z-index: 1;
}

JavaScript

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

class Material extends THREE.MeshStandardNodeMaterial {
  constructor() {
    super()

    this.colorNode = TSL.vec4(1.0, 1.0, 0.0, 1.0)
  }

  build(...props) {
    super.build(...props)
    console.log("Build ")
  }
}

export default function App() {
  const canvas1 = document.querySelector("#canvas1")
  const canvas2 = document.querySelector("#canvas2")

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.set(2,2,2)
  camera.lookAt(0,0,0)

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

  const rt1 = new THREE.CanvasTarget(canvas1)
  const rt2 = new THREE.CanvasTarget(canvas2)

  rt1.setSize(canvas1.clientWidth, canvas1.clientHeight, false)
  rt2.setSize(canvas2.clientWidth, canvas2.clientHeight, false)

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

  const gridHelper = new THREE.GridHelper(20, 20)
  scene.add(gridHelper)


  function animate() {
    requestAnimationFrame(animate);

    renderer.setCanvasTarget(rt1)
    renderer.render(scene, camera);

    renderer.setCanvasTarget(rt2)
    renderer.render(scene, camera);
  }

  renderer.init().then(() => {
    animate();
  });
}


App();