Refactored frontend, beginnings of general cpp layer, and beginning roadmap

author: Matthew Kosarek <mattkae@protonmail.com> 2021-03-22 20:54:51 -0400
committer: Matthew Kosarek <mattkae@protonmail.com> 2021-03-22 20:54:51 -0400
commit: c36d05d5aed2f8f7c6342b174692146e2d11c386 (patch)
tree: 8e54047d7b6db7e3d21ccfad6b8c4965d42c09fa
parent: c29a911cd1a3f23f66478f205cace14487aadc56 (diff)
26 files changed, 461 insertions, 24 deletions
diff --git a/.gitignore b/.gitignore
index 4422c41..efab76d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,4 +4,5 @@ backend/Server/.vs
 .vs/
 backend/Server/Server/Debug
 backend/Server/x64
-backend/Server/Server/x64
-\ No newline at end of file
+backend/Server/Server/x64
+*~
+\ No newline at end of file
diff --git a/frontend/2d/_collisions/pill_line/pill_line.cpp b/frontend/2d/_collisions/pill_line/pill_line.cpp
new file mode 100644
index 0000000..7b85695
--- /dev/null
+++ b/frontend/2d/_collisions/pill_line/pill_line.cpp
@@ -0,0 +1,25 @@
+#include "../../shared_cpp/OrthographicRenderer.h"
+#include "../../shared_cpp/types.h"
+#include "../../WebglContext.h"
+#include <emscripten/html5.h>
+
+type TriangleShape = OrthographicShape<3>;
+
+EM_BOOL run(int eventType, const EmscriptenMouseEvent* mouseEvent, void* userData);
+
+
+int main() {
+	WebglContext context;
+	context.init("#gl_canvas");
+
+	OrthographicRenderer renderer;
+	renderer.load();
+
+	TriangleShape shape;
+	shape.vertices = { { -1, -1, 0 },
+					   { 0, 1, 0 },
+					   { 1, -1, 0 } };
+	shape.load(&renderer);
+	
+	return 0;
+}
diff --git a/frontend/2d/_collisions/pill_line/pill_line.html b/frontend/2d/_collisions/pill_line/pill_line.html
new file mode 100644
index 0000000..04efd38
--- /dev/null
+++ b/frontend/2d/_collisions/pill_line/pill_line.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <script src="/scripts/jquery-3.5.1.min.js"></script>
+        <script src="/index.js"></script>
+        <link rel="stylesheet" href="/index.css">
+        <link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon">
+		<script src="dist/output.js"></script>
+        
+        <title>Physics for Games</title>
+    </head>
+    <body>
+        <header>
+            <h1>Physics for Games</h1>
+        </header>
+        <main>
+            <nav>
+            </nav>
+            <section>
+                <h1>Pill-Line</h1>
+                <article>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                    <div class="opengl_canvas_container">
+                        <canvas id="gl_canvas" width="640" height="480"></canvas>
+                        <div class="opengl_canvas_sidebar">
+
+                        </div>
+                        <button id="play_button" class="play_button">
+                            Play
+                        </button>
+                        <button id="stop_button" class="stop_button">
+                            Stop
+                        </button>
+                    </div>
+                </article>
+            </section>
+        </main>
+    </body>
+</html> 
diff --git a/frontend/_shared/OrthographicRenderer.cpp~ b/frontend/_shared/OrthographicRenderer.cpp~
deleted file mode 100644
index e69de29..0000000
--- a/frontend/_shared/OrthographicRenderer.cpp~
+++ /dev/null
diff --git a/frontend/_shared/OrthographicRenderer.h~ b/frontend/_shared/OrthographicRenderer.h~
deleted file mode 100644
index 52f7326..0000000
--- a/frontend/_shared/OrthographicRenderer.h~
+++ /dev/null
@@ -1,5 +0,0 @@
-#pragma once
-
-struct OrthographicShader {
-
-};
diff --git a/frontend/_shared/types.h~ b/frontend/_shared/types.h~
deleted file mode 100644
index e092046..0000000
--- a/frontend/_shared/types.h~
+++ /dev/null
@@ -1,6 +0,0 @@
-#include <cstdint>
-
-typedef uint8 uint8_t;
-typedef uint8 uint16_t;
-typedef uint8 uint32_t;
-typedef uint64 uint;
diff --git a/frontend/_wasm/build.sh b/frontend/_wasm/build.sh
deleted file mode 100755
index 98bf2c4..0000000
--- a/frontend/_wasm/build.sh
+++ /dev/null
@@ -1 +0,0 @@
-emcc -o output.js wasm.cpp Shader.cpp -s ALLOW_MEMORY_GROWTH=1 -s USE_WEBGL2=1 -s FULL_ES3=1 -s WASM=1 -s NO_EXIT_RUNTIME=1
-\ No newline at end of file
diff --git a/frontend/_wasm/Shader.cpp b/frontend/_wasm/intro/Shader.cpp
index 5f2b00e..5f2b00e 100644
--- a/frontend/_wasm/Shader.cpp
+++ b/frontend/_wasm/intro/Shader.cpp
diff --git a/frontend/_wasm/Shader.h b/frontend/_wasm/intro/Shader.h
index 6ee9981..6ee9981 100644
--- a/frontend/_wasm/Shader.h
+++ b/frontend/_wasm/intro/Shader.h
diff --git a/frontend/_wasm/intro/build.sh b/frontend/_wasm/intro/build.sh
new file mode 100755
index 0000000..3c82f7e
--- /dev/null
+++ b/frontend/_wasm/intro/build.sh
@@ -0,0 +1 @@
+emcc -o dist/output.js intro.cpp Shader.cpp -s ALLOW_MEMORY_GROWTH=1 -s USE_WEBGL2=1 -s FULL_ES3=1 -s WASM=1 -s NO_EXIT_RUNTIME=1
diff --git a/frontend/_wasm/output.js b/frontend/_wasm/intro/dist/output.js
index 6043271..6043271 100644
--- a/frontend/_wasm/output.js
+++ b/frontend/_wasm/intro/dist/output.js
diff --git a/frontend/_wasm/output.wasm b/frontend/_wasm/intro/dist/output.wasm
index 8f520dc..8f520dc 100755
--- a/frontend/_wasm/output.wasm
+++ b/frontend/_wasm/intro/dist/output.wasm
diff --git a/frontend/_wasm/wasm.cpp b/frontend/_wasm/intro/intro.cpp
index 254a5e2..63c80ef 100644
--- a/frontend/_wasm/wasm.cpp
+++ b/frontend/_wasm/intro/intro.cpp
@@ -127,7 +127,7 @@ int main() {
     {
         attrs.majorVersion = 1;
         context = emscripten_webgl_create_context( "#wasm_canvas", &attrs );
-        if (context) printf("Skipping test: WebGL 2.0 is not available.\n");
+        if (context) printf("Skipping test: WebGL 3.0 is not available.\n");
         else printf("Test failed: WebGL is not available!\n");
         return 0;
     }
diff --git a/frontend/_wasm/intro.html b/frontend/_wasm/intro/intro.html
index 9b0d6d5..92a6ea8 100644
--- a/frontend/_wasm/intro.html
+++ b/frontend/_wasm/intro/intro.html
@@ -2,12 +2,12 @@
 <html lang="en">
     <head>
         <meta charset="utf-8">
-        <script src="../../scripts/jquery-3.5.1.min.js"></script>
-        <script src="../../index.js"></script>
-        <script src="wasm.js"></script>
-        <script src="output.js"></script>
-        <link rel="stylesheet" href="../../index.css">
-        <link rel="shortcut icon" href="../../favicon/favicon.ico" type="image/x-icon">
+        <script src="/scripts/jquery-3.5.1.min.js"></script>
+        <script src="/index.js"></script>
+        <script src="intro.js"></script>
+        <script src="dist/output.js"></script>
+        <link rel="stylesheet" href="/index.css">
+        <link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon">
         
         <title>Physics for Games</title>
     </head>
diff --git a/frontend/_wasm/wasm.js b/frontend/_wasm/intro/intro.js
index 37d5faf..37d5faf 100644
--- a/frontend/_wasm/wasm.js
+++ b/frontend/_wasm/intro/intro.js
diff --git a/frontend/_wasm/mathlib.h b/frontend/_wasm/intro/mathlib.h
index 93ddbbd..93ddbbd 100644
--- a/frontend/_wasm/mathlib.h
+++ b/frontend/_wasm/intro/mathlib.h
diff --git a/frontend/index.js b/frontend/index.js
index 85b3fe6..e05b25c 100644
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -2,7 +2,8 @@
 
 (function() {
     function main() {
-        
+
+		// Retrieve the navbar
         $.get('/navbar.html', function(pData) {
             $('nav').html(pData);                 
             
@@ -10,6 +11,17 @@
             $('nav').find('a').removeClass('nav-selected');
             $('nav').find('a[href="' + window.location.pathname + '"').addClass('nav-selected');
         });
+
+		// Set up show/hide functionality on the play/stop buttons
+		$('.play_button').on('click', function() {
+			$(this).hide();
+			$(this).parent().find('.stop_button').show();
+		});
+
+		$('.stop_button').on('click', function() {
+			$(this).hide();
+			$(this).parent().find('.play_button').show();
+		});
     }
     
     $(document).ready(main);
diff --git a/frontend/navbar.html b/frontend/navbar.html
index 524251a..1f29b3f 100644
--- a/frontend/navbar.html
+++ b/frontend/navbar.html
@@ -25,9 +25,15 @@
     <li>
         <span>&#128295;<span>WebAssembly</span></span>
         <ul class="inner-tree">
-            <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>
+            <li><a href="/_wasm/intro/intro.html">Introduction</a></li>
+			<li><a href="/_wasm/webgl/webgl.html">wasm + WebGL</a></li>
+			<li><a href="/_wasm/webgl_example/webgl_example.html">Example</a></li>
+        </ul>
+    </li>
+	<li>
+        <span>&#128712;<span>About</span></span>
+        <ul class="inner-tree">
+            <li><a href="/roadmap.html">Roadmap</a></li>
         </ul>
     </li>
 </ul>
diff --git a/frontend/roadmap.html b/frontend/roadmap.html
new file mode 100644
index 0000000..8c58bbe
--- /dev/null
+++ b/frontend/roadmap.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+      <meta charset="utf-8">
+	  <script src="scripts/jquery-3.5.1.min.js"></script>
+        <script src="index.js"></script>
+        <link rel="stylesheet" href="index.css">
+        <title>Roadmap</title>
+		<style>
+		  section ul {
+			  list-style: none;
+			  padding-left: 0;
+		  }
+		  section li {
+			  position: relative;
+			  padding-left: 1.5em;  /* space to preserve indentation on wrap */
+		  }
+		  section li:before {
+			  content: '';
+			  position: absolute;
+			  left: 0;
+			  width: 1rem;
+			  height: 1rem;
+		  }
+		  section ul {
+			  list-style: none;
+		  }
+
+		  section ul li:before {
+			  content: '-';
+		  }
+
+		  section ul li.done:before {
+			  content: '✓';
+		  }
+		  
+		  .done {
+			  color: lightgreen;
+		  }
+		</style>
+    </head>
+    <body>
+	  <header>
+        <h1>Physics for Games</h1>
+      </header>
+	  <main>
+		<nav></nav>
+		<section>
+		  <h1>Ground Work</h1>
+		  <ul>
+			<li class="done">Orthographic rendering basics</li>
+			<li>WASM Framework with simulation loop</li>
+		  </ul>
+		  <hr/>
+		  <h1>2D Collisions with Descriptions</h1>
+		  <ul>
+			<li>Pill-Line Collision</li>
+			<li>Pill-Pill Collisions</li>
+			<li>Pill-Circle Collisions</li>
+			<li>Pill-Square Collisions</li>
+			<li>Square-Line Collisions (Redo)</li>
+			<li>Circle-Line Collisions (Redo)</li>
+			<li>Square-Circle Collision</li>
+		  </ul>
+		  <hr />
+		  <h1>Brief Wasm Series</h1>
+		  <ul>
+			<li>Getting started with WASM docs</li>
+			<li>Wasm examples</li>
+		  </ul>
+		  <p style="color: pink; font-size: 18px;">
+			Everything above has a due date of <b>April 30th, 2021</b>. None of it is that hard, so this should be a very doable timeline.
+		  </p>
+		</section>
+	  </main>
+	</body>
+</html>
diff --git a/frontend/_shared/OrthographicRenderer.cpp b/frontend/shared_cpp/OrthographicRenderer.cpp
index 9dc9892..9dc9892 100644
--- a/frontend/_shared/OrthographicRenderer.cpp
+++ b/frontend/shared_cpp/OrthographicRenderer.cpp
diff --git a/frontend/_shared/OrthographicRenderer.h b/frontend/shared_cpp/OrthographicRenderer.h
index e04b5ec..e04b5ec 100644
--- a/frontend/_shared/OrthographicRenderer.h
+++ b/frontend/shared_cpp/OrthographicRenderer.h
diff --git a/frontend/shared_cpp/Shader.cpp b/frontend/shared_cpp/Shader.cpp
new file mode 100644
index 0000000..5f2b00e
--- /dev/null
+++ b/frontend/shared_cpp/Shader.cpp
@@ -0,0 +1,61 @@
+#include "Shader.h"
+#include <string>
+
+GLuint loadIndividualShader(GLenum shaderType, const GLchar* cCode) {
+    GLuint shader = glCreateShader(shaderType);
+    glShaderSource(shader, 1, &cCode, 0);
+    glCompileShader(shader);
+    GLint success;
+    glGetShaderiv(shader, GL_COMPILE_STATUS, &success);
+    if (!success) {
+        GLchar infoLog[512];
+        glGetShaderInfoLog(shader, 512, 0, infoLog);
+		printf("Failed to load shader: %s, Shader =%s\n", infoLog, cCode);
+        return 0;
+    }
+    
+    return shader;
+}
+
+void attachShaders(Shader& retVal, const GLchar* vertexShader, const GLchar* fragmentShader) {
+    GLuint vertex = 0, fragment = 0, geometry = 0;
+    if (vertexShader) {
+        vertex = loadIndividualShader(GL_VERTEX_SHADER, vertexShader);
+        glAttachShader(retVal, vertex);
+    }
+
+    if (fragmentShader) {
+        fragment = loadIndividualShader(GL_FRAGMENT_SHADER, fragmentShader);
+        glAttachShader(retVal, fragment);
+    }
+
+    glLinkProgram(retVal);
+    GLint isLinked = 0;
+    glGetProgramiv(retVal, GL_LINK_STATUS, (int*)&isLinked);
+    if (isLinked == GL_FALSE) {
+        GLint maxLength = 0;
+        glGetProgramiv(retVal, GL_INFO_LOG_LENGTH, &maxLength);
+
+        // The maxLength includes the NULL character
+        GLchar* infoLog = new GLchar[maxLength];
+        glGetProgramInfoLog(retVal, maxLength, &maxLength, infoLog);
+        glDeleteProgram(retVal);
+        printf("Error. Could not initialize shader with vertex=%s, error=%s\n", vertexShader, infoLog);
+        delete []infoLog;
+    }
+
+    if (vertexShader)
+        glDeleteShader(vertex);
+    if (fragmentShader)
+        glDeleteShader(fragment);
+}
+
+Shader loadShader(const GLchar* vertexShader, const GLchar* fragmentShader) {
+    Shader retVal;
+    retVal = glCreateProgram();
+
+    attachShaders(retVal, vertexShader, fragmentShader);
+    useShader(retVal);
+
+    return retVal;
+}
diff --git a/frontend/shared_cpp/Shader.h b/frontend/shared_cpp/Shader.h
new file mode 100644
index 0000000..6ee9981
--- /dev/null
+++ b/frontend/shared_cpp/Shader.h
@@ -0,0 +1,63 @@
+#pragma once
+
+#include <GL/glew.h>
+#include <string>
+#include <vector>
+#include "mathlib.h"
+
+typedef GLuint Shader;
+
+Shader loadShader(const GLchar* vertexShader, const GLchar* fragmentShader);
+
+inline GLint getShaderUniform(const Shader& shader, const GLchar *name) {
+    GLint uid = glGetUniformLocation(shader, name);
+	if (uid < 0) {
+		return -1;
+	}
+	return uid;
+}
+
+inline GLint getShaderAttribute(const Shader& shader, const GLchar *name) {
+	printf("Getting attribute for shader, name: %d, %s\n", shader, name);
+    GLint uid = glGetAttribLocation(shader, name);
+	if (uid < 0) {
+		return -1;
+	}
+	return uid;
+}
+
+inline void useShader(const Shader& shader) {
+	glUseProgram(shader);
+}
+
+inline void setShaderFloat(GLint location, GLfloat value) {
+    glUniform1f(location, value);
+}
+
+inline void setShaderInt(GLint location, GLint value) {
+	glUniform1i(location, value);
+}
+
+inline void setShaderUint(GLint location, GLuint value) {
+	glUniform1ui(location, value);
+}
+
+inline void setShaderVec2(GLint location, const Vector2& value) {
+	glUniform2f(location, value.x, value.y);
+}
+
+inline void setShaderMat4(GLint location, const Mat4x4& matrix) {
+	glUniformMatrix4fv(location, 1, GL_FALSE, matrix.m);
+}
+
+inline void setShaderBVec3(GLint location, bool first, bool second, bool third) {
+	glUniform3i(location, first, second, third);
+}
+
+inline void setShaderBVec4(GLint location, bool first, bool second, bool third, bool fourth) {
+	glUniform4i(location, first, second, third, fourth);
+}
+
+inline void setShaderBool(GLint location, bool value) {
+	glUniform1i(location, value);
+}
+\ No newline at end of file
diff --git a/frontend/shared_cpp/WebglContext.h b/frontend/shared_cpp/WebglContext.h
new file mode 100644
index 0000000..cf9cce2
--- /dev/null
+++ b/frontend/shared_cpp/WebglContext.h
@@ -0,0 +1,31 @@
+#pragma once
+#include <emscripten.h>
+#include <emscripten/html5.h>
+#include <GLES2/gl2.h>
+#include <EGL/egl.h>
+
+struct WebglContext {
+	void init(const char* query, int width = 640, int height = 480) {
+		emscripten_set_canvas_element_size( query, width, height);
+		
+		EmscriptenWebGLContextAttributes attrs;
+		emscripten_webgl_init_context_attributes(&attrs);
+
+		attrs.enableExtensionsByDefault = 1;
+		attrs.majorVersion = 3;
+		attrs.minorVersion = 0;
+
+		context = emscripten_webgl_create_context( "#wasm_canvas", &attrs );
+		makeCurrentContext();
+	};
+	
+	void makeCurrentContext() {
+		emscripten_webgl_make_context_current(context);
+	};
+	
+	void destroy() {
+		emscripten_webgl_destroy_context(context);
+	}
+
+	EMSCRIPTEN_WEBGL_CONTEXT_HANDLE context;
+};
diff --git a/frontend/shared_cpp/mathlib.h b/frontend/shared_cpp/mathlib.h
new file mode 100644
index 0000000..93ddbbd
--- /dev/null
+++ b/frontend/shared_cpp/mathlib.h
@@ -0,0 +1,130 @@
+#pragma once
+#include <cstdio>
+#include <cstdlib>
+#include <cstring>
+
+struct Vector2 {
+    float x = 0;
+    float y = 0;
+
+    Vector2 operator+(Vector2 other) {
+        return { x + other.x, y + other.y };
+    }
+
+    Vector2 operator-(Vector2 other) {
+        return { x - other.x, y - other.y };
+    }
+
+    Vector2 operator*(float s) {
+        return { x * s, y * s };
+    }
+
+    float dot(Vector2 other) {
+        return x * other.x + y * other.y;
+    }
+
+    float length() {
+        return sqrtf(x * x + y * y);
+    }
+
+    Vector2 normalize() {
+        float len = length();
+        float inverseLength = len == 0 ? 1.0 : 1.0 / len;
+
+        return { x * inverseLength, y * inverseLength };
+    }
+
+    Vector2 negate() {
+        return { -x, -y };
+    }
+
+    Vector2 getPerp() {
+        return { -y, x };
+    }
+};
+
+struct Vector3 {
+    float x = 0.f;
+    float y = 0.f;
+    float z = 0.f;
+};
+
+struct Vector4 {
+    float x = 0.f;
+    float y = 0.f;
+    float z = 0.f;
+    float w = 0.f;
+};
+
+struct Mat4x4 {
+    float m[16] = {
+        1, 0, 0, 0,
+        0, 1, 0, 0,
+        0, 0, 1, 0,
+        0, 0, 0, 1
+    };
+
+    Mat4x4 copy() {
+        Mat4x4 result;
+        memcpy(result.m, m, sizeof(float) * 16);
+        return result;
+    }
+
+    Mat4x4 scale(Vector3 v) {
+        Mat4x4 result = copy();
+        result.m[0] = result.m[0] * v.x;
+        result.m[5] = result.m[5] *v.y;
+        result.m[10] = result.m[10] * v.z;
+        return result;
+    }
+
+    Mat4x4 translate(Vector3 v) {
+        Mat4x4 result = copy();
+        result.m[12] += v.x;
+        result.m[13] += v.y;
+        result.m[14] += v.z;
+        return result;
+    }
+
+	Mat4x4 translateByVec2(Vector2 v) {
+        Mat4x4 result = copy();
+        result.m[12] += v.x;
+        result.m[13] += v.y;
+        return result;
+    }
+
+    Mat4x4 rotate2D(float angle) {
+        Mat4x4 result = copy();
+        result.m[0] = cos(angle);
+        result.m[1] = -sin(angle);
+        result.m[4] = sin(angle);
+        result.m[5] = cos(angle);
+        return result;
+    }
+
+    Vector2 multByVec2(Vector2 v) {
+        Vector4 vec4 = { v.x, v.y, 0.0, 1.0 };
+        return {
+            vec4.x * m[0] + vec4.y * m[4] + vec4.z * m[8] + vec4.w * m[12],
+            vec4.x * m[1] + vec4.y * m[5] + vec4.z * m[9] + vec4.w * m[13]
+        };
+    }
+
+    Mat4x4 getOrthographicMatrix(float left, float right, float bottom, float top) {
+        Mat4x4 result;
+        result.m[0] = 2.0 / (right - left);
+        result.m[5] = 2.0 / (top - bottom);
+        result.m[10] = 1.0;
+        result.m[12] = -(right + left) / (right - left);
+        result.m[13] = -(top + bottom) / (top - bottom);
+        return result;
+    }
+
+	void print() {
+		printf("[ ");
+		for (int idx = 0; idx < 16; idx++) {
+			printf("%d, ", idx);
+		}
+		printf(" ]\n");
+	}
+};
diff --git a/frontend/_shared/types.h b/frontend/shared_cpp/types.h
index 39d6c17..39d6c17 100644
--- a/frontend/_shared/types.h
+++ b/frontend/shared_cpp/types.h
author	Matthew Kosarek <mattkae@protonmail.com>	2021-03-22 20:54:51 -0400
committer	Matthew Kosarek <mattkae@protonmail.com>	2021-03-22 20:54:51 -0400
commit	c36d05d5aed2f8f7c6342b174692146e2d11c386 (patch)
tree	8e54047d7b6db7e3d21ccfad6b8c4965d42c09fa
parent	c29a911cd1a3f23f66478f205cace14487aadc56 (diff)