Old and new matrix rendering now coexist.

js/config.js

@@ -17,11 +17,12 @@ const fonts = {
 };
 
 const defaults = {
+  threedee: false,
   animationSpeed: 1,
   forwardSpeed: 0.25,
   bloomStrength: 1,
-  bloomSize: 1,
+  bloomSize: 0.6,
-  highPassThreshold: 0.3,
+  highPassThreshold: 0.1,
   cycleSpeed: 1,
   cycleStyleName: "cycleFasterWhenDimmed",
   cursorEffectThreshold: 1,
@@ -159,7 +160,8 @@ const paramMapping = {
     parser: s => nullNaN(range(parseFloat(s), 0, 1))
   },
   url: { key: "bgURL", parser: s => s },
-  colors: { key: "stripeColors", parser: s => s }
+  colors: { key: "stripeColors", parser: s => s },
+  threedee: { key: "threedee", parser: s => s.toLowerCase().includes("true") }
 };
 paramMapping.dropLength = paramMapping.raindropLength;
 paramMapping.angle = paramMapping.slant;

js/renderer.js

@@ -16,12 +16,17 @@ const cycleStyles = {
   cycleRandomly: 1
 };
 
-const numVerticesPerGlyph = 2 * 3;
+const numVerticesPerQuad = 2 * 3;
+
 
 export default (regl, config) => {
 
-  const density = config.density;
+  const threedee = config.threedee;
+  const density = threedee && config.effect !== "none" ? config.density : 1;
   const [numRows, numColumns] = [config.numColumns, config.numColumns * density];
+  const [numQuadRows, numQuadColumns] = threedee ? [numRows, numColumns] : [1, 1];
+  const numQuads = numQuadRows * numQuadColumns;
+  const quadSize = [1 / numQuadColumns, 1 / numQuadRows];
 
   // These two framebuffers are used to compute the raining code.
   // they take turns being the source and destination of the "compute" shader.
@@ -40,11 +45,11 @@ export default (regl, config) => {
 
   const output = makePassFBO(regl, config.useHalfFloat);
 
-  const uniforms = extractEntries(config, [
+  const uniforms = {
+    ...extractEntries(config, [
       // rain general
       "glyphHeightToWidth",
       "glyphTextureColumns",
-    "density",
       // rain update
       "animationSpeed",
       "brightnessMinimum",
@@ -66,10 +71,15 @@ export default (regl, config) => {
       // rain render
       "glyphEdgeCrop",
       "isPolar",
-  ]);
+    ]),
-
+    density,
-  uniforms.numRows = numRows;
+    numRows,
-  uniforms.numColumns = numColumns;
+    numColumns,
+    numQuadRows,
+    numQuadColumns,
+    quadSize,
+    threedee
+  };
 
   uniforms.rippleType =
     config.rippleTypeName in rippleTypes
@@ -264,23 +274,13 @@ export default (regl, config) => {
     framebuffer: doubleBuffer.front
   });
 
-  const numGlyphs = numRows * numColumns;
+  const quadPositions = Array(numQuadRows).fill().map((_, y) =>
-
+    Array(numQuadColumns).fill().map((_, x) =>
-  const glyphPositions = Array(numRows).fill().map((_, y) =>
+      Array(numVerticesPerQuad).fill([x, y])
-    Array(numColumns).fill().map((_, x) =>
-      Array(numVerticesPerGlyph).fill([x, y])
     )
   );
-  const glyphCorners = Array(numGlyphs).fill([[0, 0], [0, 1], [1, 1], [0, 0], [1, 1], [1, 0]]);
 
-  const depthMesh = {};
+  const quadCorners = Array(numQuads).fill([[0, 0], [0, 1], [1, 1], [0, 0], [1, 1], [1, 0]]);
-  Object.assign(depthMesh, {
-    attributes: {
-      aPosition: glyphPositions,
-      aCorner: glyphCorners
-    },
-    count: numGlyphs * numVerticesPerGlyph,
-  });
 
   // We render the code into an FBO using MSDFs: https://github.com/Chlumsky/msdfgen
   const render = regl({
@@ -297,28 +297,40 @@ export default (regl, config) => {
       precision lowp float;
       attribute vec2 aPosition, aCorner;
       uniform float width, height;
-      uniform float numColumns, numRows, density;
+      uniform float density;
+      uniform vec2 quadSize;
       uniform sampler2D lastState;
       uniform float forwardSpeed;
-      varying vec2 vUV;
+      uniform float glyphHeightToWidth;
-      varying vec4 vGlyph;
       uniform mat4 camera;
       uniform mat4 transform;
       uniform float time;
+      uniform bool threedee;
       uniform bool showComputationTexture;
+      varying vec2 vUV;
+      varying vec4 vGlyph;
       void main() {
-        vUV = (aPosition + aCorner) / vec2(numColumns, numRows);
+
-        vec2 position = (aPosition + aCorner * vec2(density, 1.)) / vec2(numColumns, numRows);
+        vUV = (aPosition + aCorner) * quadSize;
+        vec2 position = (aPosition + aCorner * vec2(density, 1.)) * quadSize;
         position = (position - 0.5) * 2.0;
-        vGlyph = texture2D(lastState, vUV + (0.5 - aCorner) / vec2(numColumns, numRows));
+        vGlyph = texture2D(lastState, vUV + (0.5 - aCorner) * quadSize);
 
-        float glyphDepth = showComputationTexture ? 0. : fract(vGlyph.b + time * forwardSpeed);
+        float quadDepth = 0.0;
-        vGlyph.b = glyphDepth;
+        if (threedee && !showComputationTexture) {
-        vec4 pos = camera * transform * vec4(position, glyphDepth, 1.0);
+          quadDepth = fract(vGlyph.b + time * forwardSpeed);
+          vGlyph.b = quadDepth;
+        }
+        vec4 pos = vec4(position, quadDepth, 1.0);
 
+        if (threedee) {
+          pos.x /= glyphHeightToWidth;
+          pos = camera * transform * pos;
+        } else {
           // Scale the geometry to cover the longest dimension of the viewport
-        // vec2 size = width > height ? vec2(width / height, 1.) : vec2(1., height / width);
+          vec2 size = width > height ? vec2(width / height, 1.) : vec2(1., height / width);
-        // pos.xy *= size;
+          pos.xy *= size;
+        }
 
         gl_Position = pos;
       }
@@ -331,6 +343,7 @@ export default (regl, config) => {
       #endif
       precision lowp float;
 
+      uniform sampler2D lastState;
       uniform float numColumns, numRows;
       uniform sampler2D glyphTex;
       uniform float glyphHeightToWidth, glyphSequenceLength, glyphTextureColumns, glyphEdgeCrop;
@@ -338,6 +351,7 @@ export default (regl, config) => {
       uniform float slantScale;
       uniform bool isPolar;
       uniform bool showComputationTexture;
+      uniform bool threedee;
 
       varying vec2 vUV;
       varying vec4 vGlyph;
@@ -357,6 +371,7 @@ export default (regl, config) => {
 
         vec2 uv = vUV;
 
+        if (!threedee) {
           if (isPolar) {
             // Curves the UV space to make letters appear to radiate from up above
             uv -= 0.5;
@@ -373,21 +388,26 @@ export default (regl, config) => {
             (uv.y - 0.5) * slantVec.x - (uv.x - 0.5) * slantVec.y
             ) * slantScale + 0.5;
           }
-
           uv.y /= glyphHeightToWidth;
+        }
+
+        vec4 glyph = threedee ? vGlyph : texture2D(lastState, uv);
 
         if (showComputationTexture) {
-          gl_FragColor = vGlyph;
+          gl_FragColor = glyph;
           return;
         }
 
         // Unpack the values from the font texture
-        float brightness = vGlyph.r;
+        float brightness = glyph.r;
-        float effect = vGlyph.a;
+        float symbolIndex = getSymbolIndex(glyph.g);
+        float quadDepth = glyph.b;
+        float effect = glyph.a;
+
         brightness = max(effect, brightness);
-        float symbolIndex = getSymbolIndex(vGlyph.g);
+        if (threedee) {
-        float glyphDepth = vGlyph.b;
+          brightness = min(1.0, brightness * quadDepth * 1.25);
-        float depthFade = min(1.0, glyphDepth * 1.25);
+        }
 
         // resolve UV to MSDF texture coord
         vec2 symbolUV = vec2(mod(symbolIndex, glyphTextureColumns), floor(symbolIndex / glyphTextureColumns));
@@ -402,7 +422,7 @@ export default (regl, config) => {
         float sigDist = median3(dist) - 0.5;
         float alpha = clamp(sigDist/fwidth(sigDist) + 0.5, 0.0, 1.0);
 
-        gl_FragColor = vec4(vec3(brightness * alpha * depthFade), 1.0);
+        gl_FragColor = vec4(vec3(brightness * alpha), 1.0);
       }
     `,
 
@@ -416,7 +436,11 @@ export default (regl, config) => {
       lastState: doubleBuffer.front
     },
 
-    ...depthMesh,
+    attributes: {
+      aPosition: quadPositions,
+      aCorner: quadCorners
+    },
+    count: numQuads * numVerticesPerQuad,
 
     framebuffer: output
   });