three.js dev template - module

HTML

<script type="importmap">
	{
		"imports": {
			"three": "https://raw.githack.com/mrdoob/three.js/dev/build/three.webgpu.js",
      "three/webgpu": "https://raw.githack.com/mrdoob/three.js/dev/build/three.webgpu.js",
      "three/tsl": "https://raw.githack.com/mrdoob/three.js/dev/build/three.tsl.js",
      "three/addons/": "https://raw.githack.com/mrdoob/three.js/dev/examples/jsm/"
		}
	}
</script>

CSS

body {
	margin: 0px;
}

JavaScript

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { Fn, color, instanceIndex, texture, textureLoad, textureStore, uniform, uv, uvec2, vec2, vec4 } from "three/tsl";
import { ComputeNode, Mesh, MeshBasicNodeMaterial, PlaneGeometry, Raycaster, StorageTexture, Vector2, Vector3 } from "three/webgpu";

let renderer, scene, camera, controls;

const size = 32;
const width = size;
const height = size;
const textureA = new StorageTexture(width, height);
const textureB = new StorageTexture(width, height);
const mouse = uniform(new Vector2(9999, 9999));
const raycaster = new Raycaster();

init();

function init() {

    // renderer
    renderer = new THREE.WebGPURenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setAnimationLoop( animate );
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();
    scene.background = new THREE.Color( '#272727' );
    
    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 0, 0, 2 );

    // controls
    controls = new OrbitControls( camera, renderer.domElement );
    
    const mat = new MeshBasicNodeMaterial();
    mat.colorNode = Fn(() => {

        const d = uv().toVar().sub(mouse).length();

        const fColor = vec4(d, d, d, 1);
        // return fColor;
        return texture(textureA);
    })();
    const plane = new Mesh(
        new PlaneGeometry(),
        mat
    );

    const _mouse = new Vector2(9999, 9999);
    window.addEventListener('mousemove', (event) => {
        const mouseX = (event.clientX / window.innerWidth) * 2 - 1;
        const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;

        _mouse.set(mouseX, mouseY);

        raycaster.setFromCamera(_mouse, camera);
       ...