effect "none" now shows the bare compute texture, with a slight difference to indicate areas of high cycle speed.

Added dropLength property.

README.md

@@ -12,6 +12,7 @@
 - [Pride colors](https://rezmason.github.io/matrix/?effect=pride)
 - [Custom stripes (`colors=R,G,B,R,G,B,R,G,B, etc`)](https://rezmason.github.io/matrix/?effect=customStripes&colors=1,0,0,1,1,0,0,1,0)
 - [Custom image (`url=www.website.com/picture.jpg`)](https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg)
+- [Raw compute texture (`effect=none`) (_epilepsy warning_: lots of flickering)](https://rezmason.github.io/matrix/?effect=none)
 
 - [The free font (TrueType).](https://github.com/Rezmason/matrix/raw/master/Matrix-Code.ttf)
 ---
@@ -40,7 +41,7 @@ While there have been a lot of attempts at #1 and #3, they're all missing import
 - **Capture the glyph sequence.** Yes, the symbols in the sequels' opening titles, which are arguably the highest quality versions of the 2D effect, change according to a repeating sequence (see `glyph order.txt`).
 - **Make it free, open source and web based.** Because someone could probably improve on what I've done, and I'd like to see that, and maybe incorporate their improvements back into this project.
 - **Whip up some artistic license and depict the *previous* Matrix versions.** The sequels describe [a paradisiacal predecessor](https://rezmason.github.io/matrix?version=paradise) to the Matrix that was too idyllic, [and another earlier, nightmarish Hobbesian version](https://rezmason.github.io/matrix?version=nightmare) that proved too campy. They depict some programs running older, differently colored code, so it's time someone tried rendering them.
-- **Include the following statement in the README.md:** Sure, you can enjoy movies, including *The Matrix*, without reading too deeply into them, but if you're going to really think about a film, make it this one. And here's the thing: **The Matrix is a story about transitioning, directed by two siblings who transitioned**. Bam. There's plenty more themes in it and its sequels than that, and plenty of room for interpretation, but no room for the misogynistic ideas that led to that gross subreddit we all know about. Wake up from your prejudices, boys. Here's a chance to open our minds, not shut them.
+- **Include the following statement in the README.md:** Sure, you can enjoy movies, including *The Matrix*, without reading too deeply into them, but if you're going to really think about a film, make it this one. And here's the thing: **The Matrix is a story about transitioning, directed by two siblings who transitioned**. So there! There's plenty more themes in it and its sequels than that, and plenty of room for interpretation, but no room for the misogynistic ideas that led to that gross subreddit we all know about. Wake up from your prejudices, boys. Here's a chance to open our minds, not shut them.
 
 ---
 ### customization
@@ -57,6 +58,7 @@ Now you know link fu. Here's a list of customization options:
 - **fallSpeed** - the speed of the rain. Can be any number, even negative! Default is 1.0.
 - **cycleSpeed** - the speed that the glyphs change their symbol. Can be any number, even negative! Default is 1.0.
 - **effect** - alternatives to the default post-processing effect. Can be "plain", "pride", "customStripes", "none", or "image".
+  - ("none" displays the texture whose RGBA values represent the glyph shape and brightness data. _epilepsy warning_: lots of flickering)
 - **colors** - if you set the effect to "customStripes", you can specify the colors of vertical stripes as alternating *R,G,B* numeric values, like so: [https://rezmason.github.io/matrix/?effect=customStripes&colors=1,0,0,1,1,0,0,1,0](https://rezmason.github.io/matrix/?effect=customStripes&colors=1,0,0,1,1,0,0,1,0)
 - **url** - if you set the effect to "image", this is how you specify which image to load. It doesn't work with any URL; I suggest grabbing them from Wikipedia: [https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg](https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg)
 

index.html

@@ -27,6 +27,7 @@
     const versions = {
       paradise: {
         texture: './coptic_msdf.png',
+        dropLength: 0.5,
         glyphSequenceLength: 32,
         bloom: {
           strength: 4,
@@ -50,6 +51,7 @@
       },
       nightmare: {
         texture: './gothic_msdf.png',
+        dropLength: 0.6,
         glyphSequenceLength: 27,
         bloom: {
           strength: 2,
@@ -73,6 +75,7 @@
       },
       ["1999"]: {
         texture: './matrixcode_msdf.png',
+        dropLength: 1,
         glyphSequenceLength: 57,
         bloom: {
           strength: 2,
@@ -123,6 +126,7 @@
     const fallSpeed = parseFloat(getParam("fallSpeed", 1)) * version.fallSpeed;
     const cycleSpeed = parseFloat(getParam("cycleSpeed", 1)) * version.cycleSpeed;
     const numColumns = parseInt(getParam("width", version.numColumns));
+    const dropLength = parseFloat(getParam("dropLength", version.dropLength));
     const numGlyphColumns = 8;
     const glyphSequenceLength = version.glyphSequenceLength;
 
@@ -150,13 +154,17 @@
       hasSun: version.hasSun,
       isPolar: version.isPolar,
       isSlanted: version.isSlanted,
+      showRTT: effect === "none",
+      dropLength
     });
 
     matrixRenderer.pass.renderToScreen = false;
     composer.addPass( matrixRenderer.pass );
 
     const bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), version.bloom.strength, version.bloom.radius, version.bloom.threshold );
-    composer.addPass( bloomPass );
+    if (effect !== "none") {
+      composer.addPass( bloomPass );
+    }
 
     switch (effect) {
       case "plain":

js/MatrixRenderer.js

@@ -7,7 +7,9 @@ const makeMatrixRenderer = (renderer, texture, {
   hasThunder,
   hasSun,
   isPolar,
-  isSlanted
+  isSlanted,
+  showRTT,
+  dropLength
 }) => {
   const matrixRenderer = {};
   const camera = new THREE.OrthographicCamera( -0.5, 0.5, 0.5, -0.5, 0.0001, 10000 );
@@ -37,6 +39,7 @@ const glyphVariable = gpuCompute.addVariable(
     uniform float brightnessChangeBias;
     uniform float glyphSequenceLength;
     uniform float numGlyphColumns;
+    uniform float dropLength;
 
     highp float rand( const in vec2 uv ) {
       const highp float a = 12.9898, b = 78.233, c = 43758.5453;
@@ -63,7 +66,7 @@ const glyphVariable = gpuCompute.addVariable(
 
       float simTime = now * 0.0005 * animationSpeed;
       float columnTime = (columnTimeOffset * 1000.0 + simTime * fallSpeed) * (0.5 + columnSpeedOffset * 0.5) + (sin(simTime * fallSpeed * 2.0 * columnSpeedOffset) * 0.2);
-      float glyphTime = gl_FragCoord.y * 0.01 + columnTime;
+      float glyphTime = (gl_FragCoord.y * 0.01 + columnTime) / dropLength;
 
       float value = 1.0 - fract((glyphTime + 0.3 * sin(SQRT_2 * glyphTime) + 0.2 * sin(SQRT_5 * glyphTime)));
 
@@ -89,8 +92,7 @@ const glyphVariable = gpuCompute.addVariable(
         brightness = mix(brightness, newBrightness, brightnessChangeBias);
       #endif
 
-
-      float glyphCycleSpeed = delta * cycleSpeed * 0.2 * pow(1.0 - brightness, 4.0);
+      float glyphCycleSpeed = (brightness < 0.0) ? 0.0 : delta * cycleSpeed * 0.2 * pow(1.0 - brightness, 4.0);
       cycle = fract(cycle + glyphCycleSpeed);
       float symbol = floor(glyphSequenceLength * cycle);
       float symbolX = mod(symbol, numGlyphColumns);
@@ -99,8 +101,15 @@ const glyphVariable = gpuCompute.addVariable(
       gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
       gl_FragColor.r = brightness;
       gl_FragColor.g = cycle;
-      gl_FragColor.b = symbolX / numGlyphColumns;
-      gl_FragColor.a = symbolY / numGlyphColumns;
+
+      #ifdef showRTT
+        // Better use of the blue channel, for show and tell
+        gl_FragColor.b = min(1.0, glyphCycleSpeed * 500.0);
+        gl_FragColor.a = 1.0;
+      #else
+        gl_FragColor.b = symbolX / numGlyphColumns;
+        gl_FragColor.a = symbolY / numGlyphColumns;
+      #endif
     }
     `
     ,
@@ -117,6 +126,7 @@ const glyphVariable = gpuCompute.addVariable(
     cycleSpeed: {type: "f", value: cycleSpeed },
     glyphSequenceLength: { type: "f", value: glyphSequenceLength },
     numGlyphColumns: {type: "f", value: numGlyphColumns },
+    dropLength: {type: "f", value: dropLength },
     brightnessChangeBias: { type: "f", value: brightnessChangeBias },
   });
   if (hasThunder) {
@@ -125,6 +135,9 @@ const glyphVariable = gpuCompute.addVariable(
   if (hasSun) {
     glyphVariable.material.defines.hasSun = 1.0;
   }
+  if (showRTT) {
+    glyphVariable.material.defines.showRTT = 1.0;
+  }
 
   const error = gpuCompute.init();
   if ( error !== null ) {
@@ -190,8 +203,14 @@ const glyphVariable = gpuCompute.addVariable(
              (vUV.y - 0.5) * rotation.x - (vUV.x - 0.5) * rotation.y) * 0.75 + 0.5;
         #endif
 
-        // Unpack the values from the glyph texture
         vec4 glyph = texture2D(glyphs, uv);
+
+        #ifdef showRTT
+          gl_FragColor = glyph;
+          return;
+        #endif
+
+        // Unpack the values from the glyph texture
         float brightness = glyph.r;
         vec2 symbolUV = glyph.ba;
         vec4 sample = texture2D(msdf, fract(uv * numColumns) / numGlyphColumns + symbolUV);
@@ -206,12 +225,10 @@ const glyphVariable = gpuCompute.addVariable(
           float ratio = BIG_ENOUGH / isBigEnough;
           alpha = ratio * alpha + (1.0 - ratio) * (sigDist + 0.5);
         }
+
         if (isBigEnough <= BIG_ENOUGH && alpha < 0.5) { discard; return; }
         if (alpha < 0.5 * MODIFIED_ALPHATEST) { discard; return; }
-
         gl_FragColor = vec4(vec3(brightness * alpha), 1.0);
-
-        // gl_FragColor = vec4(glyph.r, glyph.b, glyph.a, 1.0);
       }
       `
     })
@@ -226,6 +243,10 @@ const glyphVariable = gpuCompute.addVariable(
     mesh.material.defines.isSlanted = 1.0;
   }
 
+  if (showRTT) {
+    mesh.material.defines.showRTT = 1.0;
+  }
+
   scene.add( mesh );
 
   let start = NaN;