From f954b1f8aba2008be3a072f48ff3a0d6a15f4a02 Mon Sep 17 00:00:00 2001
From: Rezmason <jeremysachs@rezmason.net>
Date: Wed, 5 Sep 2018 03:46:02 -0700
Subject: [PATCH] Implemented matrix particle logic in a GPUComputationRender
 system.

---
 gpgpu_example.html | 134 -------------------------------------
 gpgpu_matrix.html  | 163 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 163 insertions(+), 134 deletions(-)
 delete mode 100644 gpgpu_example.html
 create mode 100644 gpgpu_matrix.html
diff --git a/gpgpu_example.html b/gpgpu_example.html
deleted file mode 100644
index 4d11568..0000000
--- a/gpgpu_example.html
+++ /dev/null
@@ -1,134 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<body style="height: 100vh; margin: 0; overflow: hidden; position: fixed; padding: 0; width: 100vw;">
-  <script src="./lib/three.js"></script>
-  <script src="./js/GPUComputationRenderer.js"></script>
-  <script>
-    const WIDTH = 64;
-    const NUM_TEXELS = WIDTH * WIDTH;
-    const BOUNDS = 512;
-    const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
-    camera.position.set( 0, 200, 350 );
-    camera.rotation.set(Math.PI * -0.25, 0, 0);
-    const scene = new THREE.Scene();
-    const renderer = new THREE.WebGLRenderer();
-    renderer.setClearColor(new THREE.Color(1, 1, 1), 1);
-    renderer.setPixelRatio( window.devicePixelRatio );
-    renderer.setSize( window.innerWidth, window.innerHeight );
-    document.body.appendChild( renderer.domElement );
-
-    const material = new THREE.MeshBasicMaterial( { map: null, flatShading: false, transparent:false } );
-    const plane = new THREE.Mesh( new THREE.PlaneBufferGeometry( BOUNDS, BOUNDS ), material );
-    plane.rotation.x = - Math.PI / 2;
-    scene.add( plane );
-
-    // Creates the gpu computation class and sets it up
-    const gpuCompute = new GPUComputationRenderer( WIDTH, WIDTH, renderer );
-    const heightmap0 = gpuCompute.createTexture();
-    const waterMaxHeight = 10;
-    const pixels = heightmap0.image.data;
-    let p = 0;
-    for ( let j = 0; j < WIDTH; j++ ) {
-      for ( let i = 0; i < WIDTH; i++ ) {
-        pixels[ p + 0 ] = 0;
-        pixels[ p + 1 ] = 0;
-        pixels[ p + 2 ] = 0;
-        pixels[ p + 3 ] = 1;
-        p += 4;
-      }
-    }
-    const heightmapVariable = gpuCompute.addVariable(
-      "heightmap",
-      `
-      #include <common>
-      uniform vec2 mousePos;
-      uniform float mouseSize;
-      uniform float viscosityConstant;
-      #define deltaTime ( 1.0 / 60.0 )
-      #define GRAVITY_CONSTANT ( resolution.x * deltaTime * 3.0 )
-      void main()  {
-        vec2 cellSize = 1.0 / resolution.xy;
-        vec2 uv = gl_FragCoord.xy * cellSize;
-        // heightmapValue.x == height
-        // heightmapValue.y == velocity
-        // heightmapValue.z, heightmapValue.w not used
-        vec4 heightmapValue = texture2D( heightmap, uv );
-        // Get neighbours
-        vec4 north = texture2D( heightmap, uv + vec2( 0.0, cellSize.y ) );
-        vec4 south = texture2D( heightmap, uv + vec2( 0.0, - cellSize.y ) );
-        vec4 east = texture2D( heightmap, uv + vec2( cellSize.x, 0.0 ) );
-        vec4 west = texture2D( heightmap, uv + vec2( - cellSize.x, 0.0 ) );
-        float sump = north.x + south.x + east.x + west.x - 4.0 * heightmapValue.x;
-        float accel = sump * GRAVITY_CONSTANT;
-        // Dynamics
-        heightmapValue.y += accel;
-        heightmapValue.x += heightmapValue.y * deltaTime;
-        // Viscosity
-        heightmapValue.x += sump * viscosityConstant;
-        // Mouse influence
-        float mousePhase = clamp( length( ( uv - vec2( 0.5 ) ) * BOUNDS - vec2( mousePos.x, - mousePos.y ) ) * PI / mouseSize, 0.0, PI );
-        heightmapValue.x += cos( mousePhase ) + 1.0;
-        gl_FragColor = heightmapValue;
-      }
-      `
-      ,
-      heightmap0
-      );
-    gpuCompute.setVariableDependencies( heightmapVariable, [ heightmapVariable ] );
-    heightmapVariable.material.uniforms.mousePos = { value: new THREE.Vector2( 10000, 10000 ) };
-    heightmapVariable.material.uniforms.mouseSize = { value: 20.0 };
-    heightmapVariable.material.uniforms.viscosityConstant = { value: 0.03 };
-    heightmapVariable.material.defines.BOUNDS = BOUNDS.toFixed( 1 );
-    const error = gpuCompute.init();
-    if ( error !== null ) {
-      console.error( error );
-    }
-    const smoothShader = gpuCompute.createShaderMaterial(
-      `
-      uniform sampler2D texture;
-      void main()  {
-        vec2 cellSize = 1.0 / resolution.xy;
-        vec2 uv = gl_FragCoord.xy * cellSize;
-        // Computes the mean of texel and 4 neighbours
-        vec4 textureValue = texture2D( texture, uv );
-        textureValue += texture2D( texture, uv + vec2( 0.0, cellSize.y ) );
-        textureValue += texture2D( texture, uv + vec2( 0.0, - cellSize.y ) );
-        textureValue += texture2D( texture, uv + vec2( cellSize.x, 0.0 ) );
-        textureValue += texture2D( texture, uv + vec2( - cellSize.x, 0.0 ) );
-        textureValue /= 5.0;
-        gl_FragColor = textureValue;
-      }
-      `,
-      { texture: { value: null } }
-      );
-
-    const smoothWater = () => {
-      const currentRenderTarget = gpuCompute.getCurrentRenderTarget( heightmapVariable );
-      const alternateRenderTarget = gpuCompute.getAlternateRenderTarget( heightmapVariable );
-      for ( const i = 0; i < 10; i++ ) {
-        smoothShader.uniforms.texture.value = currentRenderTarget.texture;
-        gpuCompute.doRenderTarget( smoothShader, alternateRenderTarget );
-        smoothShader.uniforms.texture.value = alternateRenderTarget.texture;
-        gpuCompute.doRenderTarget( smoothShader, currentRenderTarget );
-      }
-    }
-
-    setInterval(() => {
-      heightmapVariable.material.uniforms.mousePos.value.set(
-        (Math.random() - 0.5) * BOUNDS,
-        (Math.random() - 0.5) * BOUNDS
-        );
-    }, 1000);
-
-    const animate = () => {
-      requestAnimationFrame( animate );
-      gpuCompute.compute(); // Do the gpu computation
-      material.map = gpuCompute.getCurrentRenderTarget( heightmapVariable ).texture; // Get compute output in custom uniform
-      renderer.render( scene, camera );
-      heightmapVariable.material.uniforms.mousePos.value.set( 10000, 10000 );
-    }
-
-    animate();
-  </script>
-</body>
-</html>
diff --git a/gpgpu_matrix.html b/gpgpu_matrix.html
new file mode 100644
index 0000000..29450b7
--- /dev/null
+++ b/gpgpu_matrix.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+<body style="height: 100vh; margin: 0; overflow: hidden; position: fixed; padding: 0; width: 100vw;">
+  <script src="./lib/three.js"></script>
+  <script src="./js/GPUComputationRenderer.js"></script>
+  <script>
+    const camera = new THREE.OrthographicCamera( -0.5, 0.5, 0.5, -0.5, 0.0001, 10000 );
+    const scene = new THREE.Scene();
+    const renderer = new THREE.WebGLRenderer();
+    renderer.setClearColor(new THREE.Color(1, 1, 1), 1);
+    renderer.setPixelRatio( window.devicePixelRatio );
+    renderer.setSize( window.innerWidth, window.innerHeight );
+    document.body.appendChild( renderer.domElement );
+
+
+
+    const NUM_ROWS = 80;
+
+    // Creates the gpu computation class and sets it up
+    const gpuCompute = new GPUComputationRenderer( NUM_ROWS, NUM_ROWS, renderer );
+    const glyphValue = gpuCompute.createTexture();
+    // This is how one might initialize data
+
+    const pixels = glyphValue.image.data;
+    for (let i = 0; i < NUM_ROWS * NUM_ROWS; i++) {
+      pixels[i * 4 + 0] = Math.random();
+      pixels[i * 4 + 1] = Math.random();
+      pixels[i * 4 + 2] = 0;
+      pixels[i * 4 + 3] = 0;
+    }
+
+    const glyphVariable = gpuCompute.addVariable(
+      "glyph",
+      `
+      // #include <common>
+      #define PI 3.14159265359
+      #define SQRT_2 1.4142135623730951
+      #define SQRT_5 2.23606797749979
+      uniform float now;
+      uniform float delta;
+      uniform float animationSpeed;
+      uniform float fallSpeed;
+      uniform float cycleSpeed;
+      uniform float a;
+      uniform float b;
+      uniform float c;
+      uniform float brightnessChangeBias;
+      uniform float glyphSequenceLength;
+      uniform float numGlyphRows;
+
+      highp float rand( const in vec2 uv ) {
+        const highp float a = 12.9898, b = 78.233, c = 43758.5453;
+        highp float dt = dot( uv.xy, vec2( a,b ) ), sn = mod( dt, PI );
+        return fract(sin(sn) * c);
+      }
+
+      void main()  {
+
+        vec2 cellSize = 1.0 / resolution.xy;
+        vec2 uv = (gl_FragCoord.xy) * cellSize;
+
+        float columnTimeOffset = rand(vec2(gl_FragCoord.x, 0.0));
+        float columnSpeedOffset = rand(vec2(gl_FragCoord.x + 0.1, 0.0));
+
+        vec4 data = texture2D( glyph, uv );
+
+        float brightness = data.r;
+        float cycle = data.g;
+
+        float simTime = now * 0.0005 * animationSpeed * fallSpeed;
+        float columnTime = (columnTimeOffset * 1000.0 + simTime) * (0.5 + columnSpeedOffset * 0.5) + (sin(simTime * 2.0 * columnSpeedOffset) * 0.2);
+        float glyphTime = gl_FragCoord.y * 0.01 + columnTime;
+
+        float value = 1.0 - fract((glyphTime + 0.3 * sin(SQRT_2 * glyphTime) + 0.2 * sin(SQRT_5 * glyphTime)));
+
+        float newBrightness = clamp(a + b * log(c * (value - 0.5)), 0.0, 1.0);
+
+        brightness = mix(brightness, newBrightness, brightnessChangeBias);
+
+
+        float glyphCycleSpeed = delta * cycleSpeed * 0.2 * pow(1.0 - brightness, 4.0);
+        cycle = fract(cycle + glyphCycleSpeed);
+        float symbol = floor(glyphSequenceLength * cycle);
+        float symbolX = mod(symbol, numGlyphRows);
+        float symbolY = (numGlyphRows - 1.0 - (symbol - symbolX) / numGlyphRows);
+
+        gl_FragColor = vec4(0.5);
+        gl_FragColor.r = brightness;
+        gl_FragColor.g = cycle;
+        gl_FragColor.b = symbolX / numGlyphRows;
+        gl_FragColor.a = symbolY / numGlyphRows;
+      }
+      `
+      ,
+      glyphValue
+      );
+    gpuCompute.setVariableDependencies( glyphVariable, [ glyphVariable ] );
+    const animationSpeed = 1;
+    const brightnessChangeBias = animationSpeed == 0 ? 1 : Math.min(1, Math.abs(animationSpeed));
+    const glyphSequenceLength = 57;
+    Object.assign(glyphVariable.material.uniforms, {
+      now: { type: "f", value: 0 },
+      delta: { type: "f", value: 0.01 },
+      animationSpeed: { type: "f", value: animationSpeed },
+      fallSpeed: { type: "f", value: 1 },
+      cycleSpeed: {type: "f", value: 1 },
+      glyphSequenceLength: { type: "f", value: glyphSequenceLength },
+      numGlyphRows: {type: "f", value: 8},
+
+      a: { type: "f", value: 1.125 },
+      b: { type: "f", value: 1.125 },
+      c: { type: "f", value: 1.25 },
+      brightnessChangeBias: { type: "f", value: brightnessChangeBias },
+    });
+    // This is how one might initialize a const
+    /*
+    Object.assign(glyphVariable.material.defines, {
+      BOUNDS: BOUNDS.toFixed( 1 ),
+    });
+    */
+
+    const error = gpuCompute.init();
+    if ( error !== null ) {
+      console.error( error );
+    }
+
+    const plane = new THREE.Mesh(
+      new THREE.PlaneBufferGeometry(),
+      new THREE.MeshBasicMaterial({
+        map: gpuCompute.getCurrentRenderTarget( glyphVariable ).texture
+        // map: new THREE.TextureLoader().load( './matrixcode_msdf.png' )
+      })
+    );
+    plane.geometry.computeVertexNormals();
+    scene.add( plane );
+
+    const start = Date.now();
+    let last = 0;
+
+    const animate = () => {
+      requestAnimationFrame( animate );
+
+      const now = Date.now() - start;
+
+      if (now - last > 50) {
+        last = now;
+        return;
+      }
+
+      const delta = ((now - last > 1000) ? 0 : now - last) / 1000 * animationSpeed;
+      last = now;
+
+      glyphVariable.material.uniforms.now.value = now;
+      glyphVariable.material.uniforms.delta.value = delta;
+
+      gpuCompute.compute(); // Do the gpu computation
+      renderer.render( scene, camera );
+    }
+
+    animate();
+  </script>
+</body>
+</html>
