three.js dev template - module

HTML

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/[email protected]/build/three.webgpu.js",
      "three/webgpu": "https://unpkg.com/[email protected]/build/three.webgpu.js",
      "three/tsl": "https://unpkg.com/[email protected]/build/three.tsl.js",
      "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
		}
	}
</script>

CSS

body {
	margin: 0px;
  background-color: blue;
}

JavaScript

import * as THREE from 'three';
import { pass } from 'three/tsl';


let camera, scene, renderer, clock, group;
let postProcessing;

init();

async function init() {

  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200 );
  camera.position.z = 50;

  scene = new THREE.Scene();

  clock = new THREE.Clock();

  //

  const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d );
  hemiLight.position.set( 0, 1000, 0 );
  scene.add( hemiLight );

  const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
  dirLight.position.set( - 3000, 1000, - 1000 );
  scene.add( dirLight );

  //

  group = new THREE.Group();

  const geometry = new THREE.TetrahedronGeometry();
  const material = new THREE.MeshStandardMaterial( { color: 0xf73232, flatShading: true } );

  for ( let i = 0; i < 100; i ++ ) {

    const mesh = new THREE.Mesh( geometry, material );

    mesh.position.x = Math.random() * 50 - 25;
    mesh.position.y = Math.random() * 50 - 25;
    mesh.position.z = Math.random() * 50 - 25;

    mesh.scale.setScalar( Math.random() * 2 + 1 );

    mesh.rotation.x = Math.random() * Math.PI;
    mesh.rotation.y = Math.random() * Math.PI;
    mesh.rotation.z = Math.random() * Math.PI;

    group.add( mesh );

  }

  scene.add( group );

  renderer = new THREE.WebGPURenderer( { forceWebGL: true } );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.setAnimationLoop( animate );
  document.body.appendChild( renderer.domElement );

  // post processing

  postProcessing = new THREE.PostProcessing( renderer );

  // scene pass

  const scenePass = pass( scene, camera );

  postProcessing.outputNode = scenePass;

  //

  window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize( window.innerWidth, window.innerHeight...