Wiggly cube with PERSPECTIVE

1 files changed, 26 insertions, 13 deletions

diff --git a/src/wasm_msponge.zig b/src/wasm_msponge.zig
index bee8e8c..69cf211 100644
--- a/src/wasm_msponge.zig
+++ b/src/wasm_msponge.zig
@@ -34,8 +34,8 @@ export fn init() void {
     webgl.bindBuffer(.array_buffer, col_buffer);
     webgl.bufferData(.array_buffer, &col_data, .static_draw);
 
-    //webgl.enable(.cull_face);
-    //webgl.enable(.depth_test);
+    webgl.enable(.cull_face);
+    webgl.enable(.depth_test);
 }
 
 const col_data: [18 * 6]f32 = blk: {
@@ -142,20 +142,16 @@ export fn update(delta_time: f32) void {
     prog.setUniform(.color, .{ 1, 1, 1 });
 
     const screen_dims = webgl.getScreenSize();
-    const proj = orthographicMatrix(
-        -screen_dims[0] / 2,
-        screen_dims[0] / 2,
-        -screen_dims[1] / 2,
-        screen_dims[1] / 2,
-        -400,
-        400,
-    );
-    const tlate = Mat4.translation(.{ @sin(timer * 4) * 100, 0, 0 });
+    const aspect = screen_dims[0] / screen_dims[1];
+    const proj = perspectiveMatrix(degToRad(60), aspect, 1, 2000);
+    const tlate = Mat4.translation(.{ @sin(timer * 4) * 100, 0, -200 });
     const rot = Mat4.yRotation(timer).multiply(Mat4.xRotation(timer));
-    const s = @sin(timer) * 2.0 + 2;
+    const s = (@sin(timer) * 0.5 + 0.5);
     const scale = Mat4.scale(.{ s, s, s });
-    const model = scale.multiply(rot).multiply(tlate);
+    const model = scale.multiply(rot.multiply(tlate));
     const final_mat = model.multiply(proj);
+    const m: matrix.Matrix(f32, 1, 4) = .{ .data = @bitCast([4]f32{ 0, 0, 0, 0 }) };
+    wasm.print("{d}", .{m.multiply(final_mat).data});
     prog.setUniform(.mat, final_mat);
     webgl.drawArrays(.triangles, 0, 36);
     prog.setUniform(.color, .{ 0.0, 0.0, 0.0 });
@@ -165,6 +161,10 @@ export fn update(delta_time: f32) void {
     }
 }
 
+fn degToRad(deg: f32) f32 {
+    return deg * pi / 180;
+}
+
 fn orthographicMatrix(
     left: f32,
     right: f32,
@@ -187,6 +187,19 @@ fn orthographicMatrix(
     return .{ .data = vals };
 }
 
+const pi = 3.1415926535;
+fn perspectiveMatrix(fov: f32, aspect: f32, near: f32, far: f32) Mat4 {
+    const f = @tan(pi * 0.5 - 0.5 * fov);
+    const range_inv = 1.0 / (near - far);
+    const vals = [4][4]f32{
+        .{ f / aspect, 0, 0, 0 },
+        .{ 0, f, 0, 0 },
+        .{ 0, 0, (near + far) * range_inv, -1 },
+        .{ 0, 0, near * far * range_inv * 2, 0 },
+    };
+    return .{ .data = vals };
+}
+
 fn projectionMatrix2D(width: f32, height: f32) Mat3 {
     const mat_vals = .{
         .{ 2.0 / width, 0, 0 },