4 files changed, 169 insertions, 0 deletions
diff --git a/_shared/2d/program_common.js b/_shared/2d/program_common.js
new file mode 100644
index 0000000..48d0a6b
--- /dev/null
+++ b/_shared/2d/program_common.js
@@ -0,0 +1,75 @@
+/// <reference path="shader.js" />
+/// <reference path="../math/mat4.js" />
+
+function getContext(pId, pOnRun) {
+    const lCanvas = $(pId).find('canvas'),
+        lPlayButton = $(pId).find('.play_button'),
+        lStopButton = $(pId).find('.stop_button'),
+        lGl = lCanvas[0].getContext('webgl'),
+        lWidth = lCanvas.width(),
+        lHeight = lCanvas.height();
+
+    return {
+        canvas: lCanvas,
+        playButton: lPlayButton,
+        stopButton: lStopButton,
+        gl: lGl,
+        width: lWidth,
+        height: lHeight,
+        perspective: orthographic(0, lWidth, 0, lHeight),
+        load: function() {
+            lPlayButton.empty().append($('<div>').addClass('spin-loader'));
+            return loadOrthographicShader(lGl).then(function(pProgramInfo) {
+                lPlayButton.css('display', 'none');
+                lStopButton.css('display', 'block');
+                return pProgramInfo;
+            });
+        },
+        reset: function() {
+            lPlayButton.css('display', 'block');
+            lPlayButton.empty().text('Play');
+            lStopButton.css('display', 'none');
+            lStopButton.on('click', undefined);
+        }
+    };
+}
+
+function requestUpdateLoop(pFunction, pOnExit) {
+    let lDeltaTimeSeconds = undefined,
+        lLastTimeSeconds = undefined,
+        lIsRunning = true;
+
+    function update(pTimeStamp) {
+        if (!lIsRunning) {
+            if (pOnExit) {
+                pOnExit();
+            }
+            return;
+        }
+
+        pTimeStamp = pTimeStamp / 1000.0; // Convert to seconds
+
+        // Time calculation
+        if (lLastTimeSeconds === undefined) {
+            lLastTimeSeconds = pTimeStamp;
+            lDeltaTimeSeconds = 0;
+        } else {
+            lDeltaTimeSeconds = pTimeStamp - lLastTimeSeconds;
+            lLastTimeSeconds = pTimeStamp;
+        }
+
+        while (lDeltaTimeSeconds > 0) {
+            pFunction(lDeltaTimeSeconds);
+            lDeltaTimeSeconds -= 0.16;
+        }
+        requestAnimationFrame(update);
+    }
+
+    requestAnimationFrame(update);
+
+    function lExit() {
+        lIsRunning = false;
+    }
+
+    return lExit;
+}
+\ No newline at end of file
diff --git a/_shared/2d/shader.js b/_shared/2d/shader.js
new file mode 100644
index 0000000..7e85a9e
--- /dev/null
+++ b/_shared/2d/shader.js
@@ -0,0 +1,76 @@
+function loadShader(pGl, pShaderType, pShaderSource) {
+    const lShader = pGl.createShader(pShaderType);
+    pGl.shaderSource(lShader, pShaderSource);
+    pGl.compileShader(lShader);
+    if (!pGl.getShaderParameter(lShader, pGl.COMPILE_STATUS)) {
+      alert('An error occurred compiling the shaders: ' + pGl.getShaderInfoLog(lShader));
+      pGl.deleteShader(lShader);
+      return null;
+    }
+  
+    return lShader;
+}
+
+function loadOrthographicShader(pGl) {
+    var lVertex, lFragment;
+
+    function lLoadShaders() {
+        const lVertexShader = loadShader(pGl, pGl.VERTEX_SHADER, lVertex);
+        const lFragmentShader = loadShader(pGl, pGl.FRAGMENT_SHADER, lFragment);
+
+        const lShaderProgram = pGl.createProgram();
+        pGl.attachShader(lShaderProgram, lVertexShader);
+        pGl.attachShader(lShaderProgram, lFragmentShader);
+        pGl.linkProgram(lShaderProgram);
+
+        if (!pGl.getProgramParameter(lShaderProgram, pGl.LINK_STATUS)) {
+            alert('Unable to initialize the shader program: ' + pGl.getProgramInfoLog(lShaderProgram));
+            return null;
+        }
+
+        var lRetval = {
+            program: lShaderProgram,
+            attributeLocations: {
+                position: pGl.getAttribLocation(lShaderProgram, 'position'),
+                color: pGl.getAttribLocation(lShaderProgram, 'color')
+            },
+            uniformLocations: {
+                projection: pGl.getUniformLocation(lShaderProgram, 'projection'),
+                model: pGl.getUniformLocation(lShaderProgram, 'model')
+            }
+        };
+
+        lRetval.renderShape = function(pShape) {
+            pGl.uniformMatrix4fv(lRetval.uniformLocations.model, false, pShape.model);
+            pGl.bindBuffer(pGl.ARRAY_BUFFER, pShape.buffer);
+            {
+                pGl.enableVertexAttribArray(lRetval.attributeLocations.position);
+                pGl.vertexAttribPointer(lRetval.attributeLocations.position, 2, pGl.FLOAT, false, BYTES_PER_FLOAT * 6, 0);
+
+                pGl.enableVertexAttribArray(lRetval.attributeLocations.color);
+                pGl.vertexAttribPointer(lRetval.attributeLocations.color, 4, pGl.FLOAT, false, BYTES_PER_FLOAT * 6, BYTES_PER_FLOAT * 2);
+            }
+
+            pGl.drawArrays(pGl.TRIANGLES, 0, pShape.vertexCount);
+        }
+
+        return lRetval;
+    }
+
+    return fetch('/_shared/2d/shaders/orthographic.vert').then(function(pResponse) {
+        if (pResponse.status === 200) {
+            return pResponse.text().then(function(pShader) {
+                lVertex = pShader;
+
+                return fetch('/_shared/2d/shaders/orthographic.frag').then(function(pResponse) {
+                    if (pResponse.status === 200) {
+                        return pResponse.text().then(function(pShader) {
+                            lFragment = pShader;
+                            return lLoadShaders();
+                        });
+                    }
+                });
+            });
+        }
+    });
+}
+\ No newline at end of file
diff --git a/_shared/2d/shaders/orthographic.frag b/_shared/2d/shaders/orthographic.frag
new file mode 100644
index 0000000..84b6b2e
--- /dev/null
+++ b/_shared/2d/shaders/orthographic.frag
@@ -0,0 +1,5 @@
+varying lowp vec4 VertexColor;
+
+void main() {
+    gl_FragColor = VertexColor;
+}
+\ No newline at end of file
diff --git a/_shared/2d/shaders/orthographic.vert b/_shared/2d/shaders/orthographic.vert
new file mode 100644
index 0000000..0356f9c
--- /dev/null
+++ b/_shared/2d/shaders/orthographic.vert
@@ -0,0 +1,13 @@
+attribute vec2 position;
+attribute vec4 color;
+
+uniform mat4 projection;
+uniform mat4 model;
+
+varying lowp vec4 VertexColor;
+
+void main() {
+    vec4 fragmentPosition = projection * model * vec4(position, 1, 1);
+    gl_Position = fragmentPosition;
+    VertexColor = color;
+}
+\ No newline at end of file