Added support for scaling into frustum 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

@@ -1,15 +1,24 @@
-function initializeContext(canvasId) {
+export function initializeContext(canvasId) {
     const canvas = document.getElementById(canvasId);
     const ctx = canvas.getContext("webgl2", { antialias: false });
     return ctx;
 }
-class Vec2 {
+export class Vec2 {
     x;
     y;
     constructor(x, y) {
         this.x = x;
         this.y = y;
     }
+    from(scalar) {
+        return new Vec2(scalar, scalar);
+    }
+    static ZERO() {
+        return new Vec2(0, 0);
+    }
+    static ID() {
+        return new Vec2(1, 1);
+    }
     copy() {
         return new Vec2(this.x, this.y);
     }
@@ -84,7 +93,7 @@ class Vec2 {
         return new Vec2(x, y);
     }
 }
-class Vec3 {
+export class Vec3 {
     x;
     y;
     z;
@@ -93,6 +102,27 @@ class Vec3 {
         this.y = y;
         this.z = z;
     }
+    from(scalar) {
+        return new Vec3(scalar, scalar, scalar);
+    }
+    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);
     }
@@ -164,7 +194,7 @@ class Vec3 {
         return [this.x, this.y, this.z];
     }
 }
-class Vec4 {
+export class Vec4 {
     x;
     y;
     z;
@@ -175,6 +205,15 @@ class Vec4 {
         this.z = z;
         this.w = w;
     }
+    from(scalar) {
+        return new Vec4(scalar, scalar, scalar, scalar);
+    }
+    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 +231,20 @@ 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;
@@ -253,7 +306,7 @@ class Vec4 {
         throw new Error("Can't extend Vec4");
     }
 }
-class Mat4 {
+export class Mat4 {
     data;
     constructor(i) {
         if (i instanceof Float32Array) {
@@ -297,8 +350,8 @@ 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 +423,10 @@ 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 +434,10 @@ 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;
@@ -409,4 +462,3 @@ class Mat4 {
         }
     }
 }
-export { initializeContext, Mat4, Vec2, Vec3, Vec4 };

src/js/common.ts

@@ -1,4 +1,4 @@
-function initializeContext(canvasId: string): WebGL2RenderingContext | null {
+export function initializeContext(canvasId: string): WebGL2RenderingContext | null {
     const canvas  = document.getElementById(canvasId) as HTMLCanvasElement;
     const ctx = canvas.getContext("webgl2", {antialias: false});
 
@@ -9,9 +9,14 @@ function initializeContext(canvasId: string): WebGL2RenderingContext | null {
 interface Vector<P, T, N> {
     copy(): T;
 
+    from(scalar: number): T;
+
     add(other: T): void;
     addNew(other: T): T;
 
+    addScalar(scalar: number): void;
+    addScalarNew(scalar: number): T;
+
     sub(other: T): void;
     subNew(other: T): T;
 
@@ -23,9 +28,10 @@ interface Vector<P, T, N> {
 
     reduce(): P;
     extend(value: number): N;
+
 }
 
-class Vec2 implements Vector<void, Vec2, Vec3> {
+export class Vec2 implements Vector<void, Vec2, Vec3> {
     x: number;
     y: number;
 
@@ -34,6 +40,18 @@ class Vec2 implements Vector<void, Vec2, Vec3> {
         this.y = y;
     }
 
+    from(scalar: number): Vec2 {
+        return new Vec2(scalar, scalar);
+    }
+
+    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);
     }
@@ -134,7 +152,7 @@ class Vec2 implements Vector<void, Vec2, Vec3> {
     }
 }
 
-class Vec3 implements Vector<Vec2, Vec3, Vec4> {
+export class Vec3 implements Vector<Vec2, Vec3, Vec4> {
     x: number;
     y: number;
     z: number;
@@ -145,6 +163,34 @@ class Vec3 implements Vector<Vec2, Vec3, Vec4> {
         this.z = z;
     }
 
+    from(scalar: number): Vec3 {
+        return new Vec3(scalar, scalar, scalar);
+    }
+
+    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);
     }
@@ -240,7 +286,7 @@ class Vec3 implements Vector<Vec2, Vec3, Vec4> {
     }
 }
 
-class Vec4 implements Vector<Vec3, Vec4, void> {
+export class Vec4 implements Vector<Vec3, Vec4, void> {
     x: number;
     y: number;
     z: number;
@@ -253,6 +299,18 @@ class Vec4 implements Vector<Vec3, Vec4, void> {
         this.w = w;
     }
 
+    from(scalar: number): Vec4 {
+        return new Vec4(scalar, scalar, scalar, scalar);
+    }
+
+    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 +333,24 @@ 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;
@@ -356,14 +432,14 @@ class Vec4 implements Vector<Vec3, Vec4, void> {
 
 type Mat4Init = number | Float32Array;
 
-type Mat4Row  =  0 | 1 | 2 | 3
+export type Mat4Row  =  0 | 1 | 2 | 3
-type Mat4Col  =  Mat4Row
+export type Mat4Col  =  Mat4Row
-type Mat4X    =  Mat4Row
+export type Mat4X    =  Mat4Row
-type Mat4Y    =  Mat4Row
+export type Mat4Y    =  Mat4Row
-type Mat4Z    =  Mat4Row
+export type Mat4Z    =  Mat4Row
-type Mat4W    =  Mat4Row
+export type Mat4W    =  Mat4Row
 
-class Mat4 {
+export class Mat4 {
     data: Float32Array;
 
     constructor(i: Mat4Init) {
@@ -414,8 +490,8 @@ 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 +579,10 @@ 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 +593,10 @@ 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;
@@ -551,5 +627,3 @@ class Mat4 {
         }
     }
 }
-
-export { initializeContext, Mat4, Vec2, Vec3, Vec4 };

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";
@@ -28,49 +28,61 @@ export class Rectangle {
     draw(corners, fill) {
         if (fill instanceof Sprite) {
             let uvs = Assets.assets.get("sprites").getUVs(fill.id);
-            this.data.push([
+            let data = [
                 corners[0].x, corners[0].y, corners[0].z, 0, 0, 0, 0, uvs[0].x, uvs[0].y, 1,
                 corners[1].x, corners[1].y, corners[1].z, 0, 0, 0, 0, uvs[1].x, uvs[1].y, 1,
                 corners[3].x, corners[3].y, corners[3].z, 0, 0, 0, 0, uvs[3].x, uvs[3].y, 1,
                 corners[2].x, corners[2].y, corners[2].z, 0, 0, 0, 0, uvs[2].x, uvs[2].y, 1,
                 corners[1].x, corners[1].y, corners[1].z, 0, 0, 0, 0, uvs[1].x, uvs[1].y, 1,
                 corners[3].x, corners[3].y, corners[3].z, 0, 0, 0, 0, uvs[3].x, uvs[3].y, 1,
-            ]);
+            ];
+            for (let i = 0; i < data.length; ++i) {
+                this.data.push(data[i]);
+            }
         }
         else {
             let color = fill;
-            this.data.push([
+            let data = [
                 corners[0].x, corners[0].y, corners[0].z, color[0], color[1], color[2], color[3], 0, 0, 0,
                 corners[1].x, corners[1].y, corners[1].z, color[0], color[1], color[2], color[3], 0, 0, 0,
                 corners[3].x, corners[3].y, corners[3].z, color[0], color[1], color[2], color[3], 0, 0, 0,
                 corners[2].x, corners[2].y, corners[2].z, color[0], color[1], color[2], color[3], 0, 0, 0,
                 corners[1].x, corners[1].y, corners[1].z, color[0], color[1], color[2], color[3], 0, 0, 0,
                 corners[3].x, corners[3].y, corners[3].z, color[0], color[1], color[2], color[3], 0, 0, 0,
-            ]);
+            ];
+            for (let i = 0; i < data.length; ++i) {
+                this.data.push(data[i]);
+            }
         }
     }
     drawExts(position, exts, fill) {
         if (fill instanceof Sprite) {
             let uvs = Assets.assets.get("sprites").getUVs(fill.id);
-            this.data.push([
+            let data = [
                 position.x, position.y, position.z, 0, 0, 0, 0, uvs[0].x, uvs[0].y, 1,
                 position.x + exts.x, position.y, position.z, 0, 0, 0, 0, uvs[1].x, uvs[1].y, 1,
                 position.x, position.y + exts.y, position.z, 0, 0, 0, 0, uvs[3].x, uvs[3].y, 1,
                 position.x + exts.x, position.y + exts.y, position.z, 0, 0, 0, 0, uvs[2].x, uvs[2].y, 1,
                 position.x + exts.x, position.y, position.z, 0, 0, 0, 0, uvs[1].x, uvs[1].y, 1,
                 position.x, position.y + exts.y, position.z, 0, 0, 0, 0, uvs[3].x, uvs[3].y, 1,
-            ]);
+            ];
+            for (let i = 0; i < data.length; ++i) {
+                this.data.push(data[i]);
+            }
         }
         else {
             let color = fill;
-            this.data.push([
+            let data = [
-                position.x, position.y, position.z, color[0], color[1], color[2], color[3], 0, 0,
+                position.x, position.y, position.z, color[0], color[1], color[2], color[3], 0, 0, 0,
-                position.x + exts.x, position.y, position.z, color[0], color[1], color[2], color[3], 0, 0,
+                position.x + exts.x, position.y, position.z, color[0], color[1], color[2], color[3], 0, 0, 0,
-                position.x, position.y + exts.y, position.z, color[0], color[1], color[2], color[3], 0, 0,
+                position.x, position.y + exts.y, position.z, color[0], color[1], color[2], color[3], 0, 0, 0,
-                position.x + exts.x, position.y + exts.y, position.z, color[0], color[1], color[2], color[3], 0, 0,
+                position.x + exts.x, position.y + exts.y, position.z, color[0], color[1], color[2], color[3], 0, 0, 0,
-                position.x + exts.x, position.y, position.z, color[0], color[1], color[2], color[3], 0, 0,
+                position.x + exts.x, position.y, position.z, color[0], color[1], color[2], color[3], 0, 0, 0,
-                position.x, position.y + exts.y, position.z, color[0], color[1], color[2], color[3], 0, 0,
+                position.x, position.y + exts.y, position.z, color[0], color[1], color[2], color[3], 0, 0, 0,
-            ]);
+            ];
+            for (let i = 0; i < data.length; ++i) {
+                this.data.push(data[i]);
+            }
         }
     }
 }
@@ -115,29 +127,49 @@ 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 ms = Mat4.scale(new Vec3(1 / camera.scale, 1 / camera.scale, 0));
-    // 2. frustum culling
+    let mc = Mat4.translate(new Vec3((gfx.ctx.canvas.width / 2 - camera.position.x), (gfx.ctx.canvas.height / 2 - camera.position.y), 1.0));
-    for (let k = 0; k < grid.height; ++k) {
+    let mr = Mat4.translate(new Vec3(-(gfx.ctx.canvas.width / 2 - camera.position.x), -(gfx.ctx.canvas.height / 2 - camera.position.y), 1.0));
-        for (let j = 0; j < grid.length; ++j) {
+    let mi = Mat4.isometric();
+    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();
+        bb[i] = mr.transformNew(bb[i].extend(1.0)).reduce();
+        bb[i] = ms.transformNew(bb[i].extend(1.0)).reduce();
+        bb[i] = mc.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   
@@ -11,7 +12,7 @@ export class Rectangle implements Drawable {
     attribs: string[] = ["a_position", "a_color", "a_tex"];
     tags: Array<DrawTag> = [];
 
-    data: number[][] = [];
+    data: number[] = [];
     vertexSize: number = 10;
 
     sprites: Spritesheet = Assets.assets.get("sprites") as Spritesheet;
@@ -38,7 +39,7 @@ export class Rectangle implements Drawable {
         if (fill instanceof Sprite) {
             let uvs = (Assets.assets.get("sprites") as Spritesheet).getUVs(fill.id);
 
-            this.data.push([
+            let data = [
                 corners[0].x, corners[0].y, corners[0].z, 0, 0, 0, 0, uvs[0].x, uvs[0].y, 1,
                 corners[1].x, corners[1].y, corners[1].z, 0, 0, 0, 0, uvs[1].x, uvs[1].y, 1,
                 corners[3].x, corners[3].y, corners[3].z, 0, 0, 0, 0, uvs[3].x, uvs[3].y, 1,
@@ -46,11 +47,15 @@ export class Rectangle implements Drawable {
                 corners[2].x, corners[2].y, corners[2].z, 0, 0, 0, 0, uvs[2].x, uvs[2].y, 1,
                 corners[1].x, corners[1].y, corners[1].z, 0, 0, 0, 0, uvs[1].x, uvs[1].y, 1,
                 corners[3].x, corners[3].y, corners[3].z, 0, 0, 0, 0, uvs[3].x, uvs[3].y, 1,
-            ]);
+            ];
+
+            for (let i = 0; i < data.length; ++i) {
+                this.data.push(data[i]);
+            }
         } else {
             let color = fill;
 
-            this.data.push([
+            let data = [
                 corners[0].x, corners[0].y, corners[0].z, color[0], color[1], color[2], color[3], 0, 0, 0,
                 corners[1].x, corners[1].y, corners[1].z, color[0], color[1], color[2], color[3], 0, 0, 0,
                 corners[3].x, corners[3].y, corners[3].z, color[0], color[1], color[2], color[3], 0, 0, 0,
@@ -58,7 +63,11 @@ export class Rectangle implements Drawable {
                 corners[2].x, corners[2].y, corners[2].z, color[0], color[1], color[2], color[3], 0, 0, 0,
                 corners[1].x, corners[1].y, corners[1].z, color[0], color[1], color[2], color[3], 0, 0, 0,
                 corners[3].x, corners[3].y, corners[3].z, color[0], color[1], color[2], color[3], 0, 0, 0,
-            ]);
+            ];
+
+            for (let i = 0; i < data.length; ++i) {
+                this.data.push(data[i]);
+            }
         }
     }
 
@@ -66,7 +75,7 @@ export class Rectangle implements Drawable {
         if (fill instanceof Sprite) {
             let uvs = (Assets.assets.get("sprites") as Spritesheet).getUVs(fill.id);
 
-            this.data.push([
+            let data = [
                 position.x, position.y, position.z,                    0, 0, 0, 0, uvs[0].x, uvs[0].y, 1,
                 position.x + exts.x, position.y, position.z,           0, 0, 0, 0, uvs[1].x, uvs[1].y, 1,
                 position.x, position.y + exts.y, position.z,           0, 0, 0, 0, uvs[3].x, uvs[3].y, 1, 
@@ -74,19 +83,27 @@ export class Rectangle implements Drawable {
                 position.x + exts.x, position.y + exts.y, position.z,  0, 0, 0, 0, uvs[2].x, uvs[2].y, 1, 
                 position.x + exts.x, position.y, position.z,           0, 0, 0, 0, uvs[1].x, uvs[1].y, 1, 
                 position.x, position.y + exts.y, position.z,           0, 0, 0, 0, uvs[3].x, uvs[3].y, 1, 
-            ]);
+            ];
+
+            for (let i = 0; i < data.length; ++i) {
+                this.data.push(data[i]);
+            }
         } else {
             let color = fill;
 
-            this.data.push([
+            let data = [
-                position.x, position.y, position.z,          color[0], color[1], color[2], color[3], 0, 0,
+                position.x, position.y, position.z,          color[0], color[1], color[2], color[3], 0, 0, 0,
-                position.x + exts.x, position.y, position.z, color[0], color[1], color[2], color[3], 0, 0,
+                position.x + exts.x, position.y, position.z, color[0], color[1], color[2], color[3], 0, 0, 0,
-                position.x, position.y + exts.y, position.z, color[0], color[1], color[2], color[3], 0, 0, 
+                position.x, position.y + exts.y, position.z, color[0], color[1], color[2], color[3], 0, 0, 0, 
                 
-                position.x + exts.x, position.y + exts.y, position.z, color[0], color[1], color[2], color[3], 0, 0, 
+                position.x + exts.x, position.y + exts.y, position.z, color[0], color[1], color[2], color[3], 0, 0, 0, 
-                position.x + exts.x, position.y, position.z, color[0], color[1], color[2], color[3], 0, 0, 
+                position.x + exts.x, position.y, position.z, color[0], color[1], color[2], color[3], 0, 0, 0, 
-                position.x, position.y + exts.y, position.z, color[0], color[1], color[2], color[3], 0, 0, 
+                position.x, position.y + exts.y, position.z, color[0], color[1], color[2], color[3], 0, 0, 0, 
-            ]);
+            ];
+
+            for (let i = 0; i < data.length; ++i) {
+                this.data.push(data[i]);
+            }
         }
     }
 }
@@ -145,26 +162,53 @@ 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 ms = Mat4.scale(new Vec3(1 / camera.scale, 1 /camera.scale, 0));
-    // 2. frustum culling
+    let mc = Mat4.translate(
-    for (let k = 0; k < grid.height; ++k) {
+        new Vec3(
-        for (let j = 0; j < grid.length; ++j) {
+            (gfx.ctx.canvas.width / 2  - camera.position.x),
+            (gfx.ctx.canvas.height / 2 - camera.position.y),
+            1.0));
+
+    let mr = Mat4.translate(
+        new Vec3(
+            -(gfx.ctx.canvas.width / 2  - camera.position.x),
+            -(gfx.ctx.canvas.height / 2 - camera.position.y),
+            1.0));
+    let mi = Mat4.isometric();
+
+    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();
+        bb[i] = mr.transformNew(bb[i].extend(1.0)).reduce();
+        bb[i] = ms.transformNew(bb[i].extend(1.0)).reduce();
+        bb[i] = mc.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) {
@@ -172,6 +216,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,
@@ -187,6 +240,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);
@@ -92,7 +98,7 @@ export class Graphics {
     }
     draw() {
         for (let o of this.toRender) {
-            const data = o.data.flat();
+            const data = o.data;
             this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.vbo);
             this.ctx.bufferData(this.ctx.ARRAY_BUFFER, new Float32Array(data), this.ctx.STATIC_DRAW);
             let aid = 0;

src/js/graphics.ts

@@ -60,7 +60,7 @@ export interface Drawable {
     attribs: string[];
     tags: Array<DrawTag>;
 
-    data: number[][];
+    data: number[];
     vertexSize: number;
 
     sprites: Spritesheet | undefined;
@@ -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);
@@ -131,7 +139,7 @@ export class Graphics {
 
     draw() {
         for (let o of this.toRender) {
-            const data = o.data.flat();
+            const data = o.data;
 
             this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.vbo);
             this.ctx.bufferData(this.ctx.ARRAY_BUFFER, new Float32Array(data), this.ctx.STATIC_DRAW);

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,17 +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);
-    tree(grid, new Vec2(5, 5));
+    for (let i = 0; i <= size / 2; i++) {
-    //for (let i = 0; i < 10; i++) {
+        tree(grid, new Vec3(Math.floor(Math.random() * size - 1), Math.floor(Math.random() * size - 1), 2));
-    //    tree(grid, new Vec2(Math.floor(Math.random() * size - 1), Math.floor(Math.random() * size - 1)));
+    }
-    //}
+    const input = new Input();
-    //grid.setTile(new Tile(Assets.AssetToTileFill("log"), TileEdge.Both), new Vec3(0, 29, 1));
+    addDefaultKeybinds(input, camera);
     let prevTimestamp = 0;
     const frame = (timestamp) => {
         const deltaTime = (timestamp - prevTimestamp) / 1000;
@@ -157,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,18 +187,32 @@ 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);
-    tree(grid, new Vec2(5, 5));
-    //for (let i = 0; i < 10; i++) {
-    //    tree(grid, new Vec2(Math.floor(Math.random() * size - 1), Math.floor(Math.random() * size - 1)));
-    //}
 
-    //grid.setTile(new Tile(Assets.AssetToTileFill("log"), TileEdge.Both), new Vec3(0, 29, 1));
+    for (let i = 0; i <= size / 2; i++) {
+        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) => {
@@ -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/wasm.js

@@ -1,11 +1,3 @@
-export class WASMGLvalue {
-    ptr;
-    size;
-    constructor(ptr, size) {
-        this.ptr = ptr;
-        this.size = size;
-    }
-}
 export async function loadWasmModule(path) {
     return WebAssembly.instantiateStreaming(fetch(path));
 }
@@ -34,4 +26,18 @@ export class WASMGL {
         });
         return ptr;
     }
+    push(data) {
+        let ptr = this.alloc(data.length);
+        data.forEach((v, i) => {
+            this.mem[ptr + i] = v;
+        });
+        return ptr;
+    }
+    get(ptr, length) {
+        let a = new Array(length);
+        for (let i = 0; i < length; ++i) {
+            a[i] = this.mem[ptr + i];
+        }
+        return a;
+    }
 }

src/js/wasm.ts

@@ -1,13 +1,3 @@
-export class WASMGLvalue {
-    ptr: number;
-    size: number;
-
-    constructor(ptr: number, size: number) {
-        this.ptr = ptr;
-        this.size = size;
-    }
-}
-
 export interface WASMGLEnvironment {
     exports: any,
     mem: Float32Array,
@@ -58,4 +48,24 @@ export class WASMGL {
 
         return ptr;
     }
+
+    push(data: number[]): number {
+        let ptr = this.alloc(data.length);
+
+        data.forEach((v, i) => {
+            this.mem[ptr + i] = v;
+        });
+
+        return ptr;
+    }
+
+    get(ptr: number, length: number): Array<number> {
+        let a = new Array(length);
+
+        for (let i = 0; i < length; ++i) {
+            a[i] = this.mem[ptr + i];
+        }
+
+        return a;
+    }
 }

src/js/world.js

@@ -33,36 +33,42 @@ export class Grid {
     tiles3d;
     tileSize;
     width;
-    length;
+    breadth;
     height;
-    constructor(position, tileSize, width, length, height) {
+    topHeight;
+    constructor(position, tileSize, width, breadth, height) {
         this.tiles3d = new Array(height);
         this.position = position;
         this.tileSize = tileSize;
         this.width = width;
-        this.length = length;
+        this.breadth = breadth;
         this.height = height;
-        let layer = new Array(width * length);
+        this.topHeight = 0;
+        let layer = new Array(width * breadth);
         for (let i = 0; i < this.height; ++i)
             this.tiles3d[i] = { ...layer };
     }
     fillLayer(tile, z) {
+        if (z + 1 > this.topHeight)
+            this.topHeight = z + 1;
         for (let i = 0; i < this.width; ++i) {
-            for (let j = 0; j < this.length; ++j) {
+            for (let j = 0; j < this.breadth; ++j) {
                 this.tiles3d[z][i + j * this.width] = { ...tile };
             }
         }
         for (let i = 0; i < this.width; ++i) {
-            this.tiles3d[z][this.length * i - 1] = { ...tile, edge: TileEdge.Right };
+            this.tiles3d[z][this.breadth * i - 1] = { ...tile, edge: TileEdge.Right };
         }
-        for (let i = 0; i < this.length - 1; ++i) {
+        for (let i = 0; i < this.breadth - 1; ++i) {
-            this.tiles3d[z][this.width * (this.length - 1) + i] = { ...tile, edge: TileEdge.Left };
+            this.tiles3d[z][this.width * (this.breadth - 1) + i] = { ...tile, edge: TileEdge.Left };
         }
-        this.tiles3d[z][this.width * this.length - 1] = { ...tile, edge: TileEdge.Both };
+        this.tiles3d[z][this.width * this.breadth - 1] = { ...tile, edge: TileEdge.Both };
     }
     setTile(tile, coord) {
         let index = coord.x + coord.y * this.width;
         this.tiles3d[coord.z][index] = { ...tile };
+        if (coord.z + 1 > this.topHeight)
+            this.topHeight = coord.z + 1;
     }
     getTile(coord) {
         let index = coord.x + coord.y * this.width;
@@ -75,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

@@ -47,46 +47,56 @@ export class Grid {
     tileSize: number;
 
     width:  number;
-    length: number;
+    breadth: number;
     height: number;
 
-    constructor(position: Vec3, tileSize: number, width: number, length: number, height: number) {
+    topHeight: number;
+
+    constructor(position: Vec3, tileSize: number, width: number, breadth: number, height: number) {
         this.tiles3d = new Array<Tile[]>(height);
         this.position = position;
 
         this.tileSize = tileSize;
 
         this.width = width;
-        this.length = length;
+        this.breadth = breadth;
         this.height = height;
 
-        let layer = new Array(width * length);
+        this.topHeight = 0;
+
+        let layer = new Array(width * breadth);
 
         for (let i = 0; i < this.height; ++i)
             this.tiles3d[i] = {...layer};
     }
 
     fillLayer(tile: Tile, z: number) {
+        if (z + 1 > this.topHeight)
+            this.topHeight = z + 1;
+
         for (let i = 0; i < this.width; ++i) {
-            for (let j = 0; j < this.length; ++j) {
+            for (let j = 0; j < this.breadth; ++j) {
                 this.tiles3d[z][i + j * this.width] = {...tile};
             }
         }
 
         for (let i = 0; i < this.width; ++i) {
-            this.tiles3d[z][this.length * i - 1] = {...tile, edge: TileEdge.Right};
+            this.tiles3d[z][this.breadth * i - 1] = {...tile, edge: TileEdge.Right};
         }
 
-        for (let i = 0; i < this.length - 1; ++i) {
+        for (let i = 0; i < this.breadth - 1; ++i) {
-            this.tiles3d[z][this.width * (this.length - 1) + i] = {...tile, edge: TileEdge.Left};
+            this.tiles3d[z][this.width * (this.breadth - 1) + i] = {...tile, edge: TileEdge.Left};
         }
 
-        this.tiles3d[z][this.width * this.length - 1] = {...tile, edge: TileEdge.Both};
+        this.tiles3d[z][this.width * this.breadth - 1] = {...tile, edge: TileEdge.Both};
     }
 
     setTile(tile: Tile, coord: Vec3) {
         let index = coord.x + coord.y * this.width;
         this.tiles3d[coord.z][index] = {...tile};
+
+        if (coord.z + 1 > this.topHeight)
+            this.topHeight = coord.z + 1;
     }
 
     getTile(coord: Vec3): Tile | null {
@@ -99,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) {

src/wasm/main.c

@@ -1,20 +1,20 @@
 #include "wasmgl.h"
 
-void doubel(WASMGLvalue(0))
+void doubel(WASMGLvalue(data))
 {
-    for (int i = 0; i < size_0; ++i)
+    for (int i = 0; i < size_data; ++i)
-        WASMGLset(ptr_0 + i, WASMGLmemory[ptr_0 + i] * 2.0);
+        WASMGLset(ptr_data + i, WASMGLmemory[ptr_data + i] * 2.0);
 }
 
-void uppercase(WASMGLvalue(0)) {
+void uppercase(WASMGLvalue(data)) {
     int val = 0;
 
-    for (int i = 0; i < size_0; ++i)
+    for (int i = 0; i < size_data; ++i)
     {
-        val = WASMGLmemory[ptr_0 + i] - 32;
+        val = WASMGLmemory[ptr_data + i] - 32;
 
-        if (val < 65 || val > 122) val = WASMGLmemory[ptr_0 + i];
+        if (val < 65 || val > 122) val = WASMGLmemory[ptr_data + i];
 
-        WASMGLset(ptr_0 + i, val);
+        WASMGLset(ptr_data + i, val);
     }
 }

src/wasm/wasmgl.h

@@ -17,7 +17,7 @@ extern float WASMGLmemory[WASMGLmemory_size];
 typedef unsigned int WASMGLptr;
 typedef unsigned int WASMGLsize;
 
-#define WASMGLvalue(n) WASMGLptr ptr_##n, WASMGLsize size_##n
+#define WASMGLvalue(name) WASMGLptr ptr_##name, WASMGLsize size_##name
 
 WASMGLptr WASMGLmalloc(WASMGLsize size);
 void WASMGLset(WASMGLptr ptr, int value);