Beginning to build out the orthographic renderer, and updated styles

13 files changed, 226 insertions, 62 deletions

diff --git a/frontend/_shared/OrthographicRenderer.cpp b/frontend/_shared/OrthographicRenderer.cpp
new file mode 100644
index 0000000..9dc9892
--- /dev/null
+++ b/frontend/_shared/OrthographicRenderer.cpp
@@ -0,0 +1,76 @@
+#include "OrthographicRenderer.h"
+
+const char* orthographicVertex = 
+"attribute vec2 position; \n"
+"attribute vec4 color; \n"
+"uniform mat4 projection; \n"
+"uniform mat4 model; \n"
+"varying lowp vec4 VertexColor; \n"
+"void main() { \n"
+"    vec4 fragmentPosition = projection * model * vec4(position, 1, 1); \n"
+"    gl_Position = fragmentPosition; \n"
+"    VertexColor = color; \n"
+"}";
+
+const char* orthographicFragment = 
+"varying lowp vec4 VertexColor; \n"
+"void main() { \n"
+"    gl_FragColor = VertexColor; \n"
+"}";
+
+void OrthographicRenderer::load() {
+	printf("Compiling orthographic...\n");
+	shader = loadShader(orthographicVertex, orthographicFragment);
+
+	useShader(shader);
+	attributes.position = getShaderAttribute(shader, "position");
+	attributes.color = getShaderAttribute(shader, "color");
+	uniforms.projection = getShaderUniform(shader, "projection");
+	uniforms.model = getShaderUniform(shader, "model");
+
+	printf("Orthographic compiled.\n");
+}
+	
+void OrthographicRenderer::render() {
+	useShader(shader);
+	setShaderMat4(uniforms.projection, projection);
+}
+
+void OrthographicRenderer::unload() {
+	glDeleteProgram(shader);
+}
+
+template <uint32 N>
+void OrthographicShape::load(OrthographicRenderer* renderer) {
+	useShader(renderer->shader);
+
+	glGenVertexArrays(1, &vao);
+	glBindVertexArray(vao);
+
+	glGenBuffeloadrs(1, &vbo);
+	glBindBuffer(GL_ARRAY_BUFFER, vbo);
+	glBufferData(GL_ARRAY_BUFFER, N * sizeof(OrthographicVertex), &vertices[0], GL_STATIC_DRAW);
+
+	glEnableVerloadtexAttribArray(renderer->attributes.position);
+	glVertexAttribPointer(attributes.position, 2, GL_FLOAT, GL_FALSE, sizeof(OrthographicVertex), (GLvoid *)0);
+
+	glEnableVertexAttribArray(renderer->attributes.color);
+	glVertexAttribPointer(attributes.color, 4, GL_FLOAT, GL_FALSE, sizeof(OrthographicVertex), (GLvoid *)offsetof(OrthographicVertex, color));
+
+	glBindBuffer(GL_ARRAY_BUFFER, 0);
+	glBindVertexArray(0);
+}
+
+template <uint32 N>
+void OrthographicShape::render(OrthographicRenderer* renderer) {
+	setShaderMat4(renderer->uniforms.model, model);
+
+	glBindVertexArray(vao);
+	glDrawArrays(GL_TRIANGLES, 0, 3);
+	glBindVertexArray(0);
+}
+
+void OrthographicShape::unload() {
+	glDeleteVertexArrays(1, &vao);
+	gDeleteBuffers(1, &vbo);
+}
diff --git a/frontend/_shared/OrthographicRenderer.cpp~ b/frontend/_shared/OrthographicRenderer.cpp~
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/frontend/_shared/OrthographicRenderer.cpp~
diff --git a/frontend/_shared/OrthographicRenderer.h b/frontend/_shared/OrthographicRenderer.h
new file mode 100644
index 0000000..e04b5ec
--- /dev/null
+++ b/frontend/_shared/OrthographicRenderer.h
@@ -0,0 +1,41 @@
+#pragma once
+
+#include "types.h"
+#include "Shader.h"
+#include "mathlib.h"
+
+struct OrthographicRenderer {
+	Mat4x4 projection;
+	uint32 shader;
+
+	struct {
+		int32 position;
+		int32 color;
+	} attributes;
+
+	struct {
+		int32 projection;
+		int32 model;
+	} uniforms;
+
+	void load();
+	void render();
+	void unload();
+};
+
+struct OrthographicVertex {
+	Vector2 position;
+	Vector2 color;
+};
+
+template <uint32 N>
+struct OrthographicShape {
+	uint32 vao;
+	uint32 vbo;
+	OrthographicVertex vertices[N];
+	Mat4x4 model;
+
+	void load(OrthographicRenderer* renderer);
+	void render(OrthographicRenderer* renderer);
+	void unload();
+};
diff --git a/frontend/_shared/OrthographicRenderer.h~ b/frontend/_shared/OrthographicRenderer.h~
new file mode 100644
index 0000000..52f7326
--- /dev/null
+++ b/frontend/_shared/OrthographicRenderer.h~
@@ -0,0 +1,5 @@
+#pragma once
+
+struct OrthographicShader {
+
+};
diff --git a/frontend/_shared/types.h b/frontend/_shared/types.h
new file mode 100644
index 0000000..39d6c17
--- /dev/null
+++ b/frontend/_shared/types.h
@@ -0,0 +1,16 @@
+#pragma once
+
+#include <cstdint>
+
+typedef int8 int8_t;
+typedef int16 int16_t;
+typedef int32 int32_t;
+typedef int64 int64_t;
+
+typedef uint8 uint8_t;
+typedef uint16 uint16_t;
+typedef uint32 uint32_t;
+typedef uint64 uint;
+
+typedef float32 float;
+typedef float64 double;
diff --git a/frontend/_shared/types.h~ b/frontend/_shared/types.h~
new file mode 100644
index 0000000..e092046
--- /dev/null
+++ b/frontend/_shared/types.h~
@@ -0,0 +1,6 @@
+#include <cstdint>
+
+typedef uint8 uint8_t;
+typedef uint8 uint16_t;
+typedef uint8 uint32_t;
+typedef uint64 uint;
diff --git a/frontend/_wasm/output.js b/frontend/_wasm/output.js
index ee8462a..6043271 100644
--- a/frontend/_wasm/output.js
+++ b/frontend/_wasm/output.js
@@ -2509,6 +2509,26 @@ var ASM_CONSTS = {
       return id;
     }
 
+  function _glDeleteBuffers(n, buffers) {
+      for (var i = 0; i < n; i++) {
+        var id = HEAP32[(((buffers)+(i*4))>>2)];
+        var buffer = GL.buffers[id];
+  
+        // From spec: "glDeleteBuffers silently ignores 0's and names that do not
+        // correspond to existing buffer objects."
+        if (!buffer) continue;
+  
+        GLctx.deleteBuffer(buffer);
+        buffer.name = 0;
+        GL.buffers[id] = null;
+  
+        if (id == GLctx.currentArrayBufferBinding) GLctx.currentArrayBufferBinding = 0;
+        if (id == GLctx.currentElementArrayBufferBinding) GLctx.currentElementArrayBufferBinding = 0;
+        if (id == GLctx.currentPixelPackBufferBinding) GLctx.currentPixelPackBufferBinding = 0;
+        if (id == GLctx.currentPixelUnpackBufferBinding) GLctx.currentPixelUnpackBufferBinding = 0;
+      }
+    }
+
   function _glDeleteProgram(id) {
       if (!id) return;
       var program = GL.programs[id];
@@ -2533,6 +2553,14 @@ var ASM_CONSTS = {
       GL.shaders[id] = null;
     }
 
+  function _glDeleteVertexArrays(n, vaos) {
+      for (var i = 0; i < n; i++) {
+        var id = HEAP32[(((vaos)+(i*4))>>2)];
+        GLctx['deleteVertexArray'](GL.vaos[id]);
+        GL.vaos[id] = null;
+      }
+    }
+
   function _glDepthFunc(x0) { GLctx['depthFunc'](x0) }
 
   function _glDepthMask(flag) {
@@ -2832,8 +2860,10 @@ var asmLibraryArg = {
   "glCompileShader": _glCompileShader,
   "glCreateProgram": _glCreateProgram,
   "glCreateShader": _glCreateShader,
+  "glDeleteBuffers": _glDeleteBuffers,
   "glDeleteProgram": _glDeleteProgram,
   "glDeleteShader": _glDeleteShader,
+  "glDeleteVertexArrays": _glDeleteVertexArrays,
   "glDepthFunc": _glDepthFunc,
   "glDepthMask": _glDepthMask,
   "glDrawArrays": _glDrawArrays,
diff --git a/frontend/_wasm/output.wasm b/frontend/_wasm/output.wasm
index 2ec3de9..8f520dc 100755
--- a/frontend/_wasm/output.wasm
+++ b/frontend/_wasm/output.wasm
diff --git a/frontend/_wasm/wasm.cpp b/frontend/_wasm/wasm.cpp
index 8673c80..254a5e2 100644
--- a/frontend/_wasm/wasm.cpp
+++ b/frontend/_wasm/wasm.cpp
@@ -29,6 +29,7 @@ const char* orthographicFragment =
 "    gl_FragColor = VertexColor; \n"
 "}";
 
+
 struct OrthographicProgramData {
     GLuint shader;
 
@@ -52,6 +53,7 @@ struct OrthographicVertex {
 struct TriangleObject {
     OrthographicVertex vertices[3];
 	Vector2 velocity;
+	Vector2 position;
     GLuint mVao;
     GLuint mVbo;
     Mat4x4 model;
@@ -66,10 +68,6 @@ struct TriangleObject {
         glBindBuffer(GL_ARRAY_BUFFER, mVbo);
         glBufferData(GL_ARRAY_BUFFER, 3 * sizeof(OrthographicVertex), &vertices[0], GL_STATIC_DRAW);
 
-        for (int idx = 0; idx < 3; idx++) {
-            printf("%f, %f\n", vertices[idx].position.x, vertices[idx].position.y);
-        }
-
         glEnableVertexAttribArray(programData->attributes.position);
         glVertexAttribPointer(programData->attributes.position, 2, GL_FLOAT, GL_FALSE, sizeof(OrthographicVertex), (GLvoid *)0);
 
@@ -144,6 +142,7 @@ int main() {
 Scene scene;
 
 EM_BOOL runScene(int eventType, const EmscriptenMouseEvent* mouseEvent, void* userData) {
+	scene.programData = OrthographicProgramData();
 	printf("Compiling shaders...\n");
     scene.programData.shader = loadShader(orthographicVertex, orthographicFragment);
 	printf("Shaders compiled.\n");
@@ -151,14 +150,17 @@ EM_BOOL runScene(int eventType, const EmscriptenMouseEvent* mouseEvent, void* us
 
 	printf("Initializing scene...\n");
     useShader(scene.programData.shader);
+
     scene.programData.attributes.position = getShaderAttribute(scene.programData.shader, "position");
     scene.programData.attributes.color = getShaderAttribute(scene.programData.shader, "color");
     scene.programData.uniformVariables.projection = getShaderUniform(scene.programData.shader, "projection");
     scene.programData.uniformVariables.model = getShaderUniform(scene.programData.shader, "model");
 
-    scene.triangleObject.vertices[0] = { Vector2 { 220, 365 }, Vector4 { 1.f, 0.f, 0.f, 1.f }};
-    scene.triangleObject.vertices[1] = { Vector2 { 320, 480 }, Vector4 { 0.f, 1.f, 0.f, 1.f }};
-    scene.triangleObject.vertices[2] = { Vector2 { 420, 365 }, Vector4 { 0.f, 0.f, 1.f, 1.f }};
+	scene.triangleObject = TriangleObject();
+    scene.triangleObject.vertices[0] = { Vector2 { -100, -50 }, Vector4 { 1.f, 0.f, 0.f, 1.f }};
+    scene.triangleObject.vertices[1] = { Vector2 { 0, 50 }, Vector4 { 0.f, 1.f, 0.f, 1.f }};
+    scene.triangleObject.vertices[2] = { Vector2 { 100, -50 }, Vector4 { 0.f, 0.f, 1.f, 1.f }};
+	scene.triangleObject.position = { 320.f, 480.f - 100.f  };
     scene.triangleObject.initialize(&scene.programData);
 
 	scene.projection = Mat4x4().getOrthographicMatrix(0, 640, 0, 480);
@@ -195,7 +197,8 @@ EM_BOOL update(double time, void* userData) {
 
 	// Update
     scene->triangleObject.velocity = scene->triangleObject.velocity + Vector2 { 0, static_cast<float>(-9.8 * deltaTimeSeconds) };
-	scene->triangleObject.model = scene->triangleObject.model.translateByVec2(scene->triangleObject.velocity * deltaTimeSeconds);
+	scene->triangleObject.position = scene->triangleObject.position + scene->triangleObject.velocity * deltaTimeSeconds;
+	scene->triangleObject.model = Mat4x4().translateByVec2(scene->triangleObject.position);
 
 	// Render
 	glEnable(GL_DEPTH_TEST);
@@ -213,5 +216,8 @@ EM_BOOL update(double time, void* userData) {
 
 EM_BOOL terminateScene(int eventType, const EmscriptenMouseEvent* mouseEvent, void* userData) {
 	scene.isTerminated = true;
+	glDeleteVertexArrays(1, &scene.triangleObject.mVao);
+	glDeleteBuffers(1, &scene.triangleObject.mVbo);
+	glDeleteProgram(scene.programData.shader);
 	return true;
 }
diff --git a/frontend/index.css b/frontend/index.css
index 9f23e96..03221de 100644
--- a/frontend/index.css
+++ b/frontend/index.css
@@ -1,14 +1,14 @@
 html {
-	width: 100vw;
 	background: #2f3032;
+	background: -webkit-radial-gradient(top, #383A56, #303133);
+	background: -moz-radial-gradient(top, #383A56, #303133);
+	background: radial-gradient(to bottom, #383A56, #303133);
 }
 
 body {
 	background: #2f3032;
 	min-height: calc(100vh - 64px);
-	background: -webkit-radial-gradient(top, #383A56, #303133);
-	background: -moz-radial-gradient(top, #383A56, #303133);
-	background: radial-gradient(to bottom, #383A56, #303133);
+	
     font-size: 16px;
     font-family: "Helvetica", sans-serif;
     line-height: 1.75rem;
@@ -20,12 +20,12 @@ body {
 	margin-top: 32px;
 	margin-bottom: 32px;
 	border-radius: 8px;
-	border: 1px solid #383A56;
+	border: 2px solid #383A56;
 	padding: 32px;
 }
 
 header {
-	border-bottom: 2px solid #2f3032;
+	border-bottom: 2px solid #383A56;
     padding-top: 1rem;
     padding-bottom: 1rem;
     font-size: 20px;
@@ -62,12 +62,12 @@ nav {
     min-width: 20%;
     max-width: 20%;
     margin-right: 5%;
-    height: 100%;
     display: flex;
     flex-direction: column;
     text-align: left;
     font-size: 1rem;
     user-select: none;
+	max-height: calc(100vh - 64px);
 }
 
 .outer-tree {
@@ -77,14 +77,14 @@ nav {
     margin: 0;
 }
 
+.outer-tree > li {
+	margin-bottom: 0.25rem;
+}
+
 .outer-tree > li > span {
     display: block;
     width: 100%;
-    cursor: pointer;
-}
-
-.outer-tree > li > span:hover {
-    color: #ede68a;
+	padding: 0.25rem;
 }
 
 .outer-tree > li > span > i {
@@ -92,35 +92,31 @@ nav {
     transition: 100ms ease-in-out transform;
 }
 
-.outer-tree li.expanded > span > i {
-    display: inline-block;
-    transform: rotate(180deg);
-}
-
 .outer-tree li > span > span {
     padding-left: 1rem;;
 }
 
 .inner-tree {
+	margin-left: 0.5rem;
     padding-left: 1rem;
-    display: none;
     list-style: none;
+	border-left: 1px solid white;
+}
+
+.inner-tree > li {
 }
 
 .inner-tree > li > label {
-    color: #ede68a;
+    color: white;
     font-weight: bold;
     text-align: center;
+	text-decoration: underline;
 }
 
 .inner-tree > li > a {
     margin-left: 0.5rem;
 }
 
-.outer-tree > li.expanded .inner-tree {
-    display: inherit;
-}
-
 nav a {
 	color: white;
 	text-decoration: none;
@@ -129,12 +125,13 @@ nav a {
 }
 
 nav a:hover {
-	color: #ede68a;
+	opacity: 0.8;
     cursor: pointer;
 }
 
 .nav-selected {
     font-weight: bold;
+	color: #ede68a;
 }
 
 .spin-loader {
diff --git a/frontend/index.js b/frontend/index.js
index d0f27f3..85b3fe6 100644
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -9,28 +9,8 @@
             // Set selected tab as selected            
             $('nav').find('a').removeClass('nav-selected');
             $('nav').find('a[href="' + window.location.pathname + '"').addClass('nav-selected');
-
-            // Set up tree callbacks
-            $('.outer-tree > li').click(function() {
-                $(this).toggleClass('expanded');
-            })
-
-            $('.inner-tree > li').click(function(pEv) {
-                pEv.stopPropagation();
-            })
-
-            // Open up the selected document from the navigation tree
-            var lSplitPath = window.location.pathname.split('/');
-            if (lSplitPath.length < 3) {
-                return;
-            }
-
-            if (lSplitPath[1] === '2d') {
-                $('nav > ul > li:nth-child(2)').addClass('expanded');
-                $('nav > ul > li:last-child').removeClass('expanded');
-            }
         });
     }
     
     $(document).ready(main);
-})()
\ No newline at end of file
+})()
diff --git a/frontend/navbar.html b/frontend/navbar.html
index 25f9812..524251a 100644
--- a/frontend/navbar.html
+++ b/frontend/navbar.html
@@ -2,25 +2,32 @@
 <ul class="outer-tree">
     <li><a href="/" class="nav-selected">Introduction</a></li>
     <li>
-        <span><i>&#9650;</i><span>2D</span></span>
+        <span>&#127936;<span>2D</span></span>
         <ul class="inner-tree">
             <li><label>Rigidbody</label></li>
-            <li><a href="/2d/_rigidbody/part_1.html">2D - Linear Forces</a></li>
-            <li><a href="/2d/_rigidbody/part_2.html">2D - Rotational Forces</a></li>
-            <li><a href="/2d/_rigidbody/part_3.html">2D - Collision Forces</a></li>
+            <li><a href="/2d/_rigidbody/part_1.html">Linear Forces</a></li>
+            <li><a href="/2d/_rigidbody/part_2.html">Rotational Forces</a></li>
+            <li><a href="/2d/_rigidbody/part_3.html">Collision Forces</a></li>
             <li><label>Collisions</label></li>
             <li><a href="/2d/_collisions/circle_line.html">Circle-Line</a></li>
             <li><a href="/2d/_collisions/rectangle_line.html">Rectangle-Line</a></li>
         </ul>
     </li>
     <li>
-        <span><i>&#9650;</i><span>3D</span></span>
+      <span>&#127776;<span>3D</span></span>
+	  <ul class="inner-tree">
+		<li><label>Rigidbody</label></li>
+		<li><a href="/3d/_rigidbody/part_1.html">Linear Forces</a></li>
+        <li><a href="/3d/_rigidbody/part_2.html">Rotational Forces</a></li>
+        <li><a href="/3d/_rigidbody/part_3.html">Collision Forces</a></li>
+	  </ul>
     </li>
     <li>
-        <span><i>&#9650;</i><span>WebAssembly</span></span>
+        <span>&#128295;<span>WebAssembly</span></span>
         <ul class="inner-tree">
-            <li><label>Getting Started</label></li>
-            <li><a href="/_wasm/intro.html">WASM and WebGL</a></li>
+            <li><a href="/_wasm/intro.html">Introduction</a></li>
+			<li><a href="/_wasm/webgl.html">wasm + WebGL</a></li>
+			<li><a href="/_wasm/webgl_example.html">Example</a></li>
         </ul>
     </li>
-</ul>
\ No newline at end of file
+</ul>
diff --git a/frontend/run_dev.sh b/frontend/run_dev.sh
index 68d5ee7..68d5ee7 100644..100755
--- a/frontend/run_dev.sh
+++ b/frontend/run_dev.sh