From 2bf6e33350d5ea9d93f46e27090390dca0aec0c8 Mon Sep 17 00:00:00 2001 From: Maciej Samborski Date: Thu, 16 Jan 2025 00:11:48 +0100 Subject: [PATCH] Added basic occlusion culling --- src/js/assets.js | 1 + src/js/assets.ts | 9 +++--- src/js/common.js | 62 +++++++++++++++++++++++++++++------ src/js/common.ts | 81 ++++++++++++++++++++++++++++++++++++++++------ src/js/draw.js | 30 ++++++++++++----- src/js/draw.ts | 41 +++++++++++++++++------ src/js/graphics.js | 6 ++++ src/js/graphics.ts | 8 +++++ src/js/input.js | 6 ++++ src/js/input.ts | 8 +++++ src/js/script.js | 25 +++++++++----- src/js/script.ts | 32 ++++++++++++------ src/js/world.js | 24 +++++++------- src/js/world.ts | 26 +++++++-------- 14 files changed, 275 insertions(+), 84 deletions(-) diff --git a/src/js/assets.js b/src/js/assets.js index 2eea889..81cbe66 100644 --- a/src/js/assets.js +++ b/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(); diff --git a/src/js/assets.ts b/src/js/assets.ts index 168607c..a487215 100644 --- a/src/js/assets.ts +++ b/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, - Green : [0, 1, 0, 1] as Color, - Blue : [0, 0, 1, 1] as Color, - Brown : [0.341, 0.337, 0.204, 1] as Color, + Red : [1, 0, 0, 1] as Color, + Green : [0, 1, 0, 1] as Color, + Blue : [0, 0, 1, 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; diff --git a/src/js/common.js b/src/js/common.js index 87bb1d5..2511fe2 100644 --- a/src/js/common.js +++ b/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 y = v.x * this.y(0) + v.y * this.y(1) + v.z * this.y(2) + v.w * this.y(3); - let z = v.x * this.z(0) + v.y * this.z(1) + v.z * this.z(2) + v.w * this.z(3); - let w = v.x * this.w(0) + v.y * this.w(1) + v.z * this.w(2) + v.w * this.w(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.x(1) + v.y * this.y(1) + v.z * this.z(1) + v.w * this.w(1); + 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.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 y = v.x * this.y(0) + v.y * this.y(1) + v.z * this.y(2) + v.w * this.y(3); - let z = v.x * this.z(0) + v.y * this.z(1) + v.z * this.z(2) + v.w * this.z(3); - let w = v.x * this.w(0) + v.y * this.w(1) + v.z * this.w(2) + v.w * this.w(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.x(1) + v.y * this.y(1) + v.z * this.z(1) + v.w * this.w(1); + 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.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; diff --git a/src/js/common.ts b/src/js/common.ts index 76245f6..a776612 100644 --- a/src/js/common.ts +++ b/src/js/common.ts @@ -12,6 +12,9 @@ interface Vector { 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 { 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 { 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 { 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 { 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 y = v.x * this.y(0) + v.y * this.y(1) + v.z * this.y(2) + v.w * this.y(3); - let z = v.x * this.z(0) + v.y * this.z(1) + v.z * this.z(2) + v.w * this.z(3); - let w = v.x * this.w(0) + v.y * this.w(1) + v.z * this.w(2) + v.w * this.w(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.x(1) + v.y * this.y(1) + v.z * this.z(1) + v.w * this.w(1); + 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.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 y = v.x * this.y(0) + v.y * this.y(1) + v.z * this.y(2) + v.w * this.y(3); - let z = v.x * this.z(0) + v.y * this.z(1) + v.z * this.z(2) + v.w * this.z(3); - let w = v.x * this.w(0) + v.y * this.w(1) + v.z * this.w(2) + v.w * this.w(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.x(1) + v.y * this.y(1) + v.z * this.z(1) + v.w * this.w(1); + 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.x(3) + v.y * this.y(3) + v.z * this.z(3) + v.w * this.w(3); vec.x = x; vec.y = y; diff --git a/src/js/draw.js b/src/js/draw.js index d62f761..de302b3 100644 --- a/src/js/draw.js +++ b/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) { - let position = { ...grid.position }; +// TODO: Optimize the shit out of this function +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 - // 1. Grid based occlusion culling - // 2. frustum culling + let mt = Mat4.translate(camera.position.multScalarNew(-1.0)); + 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(); + } 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; } diff --git a/src/js/draw.ts b/src/js/draw.ts index 1d359a7..80ab109 100644 --- a/src/js/draw.ts +++ b/src/js/draw.ts @@ -1,7 +1,8 @@ -import { Vec3, Vec2 } from "./common.js" -import { Graphics, Drawable, DrawTag, Sprite, Spritesheet } from "./graphics.js"; +import { Vec3, Vec2, Mat4, Vec4 } from "./common.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) { - let position = {...grid.position} as Vec3; +// TODO: Optimize the shit out of this function +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 - // 1. Grid based occlusion culling - // 2. frustum culling + let mt = Mat4.translate(camera.position.multScalarNew(-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(); + } + 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); } diff --git a/src/js/graphics.js b/src/js/graphics.js index bf68c8f..b127680 100644 --- a/src/js/graphics.js +++ b/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); diff --git a/src/js/graphics.ts b/src/js/graphics.ts index a16c83d..8fbe53f 100644 --- a/src/js/graphics.ts +++ b/src/js/graphics.ts @@ -77,6 +77,14 @@ export class Graphics { toRender: Array = []; 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); diff --git a/src/js/input.js b/src/js/input.js index 646dbbf..2aaf011 100644 --- a/src/js/input.js +++ b/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) { diff --git a/src/js/input.ts b/src/js/input.ts index ee34396..8495a64 100644 --- a/src/js/input.ts +++ b/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 = 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 diff --git a/src/js/script.js b/src/js/script.js index 02b3798..c3f59b3 100644 --- a/src/js/script.js +++ b/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); - //grid.setTile(new Tile(Sprite.tile(0), TileEdge.Both), new Vec3(1, 1, 1)); + }), 2); 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")); })(); diff --git a/src/js/script.ts b/src/js/script.ts index 071b87a..f66d2ca 100644 --- a/src/js/script.ts +++ b/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); - - //grid.setTile(new Tile(Sprite.tile(0), TileEdge.Both), new Vec3(1, 1, 1)); + }), 2); 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")); })(); diff --git a/src/js/world.js b/src/js/world.js index 43837ba..66b430b 100644 --- a/src/js/world.js +++ b/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, 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, 4)); - grid.setTile(new Tile(log, TileEdge.None), new Vec3(position.x, position.y, 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, 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 + 1, position.y, 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 + 1, 4)); - grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x + 1, position.y + 1, 5)); + 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, position.z + 2)); + 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, position.z + 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, position.z + 4)); + 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, position.z + 5)); + 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, position.z + 5)); + 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, position.z + 5)); } export function bush(grid, position) { let leaves = Sprite.tile(1); diff --git a/src/js/world.ts b/src/js/world.ts index 56198b8..3a5bd25 100644 --- a/src/js/world.ts +++ b/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, 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, 4)); - grid.setTile(new Tile(log, TileEdge.None), new Vec3(position.x, position.y, 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, 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 + 1, position.y, 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 + 1, 4)); - grid.setTile(new Tile(leaves, TileEdge.Both), new Vec3(position.x + 1, position.y + 1, 5)); + 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, position.z + 2)); + 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, position.z + 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, position.z + 4)); + 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, position.z + 5)); + 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, position.z + 5)); + 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, position.z + 5)); } export function bush(grid: Grid, position: Vec2) {