<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;
}

//Article about this - https://niklever.com/get-to-grips-with-threejs-shading-language-tsl-part-12-tileable-noise
import * as THREE from "three";
import {
  uv,
  uvec2,
  float,
  vec2,
  vec3,
  vec4,
  uniform,
  instanceIndex,
  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, 2);

  new OrbitControls(camera, renderer.domElement);

  tsl();

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

async function createNoiseTexture(size = 512) {
  const storageTexture = new THREE.StorageTexture(size, size);
  /*storageTexture.wrapS = THREE.RepeatWrapping;
  storageTexture.wrapT = THREE.RepeatWrapping;
  storageTexture.minFilter = THREE.NearestFilter;
  storageTexture.maxFilter = THREE.NearestFilter;
  storageTexture.generateMinMaps = false;*/

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

    const pt = vec3(posX, posY, 0).div(size);
    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);
    const b = worleyFbm(pt, freq.mul(2));
    const a = worleyFbm(pt, freq.mul(4));
    const r = remap(pfbm, 0, 1, g, 1); // perlin-worley

    textureStore(storageTexture, indexUV, vec4(r, g, b, a)).toWriteOnly();
  })({ storageTexture }).compute(size * size);

  await renderer.computeAsync(computeTexture);

  return storageTexture;
}

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

  const storageTexture = await createNoiseTexture();
  
  const wfbmctrl = uniform( float( 1. ) );
  const pwctrl = uniform( float( 0.85 ) );

  const fragmentTSL = Fn(({ storageTexture }) => {
    const uv1 = vec2(uv()).sub(time.mul(0.02)).toVar();
    uv1.assign( fract( uv1 ) );

    const texel = texture(storageTexture, uv1, 0).toVar();
    
    const perlinWorley = texel.r.toVar();
    const worley = texel.gba.toVar();
    
    // worley fbms with different frequencies
    const wfbm = worley.r
      .mul(0.625)
      .add(worley.g.mul(0.125))
      .add(worley.b.mul(0.25))
      .toVar();

    // cloud shape modeled after the GPU Pro 7 chapter
    const cloud = remap( perlinWorley, wfbm.sub(wfbmctrl), 1, 0, 1 ).toVar();
    cloud.assign( saturate( remap( cloud, pwctrl, 1, 0, 1) ) ); // fake cloud coverage

    return vec4( 1, 1, 1, cloud);
  });

  material.fragmentNode = fragmentTSL({ storageTexture });

  scene.add(mesh);

  const gui = new GUI();
  gui.add( wfbmctrl, 'value', 0, 2 ).name( 'wfbmctrl' );
  gui.add( pwctrl, 'value', 0, 1 ).name( 'pwctrl' );
}

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

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

//

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