Added ability to change between isometric and normal drawing

src/js/common.ts

@@ -244,9 +244,9 @@ class Mat4 {
     static isometric(): Mat4 {
         let m = new Mat4(new Float32Array([
             1, -1, 0, 0,
-            1, 1, 0, 0,
+            1,  1, 0, 0,
-            0, 0, 1, 0,
+            0,  0, 1, 0,
-            0, 0, 0, 1,
+            0,  0, 0, 1,
         ]));
 
         return m;

src/js/draw.js

@@ -79,6 +79,7 @@ export function drawIsometricCube(gfx, position, exts, color) {
         new Vec3(position.x + 1.5 * exts.x, position.y + 0.5 * exts.y, position.z + 0.25 * exts.z),
         new Vec3(position.x + 0.5 * exts.x, position.y - 0.5 * exts.y, position.z + 0.25 * exts.z),
     ];
+    gfx.ctx.uniform1i(gfx.getUniform("u_isIso"), 1);
     drawRectangle(gfx, [
         points[0],
         points[1],
@@ -97,6 +98,7 @@ export function drawIsometricCube(gfx, position, exts, color) {
         points[4],
         points[6],
     ], color);
+    gfx.ctx.uniform1i(gfx.getUniform("u_isIso"), 0);
 }
 export function drawRectangleExts(gfx, position, exts, color) {
     const a_position = gfx.getAttribute("a_position");

src/js/draw.ts

@@ -98,6 +98,8 @@ export function drawIsometricCube(gfx: Graphics, position: Vec3, exts: Vec3, col
         new Vec3(position.x + 0.5 * exts.x, position.y - 0.5 * exts.y, position.z + 0.25 * exts.z),
     ];
 
+    gfx.ctx.uniform1i(gfx.getUniform("u_isIso"), 1);
+
     drawRectangle(
         gfx, 
         [
@@ -127,6 +129,8 @@ export function drawIsometricCube(gfx: Graphics, position: Vec3, exts: Vec3, col
             points[6],
         ],
         color);
+
+    gfx.ctx.uniform1i(gfx.getUniform("u_isIso"), 0);
 }
 
 export function drawRectangleExts(gfx: Graphics, position: Vec3, exts: Vec2, color: Color | Texture) {

src/js/graphics.js

@@ -143,9 +143,9 @@ async function loadTexture(path) {
     });
 }
 export class Camera {
+    dt = 0;
     position;
     movement;
-    dt = 0;
     constructor(position) {
         this.position = position;
         this.movement = new Vec4(0, 0, 0, 0);
@@ -153,7 +153,7 @@ export class Camera {
     update(dt) {
         this.dt = dt;
         let newPosition = this.movement.multScalarNew(this.dt);
-        this.position.x += (newPosition.x + newPosition.y) / 1.5;
+        this.position.x += (newPosition.x + newPosition.y) / 2;
         this.position.y += newPosition.z + newPosition.w;
     }
 }

src/js/graphics.ts

@@ -1,4 +1,4 @@
-import {Vec3, Vec4} from "./common.js";
+import {Vec2, Vec3, Vec4} from "./common.js";
 
 export function fullscreenCanvas(gfx: Graphics, id: string) {
     const canvas  = document.getElementById(id) as HTMLCanvasElement;
@@ -187,9 +187,9 @@ async function loadTexture(path: string): Promise<HTMLImageElement> {
 }
 
 export class Camera {
+    dt: number = 0;
     position: Vec3;
     movement: Vec4;
-    dt: number = 0;
 
     constructor(position: Vec3) {
         this.position = position;
@@ -200,7 +200,7 @@ export class Camera {
         this.dt = dt;
 
         let newPosition = this.movement.multScalarNew(this.dt);
-        this.position.x += (newPosition.x + newPosition.y) / 1.5;
+        this.position.x += (newPosition.x + newPosition.y) / 2;
         this.position.y += newPosition.z + newPosition.w;
     }
 }

src/js/script.js

@@ -12,6 +12,7 @@ const vertexShader = `#version 300 es
     out vec4 v_color;
     uniform mat4 u_matrix;
     uniform bool u_isTex;
+    uniform bool u_isIso;
 
     mat4 Iso = mat4(
         1, -1, 0, 0,
@@ -21,9 +22,16 @@ const vertexShader = `#version 300 es
     );
      
     void main() {
-        vec4 transformed = u_matrix * Iso * vec4(a_position.xyz, 1.0);
+        vec4 orthographic;
 
-        gl_Position = transformed;
+        if (u_isIso) {
+            vec4 isometric = Iso * vec4(a_position.xyz, 1.0);
+            orthographic = u_matrix * isometric;
+        } else {
+            orthographic = u_matrix * vec4(a_position.xyz, 1.0);
+        }
+
+        gl_Position = orthographic;
 
         if (u_isTex) {
             v_tex_position = a_tex_position;
@@ -62,10 +70,8 @@ function draw(gfx, camera, dt, tex) {
     let far = 100;
     let mo = Mat4.orthographic(left, right, bottom, top, near, far);
     let mt = Mat4.translate(camera.position);
+    let mi = Mat4.isometric();
     let m = mo.multNew(mt);
-    //m = m.multNew(Mat4.rotation_x(angle));
-    //m = m.multNew(Mat4.rotation_y(angle));
-    //m = m.multNew(Mat4.rotation_z(angle));
     gfx.ctx.uniformMatrix4fv(gfx.getUniform("u_matrix"), false, m.splat());
     let exts = new Vec3(50, 50, 20);
     for (let i = 0; i < 10; ++i) {
@@ -84,17 +90,17 @@ function addDefaultKeybinds(input, camera) {
     }, (c) => {
         c.movement.x = 1;
     });
-    input.addKeyAction("KeyD", [], camera, c => {
+    input.addKeyAction("KeyD", [], camera, (c) => {
         c.movement.y = 0;
     }, (c) => {
         c.movement.y = -1;
     });
-    input.addKeyAction("KeyW", [], camera, c => {
+    input.addKeyAction("KeyW", [], camera, (c) => {
         c.movement.z = 0;
     }, (c) => {
         c.movement.z = -1;
     });
-    input.addKeyAction("KeyS", [], camera, c => {
+    input.addKeyAction("KeyS", [], camera, (c) => {
         c.movement.w = 0;
     }, (c) => {
         c.movement.w = 1;
@@ -115,6 +121,7 @@ function addDefaultKeybinds(input, camera) {
     a_tex_position.format(2, gfx.ctx.FLOAT, false, 0, 0);
     gfx.createUniform("u_matrix");
     gfx.createUniform("u_isTex");
+    gfx.createUniform("u_isIso");
     let city = await Texture.load(ctx, "../../assets/genetica/rt/City Night.jpg");
     let wall = await Texture.load(ctx, "../../assets/wall.png");
     let camera = new Camera(new Vec3(0, 0, 0));

src/js/script.ts

@@ -1,4 +1,4 @@
-import { initializeContext, Vec3, Mat4 } from "./common.js";
+import { initializeContext, Vec3, Mat4, Vec2 } from "./common.js";
 import { Graphics, fullscreenCanvas, Texture, Camera } from "./graphics.js";
 import * as drawing from "./draw.js";
 import * as wasm from "./wasm.js";
@@ -14,6 +14,7 @@ const vertexShader =
     out vec4 v_color;
     uniform mat4 u_matrix;
     uniform bool u_isTex;
+    uniform bool u_isIso;
 
     mat4 Iso = mat4(
         1, -1, 0, 0,
@@ -23,9 +24,16 @@ const vertexShader =
     );
      
     void main() {
-        vec4 transformed = u_matrix * Iso * vec4(a_position.xyz, 1.0);
+        vec4 orthographic;
 
-        gl_Position = transformed;
+        if (u_isIso) {
+            vec4 isometric = Iso * vec4(a_position.xyz, 1.0);
+            orthographic = u_matrix * isometric;
+        } else {
+            orthographic = u_matrix * vec4(a_position.xyz, 1.0);
+        }
+
+        gl_Position = orthographic;
 
         if (u_isTex) {
             v_tex_position = a_tex_position;
@@ -72,11 +80,9 @@ function draw(gfx: Graphics, camera: Camera, dt: number, tex: Texture) {
 
     let mo = Mat4.orthographic(left, right, bottom, top, near, far);
     let mt = Mat4.translate(camera.position);
+    let mi = Mat4.isometric();
     
     let m = mo.multNew(mt);
-    //m = m.multNew(Mat4.rotation_x(angle));
-    //m = m.multNew(Mat4.rotation_y(angle));
-    //m = m.multNew(Mat4.rotation_z(angle));
 
     gfx.ctx.uniformMatrix4fv(
         gfx.getUniform("u_matrix"),
@@ -106,21 +112,24 @@ function addDefaultKeybinds(input: Input, camera: Camera) {
         c.movement.x = 1;
     });
 
-    input.addKeyAction("KeyD", [], camera, c => {
+    input.addKeyAction("KeyD", [], camera,
+    (c) => {
         c.movement.y = 0;
     },
     (c) => {
         c.movement.y = -1;
     });
 
-    input.addKeyAction("KeyW", [], camera, c => {
+    input.addKeyAction("KeyW", [], camera,
+    (c) => {
         c.movement.z = 0;
     },
     (c) => {
         c.movement.z = -1;
     });
 
-    input.addKeyAction("KeyS", [], camera, c => {
+    input.addKeyAction("KeyS", [], camera, 
+    (c) => {
         c.movement.w = 0;
     },
     (c) => {
@@ -147,6 +156,7 @@ function addDefaultKeybinds(input: Input, camera: Camera) {
 
     gfx.createUniform("u_matrix");
     gfx.createUniform("u_isTex");
+    gfx.createUniform("u_isIso");
 
     let city = await Texture.load(ctx, "../../assets/genetica/rt/City Night.jpg");
     let wall = await Texture.load(ctx, "../../assets/wall.png");