From c29a911cd1a3f23f66478f205cace14487aadc56 Mon Sep 17 00:00:00 2001 From: Matthew Kosarek Date: Wed, 17 Mar 2021 23:10:55 -0400 Subject: Beginning to build out the orthographic renderer, and updated styles --- frontend/_shared/OrthographicRenderer.cpp | 76 +++++++++++++++++++++++++++++ frontend/_shared/OrthographicRenderer.cpp~ | 0 frontend/_shared/OrthographicRenderer.h | 41 ++++++++++++++++ frontend/_shared/OrthographicRenderer.h~ | 5 ++ frontend/_shared/types.h | 16 ++++++ frontend/_shared/types.h~ | 6 +++ frontend/_wasm/output.js | 30 ++++++++++++ frontend/_wasm/output.wasm | Bin 29351 -> 30239 bytes frontend/_wasm/wasm.cpp | 22 ++++++--- frontend/index.css | 45 ++++++++--------- frontend/index.js | 22 +-------- frontend/navbar.html | 25 ++++++---- frontend/run_dev.sh | 0 13 files changed, 226 insertions(+), 62 deletions(-) create mode 100644 frontend/_shared/OrthographicRenderer.cpp create mode 100644 frontend/_shared/OrthographicRenderer.cpp~ create mode 100644 frontend/_shared/OrthographicRenderer.h create mode 100644 frontend/_shared/OrthographicRenderer.h~ create mode 100644 frontend/_shared/types.h create mode 100644 frontend/_shared/types.h~ mode change 100644 => 100755 frontend/run_dev.sh 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 +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 +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 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 +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 + +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 + +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 Binary files a/frontend/_wasm/output.wasm and b/frontend/_wasm/output.wasm 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(-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 @@ \ No newline at end of file + diff --git a/frontend/run_dev.sh b/frontend/run_dev.sh old mode 100644 new mode 100755 -- cgit v1.2.1