From 118b5a69eff9ca2db1427568acc0f8a1aee4d2a6 Mon Sep 17 00:00:00 2001
From: Rezmason <jeremysachs@rezmason.net>
Date: Mon, 3 Sep 2018 00:18:25 -0700
Subject: [PATCH] Moving Matrix material into its own file

---
 index.html           | 53 +++-----------------------------------------
 js/MatrixMaterial.js | 50 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+), 50 deletions(-)
 create mode 100644 js/MatrixMaterial.js

diff --git a/index.html b/index.html
index 09bf40b..3a6051d 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,8 @@
   <script src="./js/LuminosityHighPassShader.js"></script>
   <script src="./js/UnrealBloomPass.js"></script>
 
+  <script src="./js/MatrixMaterial.js"></script>
+
   <script>
 
     const urlParams = new Map(window.location.href.replace(/^[^\?]+\?/, "").split("&").map(pair => pair.split("=")));
@@ -41,56 +43,7 @@
     element.appendChild(renderer.domElement);
     const composer = new THREE.EffectComposer( renderer );
     const texture = new THREE.TextureLoader().load( './matrixcode_msdf.png' );
-    const material = new THREE.RawShaderMaterial({
-      uniforms: {
-        map: { "type": "t", value: texture },
-        sharpness: { "type": "f", value: sharpness },
-      },
-      vertexShader:`
-        attribute vec2 uv;
-        attribute vec3 position;
-        attribute float brightness;
-        uniform mat4 projectionMatrix;
-        uniform mat4 modelViewMatrix;
-        varying vec2 vUV;
-        varying float vBrightness;
-        void main(void) {
-          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-          vUV = uv;
-          vBrightness = brightness;
-        }
-      `,
-      fragmentShader:`
-        #ifdef GL_OES_standard_derivatives
-        #extension GL_OES_standard_derivatives: enable
-        #endif
-        precision lowp float;
-        #define BIG_ENOUGH 0.001
-        #define MODIFIED_ALPHATEST (0.02 * isBigEnough / BIG_ENOUGH)
-        uniform sampler2D map;
-        uniform float sharpness;
-        varying vec2 vUV;
-        varying float vBrightness;
-        float median(float r, float g, float b) {
-          return max(min(r, g), min(max(r, g), b));
-        }
-        void main() {
-          vec3 sample = texture2D(map, vUV).rgb;
-          float sigDist = median(sample.r, sample.g, sample.b) - 0.5;
-          float alpha = clamp(sigDist/fwidth(sigDist) + 0.5, 0.0, 1.0);
-          float dscale = 0.353505 / sharpness;
-          vec2 duv = dscale * (dFdx(vUV) + dFdy(vUV));
-          float isBigEnough = max(abs(duv.x), abs(duv.y));
-          if (isBigEnough > BIG_ENOUGH) {
-            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(vBrightness * alpha), 1);
-        }
-      `,
-    });
+    const material = makeMatrixMaterial(texture, sharpness);
 
     const fTexU = 1 / 8;
     const fTexV = 1 / 8;
diff --git a/js/MatrixMaterial.js b/js/MatrixMaterial.js
new file mode 100644
index 0000000..7301a17
--- /dev/null
+++ b/js/MatrixMaterial.js
@@ -0,0 +1,50 @@
+const makeMatrixMaterial = (texture, sharpness) => new THREE.RawShaderMaterial({
+  uniforms: {
+    map: { "type": "t", value: texture },
+    sharpness: { "type": "f", value: sharpness },
+  },
+  vertexShader:`
+    attribute vec2 uv;
+    attribute vec3 position;
+    attribute float brightness;
+    uniform mat4 projectionMatrix;
+    uniform mat4 modelViewMatrix;
+    varying vec2 vUV;
+    varying float vBrightness;
+    void main(void) {
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      vUV = uv;
+      vBrightness = brightness;
+    }
+  `,
+  fragmentShader:`
+    #ifdef GL_OES_standard_derivatives
+    #extension GL_OES_standard_derivatives: enable
+    #endif
+    precision lowp float;
+    #define BIG_ENOUGH 0.001
+    #define MODIFIED_ALPHATEST (0.02 * isBigEnough / BIG_ENOUGH)
+    uniform sampler2D map;
+    uniform float sharpness;
+    varying vec2 vUV;
+    varying float vBrightness;
+    float median(float r, float g, float b) {
+      return max(min(r, g), min(max(r, g), b));
+    }
+    void main() {
+      vec3 sample = texture2D(map, vUV).rgb;
+      float sigDist = median(sample.r, sample.g, sample.b) - 0.5;
+      float alpha = clamp(sigDist/fwidth(sigDist) + 0.5, 0.0, 1.0);
+      float dscale = 0.353505 / sharpness;
+      vec2 duv = dscale * (dFdx(vUV) + dFdy(vUV));
+      float isBigEnough = max(abs(duv.x), abs(duv.y));
+      if (isBigEnough > BIG_ENOUGH) {
+        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(vBrightness * alpha), 1);
+    }
+  `,
+});