summaryrefslogtreecommitdiff
path: root/frontend
diff options
context:
space:
mode:
Diffstat (limited to 'frontend')
-rw-r--r--frontend/_shared/OrthographicRenderer.cpp76
-rw-r--r--frontend/_shared/OrthographicRenderer.cpp~0
-rw-r--r--frontend/_shared/OrthographicRenderer.h41
-rw-r--r--frontend/_shared/OrthographicRenderer.h~5
-rw-r--r--frontend/_shared/types.h16
-rw-r--r--frontend/_shared/types.h~6
-rw-r--r--frontend/_wasm/output.js30
-rwxr-xr-xfrontend/_wasm/output.wasmbin29351 -> 30239 bytes
-rw-r--r--frontend/_wasm/wasm.cpp22
-rw-r--r--frontend/index.css45
-rw-r--r--frontend/index.js22
-rw-r--r--frontend/navbar.html25
-rwxr-xr-x[-rw-r--r--]frontend/run_dev.sh0
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
Binary files differ
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
generated by cgit v1.2.1 (git 2.18.0) at 2024-11-22 13:19:06 +0000