Moved shaders into their own files

index.html

@@ -46,6 +46,7 @@ <h2>3. Render the GIF</h2>
     <script src="gif.js"></script>
     <script src="js/grecha.js"></script>
     <script src="js/eval.js"></script>
+    <script src="js/fetchers.js"></script>
     <script src="js/filters.js"></script>
     <script src="js/index.js"></script>
   </body>

js/fetchers.js

@@ -0,0 +1,103 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var FileFetcher = (function () {
+    function FileFetcher(directory, file, extension) {
+        var validDirRegex = /\/?[A-Za-z\-\_\.]+\/?/;
+        var validFileRegex = /[A-Za-z\-\_\.]+/;
+        var validExtensionRegex = /\.?[A-Za-z]+/;
+        if (!validDirRegex.test(directory)) {
+            throw new Error("Invalid Directory String:\"" + directory + "\"");
+        }
+        if (!validFileRegex.test(file)) {
+            throw new Error("Invalid File String:\"" + directory + "\"");
+        }
+        if (!validExtensionRegex.test(extension)) {
+            throw new Error("Invalid Extension String:\"" + directory + "\"");
+        }
+        if (!directory.endsWith("/")) {
+            directory += "/";
+        }
+        if (!extension.startsWith(".")) {
+            extension = "." + extension;
+        }
+        this.path = directory + file + extension;
+    }
+    FileFetcher.prototype.FetchFile = function () {
+        var req = new XMLHttpRequest();
+        req.open("GET", this.path, false);
+        req.send(null);
+        return {
+            response: req.response,
+            status: req.status,
+            type: req.responseType
+        };
+    };
+    FileFetcher.prototype.FetchFileAsync = function () {
+        return fetch(this.path);
+    };
+    return FileFetcher;
+}());
+var VertexShaderFetcher = (function (_super) {
+    __extends(VertexShaderFetcher, _super);
+    function VertexShaderFetcher(shaderName) {
+        return _super.call(this, "shaders", shaderName, ".vert") || this;
+    }
+    VertexShaderFetcher.prototype.GetShader = function () {
+        var response = this.FetchFile();
+        if (response.status != 200) {
+            throw new Error("Request returned with code: " + response.status);
+        }
+        if (response.type != "text" && response.type != "") {
+            throw new Error("Response type error: Expected \"text\" but got \"" + response.type + "\"");
+        }
+        return response.response;
+    };
+    VertexShaderFetcher.prototype.GetShaderAsync = function () {
+        return this.FetchFileAsync().then(function (value) {
+            if (!value.ok) {
+                Promise.reject("Response was not OK");
+            }
+            return value.text();
+        });
+    };
+    return VertexShaderFetcher;
+}(FileFetcher));
+var FragmentShaderFetcher = (function (_super) {
+    __extends(FragmentShaderFetcher, _super);
+    function FragmentShaderFetcher(shaderName) {
+        return _super.call(this, "shaders", shaderName, ".frag") || this;
+    }
+    FragmentShaderFetcher.prototype.GetShader = function () {
+        var response = this.FetchFile();
+        if (response.status != 200) {
+            throw new Error("Request returned with code: " + response.status);
+        }
+        if (response.type != "text" && response.type != "") {
+            throw new Error("Response type error: Expected \"text\" but got \"" + response.type + "\"");
+        }
+        return response.response;
+    };
+    FragmentShaderFetcher.prototype.GetShaderAsync = function () {
+        return this.FetchFileAsync().then(function (value) {
+            if (!value.ok) {
+                Promise.reject("Response was not OK");
+            }
+            return value.text();
+        });
+    };
+    return FragmentShaderFetcher;
+}(FileFetcher));

js/index.js

@@ -62,8 +62,10 @@ function createTextureFromImage(gl, image) {
 }
 function loadFilterProgram(gl, filter, vertexAttribs) {
     var _a;
-    var vertexShader = compileShaderSource(gl, filter.vertex, gl.VERTEX_SHADER);
-    var fragmentShader = compileShaderSource(gl, filter.fragment, gl.FRAGMENT_SHADER);
+    var vertexShaderSource = filter.vertex instanceof VertexShaderFetcher ? filter.vertex.GetShader() : filter.vertex;
+    var fragmentShaderSource = filter.fragment instanceof FragmentShaderFetcher ? filter.fragment.GetShader() : filter.fragment;
+    var vertexShader = compileShaderSource(gl, vertexShaderSource, gl.VERTEX_SHADER);
+    var fragmentShader = compileShaderSource(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);
     var id = linkShaderProgram(gl, [vertexShader, fragmentShader], vertexAttribs);
     gl.deleteShader(vertexShader);
     gl.deleteShader(fragmentShader);

shaders/Blob.frag

@@ -0,0 +1,15 @@
+#version 100
+
+precision mediump float;
+
+uniform vec2 resolution;
+uniform float time;
+
+uniform sampler2D emote;
+
+varying vec2 uv;
+
+void main() {
+    gl_FragColor = texture2D(emote, vec2(uv.x, 1.0 - uv.y));
+    gl_FragColor.w = floor(gl_FragColor.w + 0.5);
+}

shaders/Blob.vert

@@ -0,0 +1,21 @@
+#version 100
+
+precision mediump float;
+
+attribute vec2 meshPosition;
+
+uniform vec2 resolution;
+uniform float time;
+
+varying vec2 uv;
+
+void main() {
+    float stretch = sin(6.0 * time) * 0.5 + 1.0;
+
+    vec2 offset = vec2(0.0, 1.0 - stretch);
+    gl_Position = vec4(
+        meshPosition * vec2(stretch, 2.0 - stretch) + offset,
+        0.0,
+        1.0);
+    uv = (meshPosition + vec2(1.0, 1.0)) / 2.0;
+}

shaders/Bounce.frag

@@ -0,0 +1,16 @@
+
+#version 100
+
+precision mediump float;
+
+uniform vec2 resolution;
+uniform float time;
+
+uniform sampler2D emote;
+
+varying vec2 uv;
+
+void main() {
+    gl_FragColor = texture2D(emote, vec2(uv.x, 1.0 - uv.y));
+    gl_FragColor.w = floor(gl_FragColor.w + 0.5);
+}

shaders/Bounce.vert

@@ -0,0 +1,18 @@
+#version 100
+precision mediump float;
+
+attribute vec2 meshPosition;
+
+uniform vec2 resolution;
+uniform float time;
+
+uniform float period;
+uniform float scale;
+
+varying vec2 uv;
+
+void main() {
+    vec2 offset = vec2(0.0, (2.0 * abs(sin(time * period)) - 1.0) * (1.0 - scale));
+    gl_Position = vec4(meshPosition * scale + offset, 0.0, 1.0);
+    uv = (meshPosition + 1.0) / 2.0;
+}

shaders/Circle.frag

@@ -0,0 +1,17 @@
+
+#version 100
+
+precision mediump float;
+
+uniform vec2 resolution;
+uniform float time;
+
+uniform sampler2D emote;
+
+varying vec2 uv;
+
+void main() {
+    float speed = 1.0;
+    gl_FragColor = texture2D(emote, vec2(uv.x, 1.0 - uv.y));
+    gl_FragColor.w = floor(gl_FragColor.w + 0.5);
+}

shaders/Circle.vert

@@ -0,0 +1,29 @@
+#version 100
+precision mediump float;
+
+attribute vec2 meshPosition;
+
+uniform vec2 resolution;
+uniform float time;
+
+varying vec2 uv;
+
+vec2 rotate(vec2 v, float a) {
+	float s = sin(a);
+	float c = cos(a);
+	mat2 m = mat2(c, -s, s, c);
+	return m * v;
+}
+
+void main() {
+    float scale = 0.30;
+    float period_interval = 8.0;
+    float pi = 3.141592653589793238;
+    vec2 outer_circle = vec2(cos(period_interval * time), sin(period_interval * time)) * (1.0 - scale);
+    vec2 inner_circle = rotate(meshPosition * scale, (-period_interval * time) + pi / 2.0);
+    gl_Position = vec4(
+        inner_circle + outer_circle,
+        0.0,
+        1.0);
+    uv = (meshPosition + 1.0) / 2.0;
+}

shaders/Elevator.frag

@@ -0,0 +1,23 @@
+
+#version 100
+
+precision mediump float;
+
+uniform vec2 resolution;
+uniform float time;
+
+uniform sampler2D emote;
+
+varying vec2 uv;
+
+float slide(float speed, float value) {
+    return mod(value - speed * time, 1.0);
+}
+
+void main() {
+    float speed = 4.0;
+    gl_FragColor = texture2D(
+        emote,
+        vec2(uv.x, slide(speed, 1.0 - uv.y)));
+    gl_FragColor.w = floor(gl_FragColor.w + 0.5);
+}

shaders/Elevator.vert

@@ -0,0 +1,14 @@
+#version 100
+precision mediump float;
+
+attribute vec2 meshPosition;
+
+uniform vec2 resolution;
+uniform float time;
+
+varying vec2 uv;
+
+void main() {
+    gl_Position = vec4(meshPosition, 0.0, 1.0);
+    uv = (meshPosition + 1.0) / 2.0;
+}

shaders/Flag.frag

@@ -0,0 +1,45 @@
+
+        #version 100
+        precision mediump float;
+
+        varying vec2 _uv;
+        uniform sampler2D emote;
+        uniform float time;
+
+        float sin01(float value)
+        {
+            return (sin(value) + 1.0) / 2.0;
+        }
+
+        //pos is left bottom point.
+        float sdf_rect(vec2 pos, vec2 size, vec2 uv)
+        {
+            float left = pos.x;
+            float right = pos.x + size.x;
+            float bottom = pos.y;
+            float top = pos.y + size.y;
+            return (step(bottom, uv.y) - step(top, uv.y)) * (step(left, uv.x) - step(right, uv.x)); 
+        }
+
+        void main() {
+            float stick_width = 0.1;
+            float flag_height = 0.75;
+            float wave_size = 0.08;
+            vec4 stick_color = vec4(107.0 / 256.0, 59.0 / 256.0, 9.0 / 256.0,1);
+
+            vec2 flag_uv = _uv;
+            flag_uv.x = (1.0 / (1.0 - stick_width)) * (flag_uv.x - stick_width);
+            flag_uv.y *= 1.0 / flag_height;
+
+            float flag_close_to_stick = smoothstep(0.0, 0.5, flag_uv.x);
+            flag_uv.y += sin((-time * 2.0) + (flag_uv.x * 8.0)) * flag_close_to_stick * wave_size;
+
+            float is_flag = sdf_rect(vec2(0,0), vec2(1.0, 1.0), flag_uv);
+            float is_flag_stick = sdf_rect(vec2(0.0, 0.0), vec2(stick_width, 1), _uv);
+
+            vec4 emote_color = texture2D(emote, flag_uv);
+            vec4 texture_color = (emote_color * is_flag) + (stick_color * is_flag_stick);
+
+            gl_FragColor = texture_color;
+        }
+

shaders/Flag.vert

@@ -0,0 +1,18 @@
+
+        #version 100
+        precision mediump float;
+
+        attribute vec2 meshPosition;
+
+        uniform vec2 resolution;
+        uniform float time;
+
+        varying vec2 _uv;
+
+        void main()
+        {
+            _uv = (meshPosition + 1.0) / 2.0;
+            _uv.y = 1.0 - _uv.y;
+            gl_Position = vec4(meshPosition.x, meshPosition.y, 0.0, 1.0);
+        }
+

shaders/Go.frag

@@ -0,0 +1,21 @@
+
+#version 100
+
+precision mediump float;
+
+uniform vec2 resolution;
+uniform float time;
+
+uniform sampler2D emote;
+
+varying vec2 uv;
+
+float slide(float speed, float value) {
+    return mod(value - speed * time, 1.0);
+}
+
+void main() {
+    float speed = 4.0;
+    gl_FragColor = texture2D(emote, vec2(slide(speed, uv.x), 1.0 - uv.y));
+    gl_FragColor.w = floor(gl_FragColor.w + 0.5);
+}

shaders/Go.vert

@@ -0,0 +1,14 @@
+#version 100
+precision mediump float;
+
+attribute vec2 meshPosition;
+
+uniform vec2 resolution;
+uniform float time;
+
+varying vec2 uv;
+
+void main() {
+    gl_Position = vec4(meshPosition, 0.0, 1.0);
+    uv = (meshPosition + 1.0) / 2.0;
+}