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 { pass, mrt, output, normalView, diffuseColor, velocity, add, vec3, vec4, directionToColor, colorToDirection, sample, materialMetalness, materialRoughness, oneMinus, vec2, positionLocal, mod, step, float, metalness, roughness } from 'three/tsl';
import { ssgi } from 'three/addons/tsl/display/SSGINode.js';
import { traa } from 'three/addons/tsl/display/TRAANode.js';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

import { Inspector } from 'three/addons/inspector/Inspector.js';

let camera, scene, renderer, postProcessing, controls;

init();

async function init() {

  camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 100 );
  camera.position.set( 0, 10, 30 );

  scene = new THREE.Scene();
  scene.background = new THREE.Color( 0xaaaaaa );

  renderer = new THREE.WebGPURenderer();
  //renderer.setPixelRatio( window.devicePixelRatio ); // probably too costly for most hardware
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.setAnimationLoop( animate );
  renderer.shadowMap.enabled = true;
  renderer.inspector = new Inspector();
  document.body.appendChild( renderer.domElement );

  //

  controls = new OrbitControls( camera, renderer.domElement );
  controls.target.set( 0, 7, 0 );
  controls.enablePan = true;
  controls.minDistance = 1;
  controls.maxDistance = 100;
  controls.update();

  //

  postProcessing = new THREE.PostProcessing( renderer );

  const scenePass = pass( scene, camera );
  scenePass.setMRT( mrt( {
    output: output,
    // Pack metalness into diffuseColor alpha, and attenuate RGB by (1-metalness) for PBR
    diffuseColor: vec4( diffuseColor.rgb.mul( oneMinus( metalness ) ), metalness ),
    // Pack roughness into normal alpha channel to save MRT bandwidth
    normal: vec4( directionToColor( normalView ).rgb, roughness ),
    velocity: velocity
  } ) );

  const...