Removing antialiasing, depth and stencil; setting shader precision to low. Disconnecting numRows from fall speed and tail length.

TODO.txt

@@ -3,8 +3,9 @@ TODO:
 Revisit rain logic
   Rework columns to support multiple drops at once
     Switch to some kind of continuous noise source
-        And remember, cycling needs to be continuous too
+        Remember, cycling needs to be continuous too (but then mod 1)
-    Give each glyph an XY for its four vertices, which doesn't change
+        Vertex shader uses continuous function to derive UV and brightness
+    Static mesh: Give each vertex of a glyph the same XY, different vec2 corners
 
 
 
@@ -12,6 +13,8 @@ Reach out to Ashley's partner about producing sounds
 
 
 Much later:
+  Optimization: calculate texture derivatives on CPU, pass in as a uniform
+  Optimization: simpler bloom replacement
   Dissolve threejs project into webgl project
     Maybe webgl2 project?
   Flashing row effect?

index.html

@@ -18,13 +18,6 @@
     const sharpness = 0.5;
     const animationSpeed = 1.01;
 
-    const mobilecheck = function() {
-      // TODO
-      return false;
-    };
-
-    const isOnMoble = mobilecheck();
-
     document.ontouchmove = (e) => e.preventDefault();
     const element = document.createElement("matrixcode");
     document.body.appendChild(element);
@@ -32,7 +25,7 @@
     const scene = new THREE.Scene();
     scene.background = new THREE.Color(0, 0, 0);
     scene.add(camera);
-    const renderer = new THREE.WebGLRenderer({ antialias: true });
+    const renderer = new THREE.WebGLRenderer({ stencil: false, depth: false, precision: "lowp" });
     renderer.sortObjects = true;
     renderer.setPixelRatio(window.devicePixelRatio);
     renderer.setSize( window.innerWidth, window.innerHeight );
@@ -62,7 +55,7 @@
         #ifdef GL_OES_standard_derivatives
         #extension GL_OES_standard_derivatives: enable
         #endif
-        precision highp float;
+        precision lowp float;
         #define BIG_ENOUGH 0.001
         #define MODIFIED_ALPHATEST (0.02 * isBigEnough / BIG_ENOUGH)
         uniform sampler2D map;
@@ -142,9 +135,9 @@
     const glyphUVFloat32Array = new Float32Array(glyphUVArray);
 
     const initializeColumn = column => {
-      column.tailLength = (0.3 + Math.random() * 0.6) * 60 / numRows;
+      column.tailLength = 0.25 + Math.random() * 0.45;
-      column.fallSpeed = (0.4 + Math.random() * 0.4) * 60 / numRows;
+      column.fallSpeed = 0.3 + Math.random() * 0.3;
-      column.position = -(column.fallSpeed * Math.random() * 0.5);
+      column.position = -column.fallSpeed * Math.random() * 0.5;
       return column;
     }
 
@@ -208,7 +201,7 @@
     const blurMag = 0.0001;
     const ditherMag = 0.075;
     const filmGrainPass = new THREE.FilmGrainPass(blurMag, ditherMag);
-    if (!isOnMoble) composer.addPass(filmGrainPass);
+    composer.addPass(filmGrainPass);
 
     const windowResize = () => {
       const [width, height] = [window.innerWidth, window.innerHeight];
@@ -237,6 +230,9 @@
     const flattenedUVTemplate = [].concat(...glyphUVTemplate);
     const uvScrap = [];
     let last = NaN;
+
+    const minimumPostProcessingFrameTime = 1;
+
     const update = now => {
       if (now - last > 50) {
         last = now;
@@ -244,6 +240,13 @@
       }
       const delta = ((isNaN(last) || now - last > 1000) ? 0 : now - last) / 1000 * animationSpeed;
       last = now;
+
+      bloomPass.enabled = delta < minimumPostProcessingFrameTime;
+      filmGrainPass.enabled = delta < minimumPostProcessingFrameTime;
+
+      composer.passes.filter(pass => !pass.enabled).renderToScreen = false;
+      composer.passes.filter(pass => pass.enabled).pop().renderToScreen = true;
+
       for (let columnIndex = 0; columnIndex < columns.length; columnIndex++) {
         const column = columns[columnIndex];
         column.position = column.position + delta * column.fallSpeed;
@@ -266,7 +269,9 @@
               column.uvArray.set(uvScrap, rowIndex * verticesPerGlyph * glyphUVMarch);
             }
           }
-          glyph.brightness = 0.8 + 0.9 * Math.log(val * 1.0);
+          glyph.brightness = Math.max(0, Math.min(1,
+            0.8 + 0.4 * Math.log(val * 0.5)
+          ));
           column.brightnessArray.set(glyphBrightnessTemplate.map(() => glyph.brightness), rowIndex * verticesPerGlyph * glyphBrightnessMarch);
         }
       }
@@ -274,8 +279,6 @@
       geometry.attributes.brightness.needsUpdate = true;
     };
 
-    composer.passes[composer.passes.length - 1].renderToScreen = true;
-
     const render = () => {
       requestAnimationFrame(render);
       const now = Date.now();