three.js dev template - module

HTML

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.webgpu.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 {
	margin: 0px;
}

JavaScript

import * as THREE from 'three/webgpu';
import { Loop,texture3D, texture, time, abs, pow, mix, normalLocal, modelNormalMatrix, mul, positionLocal, mx_noise_float, color, cross, dot, float,bufferAttribute,  transformNormalToView, sign, step, Fn, uniform, varying, vec2, vec3, uniformArray, uniformGroup, sin } from 'three/tsl';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

let camera, scene, renderer, controls;


const offseta = uniform(vec2(0.5,0)); 
const offsetb = uniform(vec2(0,0.5)); 

const TEXTURE_SIZE = 8;
const TS = uniform(TEXTURE_SIZE);
const baseTexture = createPatternTexture(TEXTURE_SIZE);
const vNormal = varying( vec3() );
const colorSand = uniform( color( '#e62861' ) );
const scale = uniform(2)

/// MAKE A DATA TEXTURE
function createPatternTexture() {
  const data = new Uint8Array(TEXTURE_SIZE * TEXTURE_SIZE * 4); 

  const colors = [
    [0, 0, 0],       // Black
    [255, 0, 0],     // Red
    [0, 255, 0],     // Green
    [0, 0, 255],     // Blue
  ];


  for (let y = 0; y < TEXTURE_SIZE; y++) {
    for (let x = 0; x < TEXTURE_SIZE; x++) {
      const colorIndex = ((x % 2) + (y % 2) *2);
      const color = colors[colorIndex];

      const index = (y * TEXTURE_SIZE + x) * 4;
      data[index] = color[0];
      data[index + 1] = color[1];
      data[index + 2] = color[2];
      data[index + 3] = 0;
    }
  }
console.log("data:", data);
  const texture = new THREE.DataTexture(data, TEXTURE_SIZE, TEXTURE_SIZE);
  texture.needsUpdate = true;
  texture.magFilter = THREE.NearestFilter; // To keep sharp edges of the pattern
  texture.minFilter = THREE.NearestFilter;
  return texture;
}

const material = new THREE.MeshStandardNodeMaterial({
			metalness: 0.5,
			roughness: 0.8,
			//color: '#85d534',
			side: THREE.DoubleSide,
			transparent: false,
			opacity:0.96
		})
    
    
init();

function init() {
  
  // Camera
  camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
...