commit ea8c08ae5a42cecd06477b7836763b5a805a4c64
parent 94ee8796606c814a57587307fe303cb5066bfc70
Author: amin <dev@aminmesbah.com>
Date: Sun, 23 Jun 2019 20:53:59 +0000
Successfully render the cube in webgl
All we needed to do was transpose all the matrices we send to webgl!
That was a tough one to track down. Starting with simpler cases was
helpful in order to isolate variables and track down the cause.
FossilOrigin-Name: 64f81609b42f8c88aac7a4910183896c0f9abee8afe694b3813da85760002c7a
Diffstat:
| M | js/imports.js | | | 2 | ++ |
| M | src/game.c | | | 83 | ++++++------------------------------------------------------------------------- |
2 files changed, 8 insertions(+), 77 deletions(-)
diff --git a/js/imports.js b/js/imports.js
@@ -134,6 +134,8 @@ imports["webglUniform3f"] = function(location_id, x, y, z) {
imports["webglUniformMatrix4fv"] = function(location_id, data) {
let loc = gl_id_map[location_id];
let dataslice = memory.slice(data, data + 4 * 16);
+ // TODO: figure out why we need to transpose the matrix here, but not in
+ // normal opengl
gl.uniformMatrix4fv(loc, true, new Float32Array(dataslice.buffer));
}
imports["webglUseProgram"] = function(program_id) {
diff --git a/src/game.c b/src/game.c
@@ -8,45 +8,6 @@
void game_init(struct GameState *game_state, u32 screen_width, u32 screen_height)
{
-#if 0
- {
- GLfloat triangle_vertices[] = {
- // positions // colors
- -0.5f, -0.5f, 1.0f, 0.0f, 0.0f,
- 0.5f, -0.5f, 0.0f, 1.0f, 0.0f,
- 0.0f, 0.5f, 0.0f, 0.0f, 1.0f,
- };
- u32 elements[] = {
- 0, 1, 2,
- };
-
- GLuint VBO;
- GLuint VAO;
- glGenVertexArrays(1, &VAO);
- glGenBuffers(1, &VBO);
-
- glBindVertexArray(VAO);
- glBindBuffer(GL_ARRAY_BUFFER, VBO);
- glBufferData(GL_ARRAY_BUFFER, sizeof(triangle_vertices), triangle_vertices, GL_STATIC_DRAW);
-
- // positions
- glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(GLfloat), (GLvoid*)0);
- glEnableVertexAttribArray(0);
-
- // colors
- glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(GLfloat), (GLvoid*)(2 * sizeof(GLfloat)));
- glEnableVertexAttribArray(1);
-
- u32 cube_ebo;
- glGenBuffers(1, &cube_ebo);
- glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, cube_ebo);
- glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(elements), elements, GL_STATIC_DRAW);
-
- game_state->cube_vao = VAO;
- game_state->cube_vbo = VBO;
- game_state->cube_ebo = cube_ebo;
- }
-#else
// load cube vertex data
{
f32 cube_vertices[] = {
@@ -96,7 +57,6 @@ void game_init(struct GameState *game_state, u32 screen_width, u32 screen_height
game_state->cube_vbo = cube_vbo;
game_state->cube_ebo = cube_ebo;
}
-#endif
// game_shader_load
{
@@ -121,33 +81,6 @@ void game_init(struct GameState *game_state, u32 screen_width, u32 screen_height
void game_update_and_render(struct GameState *game_state, float dt, u32 screen_width, u32 screen_height)
{
-#if 0
- {
- m4 view = glmth_m4_init_id();
- m4 projection = glmth_m4_init_id();
- view = glmth_translate(view, glmth_v3_init(0.0f, 0.0f, -3.0f));
- projection = glmth_projection_perspective_fov(glmth_rad(45.0f), (float)screen_width / (float)screen_height, 0.1f, 100.0f);
-
- glClearColor(0.1f, 0.4f, 0.4f, 1.0f);
- glClear(GL_COLOR_BUFFER_BIT);
-
- m4 model = glmth_m4_init_id();
- f32 angle = 20.0f;
- f32 rot_rad = dt * glmth_rad(angle);
- model = glmth_rotate(model, rot_rad, glmth_v3_init(0.0f, 0.0f, 1.0f));
- model = glmth_rotate(model, rot_rad, glmth_v3_init(0.0f, 1.0f, 0.0f));
- model = glmth_rotate(model, rot_rad, glmth_v3_init(1.0f, 0.0f, 0.0f));
-
- shader_use(&game_state->cube_shader);
- shader_setm4(&game_state->cube_shader, "model", &model);
- shader_setm4(&game_state->cube_shader, "view", &view);
- shader_setm4(&game_state->cube_shader, "projection", &projection);
- shader_setf(&game_state->cube_shader, "alpha", 1.0f);
-
- //glDrawArrays(GL_TRIANGLES, 0, 3);
- glDrawElements(GL_TRIANGLES, 3, GL_UNSIGNED_INT, 0);
- }
-#else
glDepthMask(GL_TRUE);
glClearColor(0.2f, 0.2f, 0.3f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
@@ -156,17 +89,16 @@ void game_update_and_render(struct GameState *game_state, float dt, u32 screen_w
m4 view = glmth_m4_init_id();
m4 projection = glmth_m4_init_id();
- //TODO: make these transforms work on webgl like the do natively
- //view = glmth_translate(view, glmth_v3_init(0.0f, 0.0f, -3.0f));
- //projection = glmth_projection_perspective_fov(glmth_rad(45.0f), (float)screen_width / (float)screen_height, 0.1f, 100.0f);
+ view = glmth_translate(view, glmth_v3_init(0.0f, 0.0f, -3.0f));
+ projection = glmth_projection_perspective_fov(glmth_rad(45.0f), (float)screen_width / (float)screen_height, 0.1f, 100.0f);
// render cube
{
// Depth testing causes the blending to be applied inconsistently
// depending on the draw order, so we must disable it.
- //glDisable(GL_DEPTH_TEST);
+ glDisable(GL_DEPTH_TEST);
- //glEnable(GL_BLEND);
+ glEnable(GL_BLEND);
// TODO: get this to work regardless of background color
glBlendColor(0.0f, 0.0f, 0.0f, 1.0f);
glBlendFunc(GL_SRC_ALPHA, GL_CONSTANT_ALPHA);
@@ -179,10 +111,8 @@ void game_update_and_render(struct GameState *game_state, float dt, u32 screen_w
f32 angle = 20.0f;
// TODO: fmodf this so we don't get huge numbers eventually
f32 rot_rad = dt * glmth_rad(angle);
- // TODO: Figure out why the cube rotates counter clockwise on linux but
- // clockwise on wasm
- //model = glmth_rotate(model, rot_rad, glmth_v3_init(1.0f, 0.0f, 0.0f));
- //model = glmth_rotate(model, rot_rad, glmth_v3_init(0.0f, 1.0f, 0.0f));
+ model = glmth_rotate(model, rot_rad, glmth_v3_init(1.0f, 0.0f, 0.0f));
+ model = glmth_rotate(model, rot_rad, glmth_v3_init(0.0f, 1.0f, 0.0f));
model = glmth_rotate(model, rot_rad, glmth_v3_init(0.0f, 0.0f, 1.0f));
f32 alpha = 0.2f * (1.5f + glmth_sinf(0.5f * dt));
@@ -194,7 +124,6 @@ void game_update_and_render(struct GameState *game_state, float dt, u32 screen_w
glEnable(GL_DEPTH_TEST);
glDisable(GL_BLEND);
}
-#endif
}
void game_cleanup(struct GameState *game_state)
