Added basic occlusion culling

src/js/assets.js

@@ -5,6 +5,7 @@ export const Colors = {
     Green: [0, 1, 0, 1],
     Blue: [0, 0, 1, 1],
     Brown: [0.341, 0.337, 0.204, 1],
+    Gray: [0.66, 0.66, 0.66, 1],
 };
 export class Assets {
     assets = new Map();

src/js/assets.ts

@@ -4,10 +4,11 @@ import {Graphics, Texture, Spritesheet} from "./graphics.js";
 export type Color = [number, number, number, number]
 
 export const Colors = {
-    Red   : [1, 0, 0, 1] as Color,
+    Red   : [1, 0, 0, 1]              as Color,
-    Green : [0, 1, 0, 1] as Color,
+    Green : [0, 1, 0, 1]              as Color,
-    Blue  : [0, 0, 1, 1] as Color,
+    Blue  : [0, 0, 1, 1]              as Color,
-    Brown : [0.341, 0.337, 0.204, 1] as Color,
+    Brown : [0.341, 0.337, 0.204, 1]  as Color,
+    Gray  : [0.66, 0.66, 0.66, 1]     as Color,
 }
 
 export type Asset = Texture | Spritesheet;

src/js/common.js

@@ -10,6 +10,12 @@ export class Vec2 {
         this.x = x;
         this.y = y;
     }
+    static ZERO() {
+        return new Vec2(0, 0);
+    }
+    static ID() {
+        return new Vec2(1, 1);
+    }
     copy() {
         return new Vec2(this.x, this.y);
     }
@@ -93,6 +99,24 @@ export class Vec3 {
         this.y = y;
         this.z = z;
     }
+    addScalar(scalar) {
+        this.x += scalar;
+        this.y += scalar;
+        this.z += scalar;
+    }
+    addScalarNew(scalar) {
+        let vec = this.copy();
+        vec.x += scalar;
+        vec.y += scalar;
+        vec.z += scalar;
+        return vec;
+    }
+    static ZERO() {
+        return new Vec3(0, 0, 0);
+    }
+    static ID() {
+        return new Vec3(1, 1, 1);
+    }
     copy() {
         return new Vec3(this.x, this.y, this.z);
     }
@@ -175,6 +199,12 @@ export class Vec4 {
         this.z = z;
         this.w = w;
     }
+    static ZERO() {
+        return new Vec4(0, 0, 0, 0);
+    }
+    static ID() {
+        return new Vec4(1, 1, 1, 1);
+    }
     copy() {
         return new Vec4(this.x, this.y, this.z, this.w);
     }
@@ -192,6 +222,20 @@ export class Vec4 {
         vec.w += other.w;
         return vec;
     }
+    addScalar(scalar) {
+        this.x += scalar;
+        this.y += scalar;
+        this.z += scalar;
+        this.w += scalar;
+    }
+    addScalarNew(scalar) {
+        let vec = this.copy();
+        vec.x += scalar;
+        vec.y += scalar;
+        vec.z += scalar;
+        vec.w += scalar;
+        return vec;
+    }
     sub(other) {
         this.x -= other.x;
         this.y -= other.y;
@@ -297,8 +341,8 @@ export class Mat4 {
     }
     static isometric_inverse() {
         return new Mat4(new Float32Array([
+            0.5, -0.5, 0, 0,
             0.5, 0.5, 0, 0,
-            -0.5, 0.5, 0, 0,
             0, 0, 1, 0,
             0, 0, 0, 1,
         ]));
@@ -370,10 +414,10 @@ export class Mat4 {
             this.data[i * 4 + col] = data[i];
     }
     transform(v) {
-        let x = v.x * this.x(0) + v.y * this.x(1) + v.z * this.x(2) + v.w * this.x(3);
+        let x = v.x * this.x(0) + v.y * this.y(0) + v.z * this.z(0) + v.w * this.w(0);
-        let y = v.x * this.y(0) + v.y * this.y(1) + v.z * this.y(2) + v.w * this.y(3);
+        let y = v.x * this.x(1) + v.y * this.y(1) + v.z * this.z(1) + v.w * this.w(1);
-        let z = v.x * this.z(0) + v.y * this.z(1) + v.z * this.z(2) + v.w * this.z(3);
+        let z = v.x * this.x(2) + v.y * this.y(2) + v.z * this.z(2) + v.w * this.w(2);
-        let w = v.x * this.w(0) + v.y * this.w(1) + v.z * this.w(2) + v.w * this.w(3);
+        let w = v.x * this.x(3) + v.y * this.y(3) + v.z * this.z(3) + v.w * this.w(3);
         v.x = x;
         v.y = y;
         v.z = z;
@@ -381,10 +425,10 @@ export class Mat4 {
     }
     transformNew(v) {
         let vec = v.copy();
-        let x = v.x * this.x(0) + v.y * this.x(1) + v.z * this.x(2) + v.w * this.x(3);
+        let x = v.x * this.x(0) + v.y * this.y(0) + v.z * this.z(0) + v.w * this.w(0);
-        let y = v.x * this.y(0) + v.y * this.y(1) + v.z * this.y(2) + v.w * this.y(3);
+        let y = v.x * this.x(1) + v.y * this.y(1) + v.z * this.z(1) + v.w * this.w(1);
-        let z = v.x * this.z(0) + v.y * this.z(1) + v.z * this.z(2) + v.w * this.z(3);
+        let z = v.x * this.x(2) + v.y * this.y(2) + v.z * this.z(2) + v.w * this.w(2);
-        let w = v.x * this.w(0) + v.y * this.w(1) + v.z * this.w(2) + v.w * this.w(3);
+        let w = v.x * this.x(3) + v.y * this.y(3) + v.z * this.z(3) + v.w * this.w(3);
         vec.x = x;
         vec.y = y;
         vec.z = z;

src/js/common.ts

@@ -12,6 +12,9 @@ interface Vector<P, T, N> {
     add(other: T): void;
     addNew(other: T): T;
 
+    addScalar(scalar: number): void;
+    addScalarNew(scalar: number): T;
+
     sub(other: T): void;
     subNew(other: T): T;
 
@@ -34,6 +37,14 @@ export class Vec2 implements Vector<void, Vec2, Vec3> {
         this.y = y;
     }
 
+    static ZERO(): Vec2 {
+        return new Vec2(0, 0);
+    }
+
+    static ID(): Vec2 {
+        return new Vec2(1, 1);
+    }
+
     copy(): Vec2 {
         return new Vec2(this.x, this.y);
     }
@@ -145,6 +156,30 @@ export class Vec3 implements Vector<Vec2, Vec3, Vec4> {
         this.z = z;
     }
 
+    addScalar(scalar: number): void {
+        this.x += scalar;
+        this.y += scalar;
+        this.z += scalar;
+    }
+
+    addScalarNew(scalar: number): Vec3 {
+        let vec = this.copy();
+
+        vec.x += scalar;
+        vec.y += scalar;
+        vec.z += scalar;
+
+        return vec;
+    }
+
+    static ZERO(): Vec3 {
+        return new Vec3(0, 0, 0);
+    }
+
+    static ID(): Vec3 {
+        return new Vec3(1, 1, 1);
+    }
+
     copy(): Vec3 {
         return new Vec3(this.x, this.y, this.z);
     }
@@ -253,6 +288,14 @@ export class Vec4 implements Vector<Vec3, Vec4, void> {
         this.w = w;
     }
 
+    static ZERO(): Vec4 {
+        return new Vec4(0, 0, 0, 0);
+    }
+
+    static ID(): Vec4 {
+        return new Vec4(1, 1, 1, 1);
+    }
+
     copy(): Vec4 {
         return new Vec4(this.x, this.y, this.z, this.w);
     }
@@ -275,6 +318,24 @@ export class Vec4 implements Vector<Vec3, Vec4, void> {
         return vec;
     }
 
+    addScalar(scalar: number): void {
+        this.x += scalar;
+        this.y += scalar;
+        this.z += scalar;
+        this.w += scalar;
+    }
+
+    addScalarNew(scalar: number): Vec4 {
+        let vec = this.copy();
+
+        vec.x += scalar;
+        vec.y += scalar;
+        vec.z += scalar;
+        vec.w += scalar;
+
+        return vec;
+    }
+
     sub(other: Vec4) {
         this.x -= other.x;
         this.y -= other.y;
@@ -414,8 +475,8 @@ export class Mat4 {
 
     static isometric_inverse(): Mat4 {
         return new Mat4(new Float32Array([
-            0.5, 0.5, 0, 0,
+            0.5, -0.5, 0, 0,
-            -0.5, 0.5, 0, 0,
+            0.5,  0.5, 0, 0,
             0,  0, 1, 0,
             0,  0, 0, 1,
         ]));
@@ -503,10 +564,10 @@ export class Mat4 {
     }
 
     transform(v: Vec4) {
-        let x = v.x * this.x(0) + v.y * this.x(1) + v.z * this.x(2) + v.w * this.x(3);
+        let x = v.x * this.x(0) + v.y * this.y(0) + v.z * this.z(0) + v.w * this.w(0);
-        let y = v.x * this.y(0) + v.y * this.y(1) + v.z * this.y(2) + v.w * this.y(3);
+        let y = v.x * this.x(1) + v.y * this.y(1) + v.z * this.z(1) + v.w * this.w(1);
-        let z = v.x * this.z(0) + v.y * this.z(1) + v.z * this.z(2) + v.w * this.z(3);
+        let z = v.x * this.x(2) + v.y * this.y(2) + v.z * this.z(2) + v.w * this.w(2);
-        let w = v.x * this.w(0) + v.y * this.w(1) + v.z * this.w(2) + v.w * this.w(3);
+        let w = v.x * this.x(3) + v.y * this.y(3) + v.z * this.z(3) + v.w * this.w(3);
 
         v.x = x;
         v.y = y;
@@ -517,10 +578,10 @@ export class Mat4 {
     transformNew(v: Vec4): Vec4 {
         let vec = v.copy();
 
-        let x = v.x * this.x(0) + v.y * this.x(1) + v.z * this.x(2) + v.w * this.x(3);
+        let x = v.x * this.x(0) + v.y * this.y(0) + v.z * this.z(0) + v.w * this.w(0);
-        let y = v.x * this.y(0) + v.y * this.y(1) + v.z * this.y(2) + v.w * this.y(3);
+        let y = v.x * this.x(1) + v.y * this.y(1) + v.z * this.z(1) + v.w * this.w(1);
-        let z = v.x * this.z(0) + v.y * this.z(1) + v.z * this.z(2) + v.w * this.z(3);
+        let z = v.x * this.x(2) + v.y * this.y(2) + v.z * this.z(2) + v.w * this.w(2);
-        let w = v.x * this.w(0) + v.y * this.w(1) + v.z * this.w(2) + v.w * this.w(3);
+        let w = v.x * this.x(3) + v.y * this.y(3) + v.z * this.z(3) + v.w * this.w(3);
 
         vec.x = x;
         vec.y = y;

src/js/draw.js

@@ -1,4 +1,4 @@
-import { Vec3 } from "./common.js";
+import { Vec3, Mat4, Vec4 } from "./common.js";
 import { DrawTag, Sprite } from "./graphics.js";
 import { TileEdge } from "./world.js";
 import * as Assets from "./assets.js";
@@ -127,29 +127,43 @@ export function drawIsometricCube(position, exts, r, fill, edge) {
         ], fill.left);
     }
 }
-export function drawIsometricGrid(gfx, grid) {
+// TODO: Optimize the shit out of this function
-    let position = { ...grid.position };
+export function drawIsometricGrid(gfx, camera, grid) {
+    let position = grid.position.copy();
     let exts = new Vec3(grid.tileSize, grid.tileSize, 0);
     let tileCoord = new Vec3(0, 0, 0);
     let rect = new Rectangle([
         DrawTag.ISO,
     ]);
-    // TODO: Optimize this
+    let mt = Mat4.translate(camera.position.multScalarNew(-1.0));
-    // 1. Grid based occlusion culling
+    let mi = Mat4.isometric();
-    // 2. frustum culling
+    let bias = 4 * grid.tileSize;
+    let bb = [
+        new Vec3(-bias, -bias, 0),
+        new Vec3(gfx.width() + bias, -bias, 0),
+        new Vec3(gfx.width() + bias, gfx.height() + bias, 0),
+        new Vec3(-bias, gfx.height() + bias, 0),
+    ];
+    for (let i = 0; i < bb.length; ++i) {
+        bb[i] = mt.transformNew(bb[i].extend(1.0)).reduce();
+    }
     for (let k = 0; k < grid.topHeight; ++k) {
         for (let j = 0; j < grid.breadth; ++j) {
             for (let i = 0; i < grid.width; ++i) {
                 tileCoord.x = i;
                 tileCoord.y = j;
                 tileCoord.z = k;
-                // getTile is sus (it uses a lot of time in the profiler) (i don't know why, it is a pretty simple function)
-                // (Prolly cuz i call it a lot) (Maybe change grid to use spatial hashmap?)
                 let tile = grid.getTile(tileCoord);
                 if (tile === null) {
                     position.x += grid.tileSize;
                     continue;
                 }
+                const ipos = mi.transformNew(new Vec4(position.x - grid.tileSize / 2 * k, position.y + grid.tileSize / 2 * k, 1.0, 1.0)).reduce();
+                if (ipos.x >= bb[2].x || ipos.x <= bb[0].x ||
+                    ipos.y >= bb[2].y || ipos.y <= bb[0].y) {
+                    position.x += grid.tileSize;
+                    continue;
+                }
                 drawIsometricCube(new Vec3(position.x - grid.tileSize / 2 * k, position.y + grid.tileSize / 2 * k, position.z), exts, rect, tile.fill, tile.edge);
                 position.x += grid.tileSize;
             }

src/js/draw.ts

@@ -1,7 +1,8 @@
-import { Vec3, Vec2 } from "./common.js"
+import { Vec3, Vec2, Mat4, Vec4 } from "./common.js"
-import { Graphics, Drawable, DrawTag, Sprite, Spritesheet } from "./graphics.js";
+import { Graphics, Drawable, DrawTag, Sprite, Spritesheet, Camera } from "./graphics.js";
 import { TileEdge, TileFill, TileFillament, Grid } from "./world.js";
 import * as Assets from "./assets.js";
+import {Input} from "./input.js";
 
 // Attrib format
 // position color   uv   
@@ -161,17 +162,31 @@ export function drawIsometricCube(position: Vec3, exts: Vec3, r: Rectangle, fill
     }
 }
 
-export function drawIsometricGrid(gfx: Graphics, grid: Grid) {
+// TODO: Optimize the shit out of this function
-    let position = {...grid.position} as Vec3;
+export function drawIsometricGrid(gfx: Graphics, camera: Camera, grid: Grid) {
+    let position = grid.position.copy();
     let exts = new Vec3(grid.tileSize, grid.tileSize, 0);
     let tileCoord = new Vec3(0, 0, 0);
     let rect = new Rectangle([
         DrawTag.ISO,
     ]);
 
-    // TODO: Optimize this
+    let mt = Mat4.translate(camera.position.multScalarNew(-1.0));
-    // 1. Grid based occlusion culling
+    let mi = Mat4.isometric();
-    // 2. frustum culling
+
+    let bias = 4*grid.tileSize;
+
+    let bb: [Vec3, Vec3, Vec3, Vec3] = [
+        new Vec3(-bias, -bias, 0),
+        new Vec3(gfx.width() + bias, -bias, 0),
+        new Vec3(gfx.width() + bias, gfx.height() + bias, 0),
+        new Vec3(-bias, gfx.height() + bias, 0),
+    ];
+
+    for (let i = 0; i < bb.length; ++i) {
+        bb[i] = mt.transformNew(bb[i].extend(1.0)).reduce();
+    }
+
     for (let k = 0; k < grid.topHeight; ++k) {
         for (let j = 0; j < grid.breadth; ++j) {
             for (let i = 0; i < grid.width; ++i) {
@@ -179,8 +194,6 @@ export function drawIsometricGrid(gfx: Graphics, grid: Grid) {
                 tileCoord.y = j;
                 tileCoord.z = k;
 
-                // getTile is sus (it uses a lot of time in the profiler) (i don't know why, it is a pretty simple function)
-                // (Prolly cuz i call it a lot) (Maybe change grid to use spatial hashmap?)
                 let tile = grid.getTile(tileCoord);
 
                 if (tile === null) {
@@ -188,6 +201,15 @@ export function drawIsometricGrid(gfx: Graphics, grid: Grid) {
                     continue;
                 }
 
+                const ipos = mi.transformNew(new Vec4(position.x - grid.tileSize / 2 * k, position.y + grid.tileSize / 2 * k, 1.0, 1.0)).reduce();
+
+                if (ipos.x >= bb[2].x || ipos.x <= bb[0].x ||
+                    ipos.y >= bb[2].y || ipos.y <= bb[0].y) {
+                    position.x += grid.tileSize;
+                
+                    continue;
+                }
+
                 drawIsometricCube(
                     new Vec3(position.x - grid.tileSize / 2 * k, position.y + grid.tileSize / 2 * k, position.z),
                     exts,
@@ -203,6 +225,5 @@ export function drawIsometricGrid(gfx: Graphics, grid: Grid) {
         }
         position.y = grid.position.y;
     }
-
     rect.commit(gfx);
 }

src/js/graphics.js

@@ -52,6 +52,12 @@ export class Graphics {
     vbo;
     toRender = [];
     texCount = 0;
+    width() {
+        return this.ctx.canvas.width;
+    }
+    height() {
+        return this.ctx.canvas.height;
+    }
     constructor(ctx, vs, fs) {
         this.ctx = ctx;
         this.program = createProgram(ctx, vs, fs);

src/js/graphics.ts

@@ -77,6 +77,14 @@ export class Graphics {
     toRender: Array<Drawable> = [];
     texCount: number = 0;
 
+    width(): number {
+        return this.ctx.canvas.width;
+    }
+
+    height(): number {
+        return this.ctx.canvas.height;
+    }
+
     constructor(ctx: WebGL2RenderingContext, vs: string, fs: string) {
         this.ctx = ctx;
         this.program = createProgram(ctx, vs, fs);

src/js/input.js

@@ -1,3 +1,4 @@
+import { Vec2 } from "./common.js";
 class KeyAction {
     key;
     keyup;
@@ -12,6 +13,7 @@ class KeyAction {
 }
 export class Input {
     handlers = new Map();
+    mousePosition = Vec2.ZERO();
     constructor() {
         window.addEventListener("keyup", e => {
             this.handlers.forEach(ka => {
@@ -27,6 +29,10 @@ export class Input {
                 }
             });
         });
+        window.addEventListener("mousemove", (e) => {
+            this.mousePosition.x = e.x;
+            this.mousePosition.y = e.y;
+        });
     }
     //TODO: add modifier key support
     addKeyAction(key, modifiers, data, keydown, keyup) {

src/js/input.ts

@@ -1,3 +1,5 @@
+import { Vec2 } from "./common.js";
+
 type Action = ((data: any) => void);
 
 class KeyAction {
@@ -15,6 +17,7 @@ class KeyAction {
 
 export class Input {
     handlers: Map<string, KeyAction> = new Map();
+    mousePosition: Vec2 = Vec2.ZERO();
     constructor() {
         window.addEventListener("keyup", e => {
             this.handlers.forEach(ka => {
@@ -30,6 +33,11 @@ export class Input {
                 }
             });
         });
+
+        window.addEventListener("mousemove", (e) => {
+            this.mousePosition.x = e.x;
+            this.mousePosition.y = e.y;
+        })
     }
 
     //TODO: add modifier key support

src/js/script.js

@@ -1,4 +1,4 @@
-import { initializeContext, Vec3, Mat4, Vec4, Vec2 } from "./common.js";
+import { initializeContext, Vec3, Mat4, Vec4 } from "./common.js";
 import { Graphics, fullscreenCanvas, Camera, Sprite } from "./graphics.js";
 import * as drawing from "./draw.js";
 import * as wasm from "./wasm.js";
@@ -80,7 +80,7 @@ function draw(gfx, camera, dt, grid) {
     m = m.multNew(mt);
     m = m.multNew(mo);
     gfx.ctx.uniformMatrix4fv(gfx.getUniform("u_matrix"), false, m.splat());
-    drawing.drawIsometricGrid(gfx, grid);
+    drawing.drawIsometricGrid(gfx, camera, grid);
     gfx.draw();
 }
 function addDefaultKeybinds(input, camera) {
@@ -134,16 +134,27 @@ function addDefaultKeybinds(input, camera) {
     await Assets.assets.load(gfx);
     let m = Mat4.isometric();
     let size = 100;
-    let grid = new Grid(m.transformNew(new Vec4(ctx.canvas.width / 4, ctx.canvas.height / 2, 0, 1)).reduce(), 24, size, size, 10);
+    let grid = new Grid(m.transformNew(new Vec4(ctx.canvas.width / 4, ctx.canvas.height / 2, 0, 1)).reduce(), 32, size, size, 10);
+    grid.fillLayer(new Tile({
+        top: Assets.Colors.Gray,
+        right: Assets.Colors.Gray,
+        left: Assets.Colors.Gray,
+    }), 0);
+    grid.fillLayer(new Tile({
+        top: Assets.Colors.Gray,
+        right: Assets.Colors.Gray,
+        left: Assets.Colors.Gray,
+    }), 1);
     grid.fillLayer(new Tile({
         top: Sprite.id(0),
         right: Assets.Colors.Brown,
         left: Assets.Colors.Brown,
-    }), 0);
+    }), 2);
-    //grid.setTile(new Tile(Sprite.tile(0), TileEdge.Both), new Vec3(1, 1, 1));
     for (let i = 0; i <= size / 2; i++) {
-        tree(grid, new Vec2(Math.floor(Math.random() * size - 1), Math.floor(Math.random() * size - 1)));
+        tree(grid, new Vec3(Math.floor(Math.random() * size - 1), Math.floor(Math.random() * size - 1), 2));
     }
+    const input = new Input();
+    addDefaultKeybinds(input, camera);
     let prevTimestamp = 0;
     const frame = (timestamp) => {
         const deltaTime = (timestamp - prevTimestamp) / 1000;
@@ -156,7 +167,5 @@ function addDefaultKeybinds(input, camera) {
         prevTimestamp = timestamp;
         window.requestAnimationFrame(frame);
     });
-    const input = new Input();
-    addDefaultKeybinds(input, camera);
     const wasmgl = new wasm.WASMGL(await wasm.loadWasmModule("./src/wasm/module.wasm"));
 })();

src/js/script.ts

@@ -1,5 +1,5 @@
 import { initializeContext, Vec3, Mat4, Vec4, Vec2 } from "./common.js";
-import { Graphics, fullscreenCanvas, Camera, Sprite } from "./graphics.js";
+import { Graphics, fullscreenCanvas, Camera, Sprite, DrawTag } from "./graphics.js";
 import * as drawing from "./draw.js";
 import * as wasm from "./wasm.js";
 import { Input } from "./input.js";
@@ -107,7 +107,8 @@ function draw(gfx: Graphics, camera: Camera, dt: number, grid: Grid) {
         m.splat()
         );
           
-    drawing.drawIsometricGrid(gfx, grid);
+    drawing.drawIsometricGrid(gfx, camera, grid);
+
     gfx.draw();
 }
 
@@ -186,19 +187,33 @@ function addDefaultKeybinds(input: Input, camera: Camera) {
     let m = Mat4.isometric();
 
     let size = 100;
-    let grid = new Grid(m.transformNew(new Vec4(ctx.canvas.width / 4, ctx.canvas.height / 2, 0, 1)).reduce(), 24, size, size, 10);
+    let grid = new Grid(m.transformNew(new Vec4(ctx.canvas.width / 4, ctx.canvas.height / 2, 0, 1)).reduce(), 32, size, size, 10);
+
+    grid.fillLayer(new Tile({
+        top:   Assets.Colors.Gray,
+        right: Assets.Colors.Gray,
+        left:  Assets.Colors.Gray,
+    }), 0);
+
+    grid.fillLayer(new Tile({
+        top:   Assets.Colors.Gray,
+        right: Assets.Colors.Gray,
+        left:  Assets.Colors.Gray,
+    }), 1);
+
     grid.fillLayer(new Tile({
         top: Sprite.id(0),
         right: Assets.Colors.Brown,
         left: Assets.Colors.Brown,
-    }), 0);
+    }), 2);
-
-    //grid.setTile(new Tile(Sprite.tile(0), TileEdge.Both), new Vec3(1, 1, 1));
 
     for (let i = 0; i <= size / 2; i++) {
-        tree(grid, new Vec2(Math.floor(Math.random() * size - 1), Math.floor(Math.random() * size - 1)));
+        tree(grid, new Vec3(Math.floor(Math.random() * size - 1), Math.floor(Math.random() * size - 1), 2));
     }
 
+    const input = new Input();
+    addDefaultKeybinds(input, camera);
+
     let prevTimestamp = 0;
     const frame = (timestamp: number) => {
         const deltaTime = (timestamp - prevTimestamp)/1000;
@@ -215,8 +230,5 @@ function addDefaultKeybinds(input: Input, camera: Camera) {
         window.requestAnimationFrame(frame);
     });
 
-    const input = new Input();
-    addDefaultKeybinds(input, camera);
-
     const wasmgl: wasm.WASMGL = new wasm.WASMGL(await wasm.loadWasmModule("./src/wasm/module.wasm"));
 })();

src/js/world.js

@@ -81,18 +81,18 @@ export class Grid {
 export function tree(grid, position) {
     let log = Sprite.tile(2);
     let leaves = Sprite.tile(1);
-    grid.setTile(new Tile(log, TileEdge.Both), new Vec3(position.x, position.y, 1));
+    grid.setTile(new Tile(log, TileEdge.Both), new Vec3(position.x, position.y, position.z + 1));
-    grid.setTile(new Tile(log, TileEdge.Both), new Vec3(position.x, position.y, 2));
+    grid.setTile(new Tile(log, TileEdge.Both), new Vec3(position.x, position.y, position.z + 2));
-    grid.setTile(new Tile(log, TileEdge.Both), new Vec3(position.x, position.y, 3));
+    grid.setTile(new Tile(log, TileEdge.Both), new Vec3(position.x, position.y, position.z + 3));
-    grid.setTile(new Tile(log, TileEdge.Both), new Vec3(position.x, position.y, 4));
+    grid.setTile(new Tile(log, TileEdge.Both), new Vec3(position.x, position.y, position.z + 4));
-    grid.setTile(new Tile(log, TileEdge.None), new Vec3(position.x, position.y, 4));
+    grid.setTile(new Tile(log, TileEdge.None), new Vec3(position.x, position.y, position.z + 4));
-    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x, position.y + 1, 4));
+    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x, position.y + 1, position.z + 4));
-    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x, position.y + 1, 5));
+    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x, position.y + 1, position.z + 5));
-    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x, position.y, 5));
+    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x, position.y, position.z + 5));
-    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x + 1, position.y, 4));
+    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x + 1, position.y, position.z + 4));
-    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x + 1, position.y, 5));
+    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x + 1, position.y, position.z + 5));
-    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x + 1, position.y + 1, 4));
+    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x + 1, position.y + 1, position.z + 4));
-    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x + 1, position.y + 1, 5));
+    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x + 1, position.y + 1, position.z + 5));
 }
 export function bush(grid, position) {
     let leaves = Sprite.tile(1);

src/js/world.ts

@@ -109,22 +109,22 @@ export class Grid {
     }
 }
 
-export function tree(grid: Grid, position: Vec2) {
+export function tree(grid: Grid, position: Vec3) {
     let log = Sprite.tile(2);
     let leaves = Sprite.tile(1);
 
-    grid.setTile(new Tile(log, TileEdge.Both), new Vec3(position.x, position.y, 1));
+    grid.setTile(new Tile(log, TileEdge.Both), new Vec3(position.x, position.y, position.z + 1));
-    grid.setTile(new Tile(log, TileEdge.Both), new Vec3(position.x, position.y, 2));
+    grid.setTile(new Tile(log, TileEdge.Both), new Vec3(position.x, position.y, position.z + 2));
-    grid.setTile(new Tile(log, TileEdge.Both), new Vec3(position.x, position.y, 3));
+    grid.setTile(new Tile(log, TileEdge.Both), new Vec3(position.x, position.y, position.z + 3));
-    grid.setTile(new Tile(log, TileEdge.Both), new Vec3(position.x, position.y, 4));
+    grid.setTile(new Tile(log, TileEdge.Both), new Vec3(position.x, position.y, position.z + 4));
-    grid.setTile(new Tile(log, TileEdge.None), new Vec3(position.x, position.y, 4));
+    grid.setTile(new Tile(log, TileEdge.None), new Vec3(position.x, position.y, position.z + 4));
-    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x, position.y + 1, 4));
+    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x, position.y + 1, position.z + 4));
-    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x, position.y + 1, 5));
+    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x, position.y + 1, position.z + 5));
-    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x, position.y, 5));
+    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x, position.y,     position.z + 5));
-    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x + 1, position.y, 4));
+    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x + 1, position.y, position.z + 4));
-    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x + 1, position.y, 5));
+    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x + 1, position.y, position.z + 5));
-    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x + 1, position.y + 1, 4));
+    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x + 1, position.y + 1, position.z + 4));
-    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x + 1, position.y + 1, 5));
+    grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x + 1, position.y + 1, position.z + 5));
 }
 
 export function bush(grid: Grid, position: Vec2) {