From f0d1398b0d1b1a7c5bd1d4e0b3488b7f1aa74364 Mon Sep 17 00:00:00 2001
From: Matthew Kosarek <matthew.kosarek@vention.cc>
Date: Tue, 23 Feb 2021 19:39:16 -0500
Subject: Big rework of the directory structure to make it more orderly for my
brain
---
frontend/_shared/2d/program_common.js | 75 +++++++++++++++++++++++++++
frontend/_shared/2d/shader.js | 60 +++++++++++++++++++++
frontend/_shared/2d/shaders/orthographic.frag | 5 ++
frontend/_shared/2d/shaders/orthographic.vert | 13 +++++
4 files changed, 153 insertions(+)
create mode 100644 frontend/_shared/2d/program_common.js
create mode 100644 frontend/_shared/2d/shader.js
create mode 100644 frontend/_shared/2d/shaders/orthographic.frag
create mode 100644 frontend/_shared/2d/shaders/orthographic.vert
(limited to 'frontend/_shared/2d')
diff --git a/frontend/_shared/2d/program_common.js b/frontend/_shared/2d/program_common.js
new file mode 100644
index 0000000..48d0a6b
--- /dev/null
+++ b/frontend/_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/frontend/_shared/2d/shader.js b/frontend/_shared/2d/shader.js
new file mode 100644
index 0000000..4deddb5
--- /dev/null
+++ b/frontend/_shared/2d/shader.js
@@ -0,0 +1,60 @@
+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;
+ }
+
+ return {
+ program: lShaderProgram,
+ attributeLocations: {
+ position: pGl.getAttribLocation(lShaderProgram, 'position'),
+ color: pGl.getAttribLocation(lShaderProgram, 'color')
+ },
+ uniformLocations: {
+ projection: pGl.getUniformLocation(lShaderProgram, 'projection'),
+ model: pGl.getUniformLocation(lShaderProgram, 'model')
+ }
+ }
+ }
+
+ 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/frontend/_shared/2d/shaders/orthographic.frag b/frontend/_shared/2d/shaders/orthographic.frag
new file mode 100644
index 0000000..84b6b2e
--- /dev/null
+++ b/frontend/_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/frontend/_shared/2d/shaders/orthographic.vert b/frontend/_shared/2d/shaders/orthographic.vert
new file mode 100644
index 0000000..0356f9c
--- /dev/null
+++ b/frontend/_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
--
cgit v1.2.1