<script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@v0.172.0/build/three.webgpu.js",
      "three/webgpu": "https://cdn.jsdelivr.net/npm/three@v0.172.0/build/three.webgpu.js",
      "three/tsl": "https://cdn.jsdelivr.net/npm/three@v0.172.0/build/three.tsl.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/three@v0.171.0/examples/jsm/"
    }
  }
</script>

<div id="courses"><a href="https://niklever.com/courses" target="_blank">niklever.com/courses</a></div>

body {
  padding: 0;
  margin: 0;
}

#courses {
  font: bold 30px "Arial";
  position: fixed;
  left: 20px;
  top: 20px;
  color: #ffffff;
  text-decoration: none;
}

a:link {
  color: white;
  text-decoration: none;
}

a:hover {
  color: #dddd33;
  text-decoration: underline;
}

a:visited {
  color: white;
  text-decoration: none;
}

import * as THREE from "three";
import {
  uv,
  uvec2,
  float,
  uint,
  vec2,
  vec3,
  vec4,
  instanceIndex,
  If,
  Fn,
  abs,
  mix,
  texture,
  textureStore,
  time,
  fract,
  saturate
} from "three/tsl";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { perlinFbm, worleyFbm, remap } from "https://assets.codepen.io/2666677/TSL-Common.js";
import { GUI } from "three/addons/libs/lil-gui.module.min.js";

let container;

let camera, scene, renderer, mesh;

init();

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

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

  camera = new THREE.PerspectiveCamera(
    40,
    window.innerWidth / window.innerHeight,
    1,
    40
  );
  camera.position.set(0, 0, 8);

  new OrbitControls(camera, renderer.domElement);

  tsl();

  window.addEventListener("resize", onWindowResize);
}

async function createNoiseTexture(size = 256, cellsX = 16, cellsY = 8) {
  const storageTexture = new THREE.StorageTexture(size * cellsX, size * cellsY);

  const computeTexture = Fn(({ storageTexture }) => {
    const posX = instanceIndex.modInt(size * cellsX).toVar();
    const posY = instanceIndex.div(size * cellsX).toVar();
    const indexUV = uvec2(posX, posY);

    const slices = cellsX * cellsY;
    const row = uint(posY.div(size)).toVar();
    const col = uint(posX.div(size)).toVar();
    const slice = row.mul(cellsX).add(col).toVar();

    const pt = vec3(posX.sub(col.mul(size)), posY.sub(row.mul(size)), 0).div(
      size
    );
    pt.z = float(slice).div(slices);

    const freq = float(4);

    const pfbm = mix(1, perlinFbm(pt, 4, 7), 0.5).toVar();
    pfbm.assign(abs(pfbm.mul(2).sub(1))); // billowy perlin noise

    const g = worleyFbm(pt, freq).toVar();
    const b = worleyFbm(pt, freq.mul(2)).toVar();
    const a = worleyFbm(pt, freq.mul(4)).toVar();
    const r = remap(pfbm, 0, 1, g, 1).toVar(); // perlin-worley

    //Draw grid to emphasize the cells
    //Don't do this for the texture used in step 5 or 6!!
    If ( ( pt.x.lessThan(0.03).or( pt.y.lessThan(0.03) ) ), () => {
      r.assign(0);
      g.assign(0);
      b.assign(0);
      a.assign(1);
    } );
    
    textureStore(storageTexture, indexUV, vec4(r, g, b, a)).toWriteOnly();
  })({ storageTexture }).compute(size * size * cellsY * cellsX);

  await renderer.computeAsync(computeTexture);

  return storageTexture;
}

async function tsl() {
  const geometry = new THREE.PlaneGeometry(6, 3);
  const material = new THREE.MeshBasicNodeMaterial({ transparent: true });
  mesh = new THREE.Mesh(geometry, material);

  const storageTexture = await createNoiseTexture();

  material.colorNode = texture(storageTexture);

  scene.add(mesh);

  window.addEventListener("resize", onWindowResize);
}

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

  renderer.setSize(window.innerWidth, window.innerHeight);
}

//

function render() {
  renderer.render(scene, camera);
}