JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
  void main() {
        gl_Position = vec4( position, 1.0 );
    }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
    uniform vec2 u_resolution;
      uniform float u_time;

      const int octaves = 1;
      const float seed2 = 73156.8473192;
      const float seed = 43758.5453123;

      float time;

      /*
        Tri-Noise Texture
        Liam Egan - 2018
        ----------------------

        Tri-noise is my new love, I think. It's cheap, slightly regular and slightly chaotic.
        Here I'm just using layering 3 of them together in a distortion matrix.

        Many many thanks to Inigo Quilez, Patricio Gonzalez Vivo,
        Gary Warne, Nimitz, and many many others.
        "Nanos gigantum humeris insidentes"

      */


  // ------------------------------
    // Credit: Nimitz (ShaderToy.com, Stormoid.com), who came up with the clever idea to use overlapping triangle functions to create cheap noise.
    // Also to Gary "Shane" Warne at Shader Toy for the full implementation used here.

    const mat2 m2 = mat2(0.75, 1.2990381, -1.2990381, 0.75);

    float tri(float x){ return abs(fract(x)-0.5); }
    float triXY(vec2 p){ return tri(p.x+tri((p.y-0.25)*1.5)) + tri(p.y-tri((p.x+0.5)*1.5)); }
    float tri2(vec2 p){
        // return tri(p.x + 0.25 + tri(p.y*1.5))+tri(p.y - 0.25 + tri(p.x*1.5));
        // return tri(p.x + 0.25 + tri(p.y*0.5))+tri(p.y - 0.25 + tri(p.x*0.5));
        // float t = sin(u_time * .1);
        return tri(p.x + tri(p.y*0.5 + 0.3333)) + tri(p.y + tri(p.x*0.5 - 0.1666));

    }

    float triNoise2D(vec2 p){

      // mat2 m2 = m2 * sin(u_time);

        float n = tri2(p);//(tri(p.x + tri(p.y*0.5 + 0.3333)) + tri(p.y + tri(p.x*0.5 - 0.1666)));//tri2(p);//
        p *= m2;
        n +=...

CSS

body {
  margin: 0;
  padding: 0;
}

#container {
  position: fixed;
}

JavaScript

// https://codepen.io/shubniggurath/pen/gvvVvY

/*
Most of the stuff in here is just bootstrapping. Essentially it's just
setting ThreeJS up so that it renders a flat surface upon which to draw 
the shader. The only thing to see here really is the uniforms sent to 
the shader. Apart from that all of the magic happens in the HTML view
under the fragment shader.
*/

let container;
let camera, scene, renderer;
let uniforms;

function init() {
  container = document.getElementById('container');

  camera = new THREE.Camera();
  camera.position.z = 1;

  scene = new THREE.Scene();

  var geometry = new THREE.PlaneBufferGeometry(2, 2);

  uniforms = {
    u_time: {
      type: "f",
      value: 1.0
    },
    u_resolution: {
      type: "v2",
      value: new THREE.Vector2()
    },
    u_mouse: {
      type: "v2",
      value: new THREE.Vector2()
    }
  };

  var material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: document.getElementById('vertexShader').textContent,
    fragmentShader: document.getElementById('fragmentShader').textContent
  });

  var mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(1);

  container.appendChild(renderer.domElement);

  onWindowResize();
  window.addEventListener('resize', onWindowResize, false);

  document.onmousemove = function(e) {
    uniforms.u_mouse.value.x = e.pageX
    uniforms.u_mouse.value.y = e.pageY
  }
}

function onWindowResize(event) {
  renderer.setSize(window.innerWidth, window.innerHeight);
  uniforms.u_resolution.value.x = renderer.domElement.width;
  uniforms.u_resolution.value.y = renderer.domElement.height;
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  uniforms.u_time.value += 0.05;
  renderer.render(scene, camera);
}



init();
animate();