From 95257a4ef3fa529a00787a3e7bd80b61c7a58833 Mon Sep 17 00:00:00 2001 From: Maciej Samborski Date: Fri, 27 Dec 2024 14:29:07 +0100 Subject: [PATCH] Added ability to change between isometric and normal drawing --- src/js/common.ts | 6 +++--- src/js/draw.js | 2 ++ src/js/draw.ts | 4 ++++ src/js/graphics.js | 4 ++-- src/js/graphics.ts | 6 +++--- src/js/script.js | 23 +++++++++++++++-------- src/js/script.ts | 28 +++++++++++++++++++--------- 7 files changed, 48 insertions(+), 25 deletions(-) diff --git a/src/js/common.ts b/src/js/common.ts index ad60e56..aad594f 100644 --- a/src/js/common.ts +++ b/src/js/common.ts @@ -244,9 +244,9 @@ class Mat4 { static isometric(): Mat4 { let m = new Mat4(new Float32Array([ 1, -1, 0, 0, - 1, 1, 0, 0, - 0, 0, 1, 0, - 0, 0, 0, 1, + 1, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1, ])); return m; diff --git a/src/js/draw.js b/src/js/draw.js index 5395467..a351379 100644 --- a/src/js/draw.js +++ b/src/js/draw.js @@ -79,6 +79,7 @@ export function drawIsometricCube(gfx, position, exts, color) { new Vec3(position.x + 1.5 * exts.x, position.y + 0.5 * exts.y, position.z + 0.25 * exts.z), new Vec3(position.x + 0.5 * exts.x, position.y - 0.5 * exts.y, position.z + 0.25 * exts.z), ]; + gfx.ctx.uniform1i(gfx.getUniform("u_isIso"), 1); drawRectangle(gfx, [ points[0], points[1], @@ -97,6 +98,7 @@ export function drawIsometricCube(gfx, position, exts, color) { points[4], points[6], ], color); + gfx.ctx.uniform1i(gfx.getUniform("u_isIso"), 0); } export function drawRectangleExts(gfx, position, exts, color) { const a_position = gfx.getAttribute("a_position"); diff --git a/src/js/draw.ts b/src/js/draw.ts index 8863560..f7ed7b2 100644 --- a/src/js/draw.ts +++ b/src/js/draw.ts @@ -98,6 +98,8 @@ export function drawIsometricCube(gfx: Graphics, position: Vec3, exts: Vec3, col new Vec3(position.x + 0.5 * exts.x, position.y - 0.5 * exts.y, position.z + 0.25 * exts.z), ]; + gfx.ctx.uniform1i(gfx.getUniform("u_isIso"), 1); + drawRectangle( gfx, [ @@ -127,6 +129,8 @@ export function drawIsometricCube(gfx: Graphics, position: Vec3, exts: Vec3, col points[6], ], color); + + gfx.ctx.uniform1i(gfx.getUniform("u_isIso"), 0); } export function drawRectangleExts(gfx: Graphics, position: Vec3, exts: Vec2, color: Color | Texture) { diff --git a/src/js/graphics.js b/src/js/graphics.js index d52313c..c7027a2 100644 --- a/src/js/graphics.js +++ b/src/js/graphics.js @@ -143,9 +143,9 @@ async function loadTexture(path) { }); } export class Camera { + dt = 0; position; movement; - dt = 0; constructor(position) { this.position = position; this.movement = new Vec4(0, 0, 0, 0); @@ -153,7 +153,7 @@ export class Camera { update(dt) { this.dt = dt; let newPosition = this.movement.multScalarNew(this.dt); - this.position.x += (newPosition.x + newPosition.y) / 1.5; + this.position.x += (newPosition.x + newPosition.y) / 2; this.position.y += newPosition.z + newPosition.w; } } diff --git a/src/js/graphics.ts b/src/js/graphics.ts index b638221..8b90fc9 100644 --- a/src/js/graphics.ts +++ b/src/js/graphics.ts @@ -1,4 +1,4 @@ -import {Vec3, Vec4} from "./common.js"; +import {Vec2, Vec3, Vec4} from "./common.js"; export function fullscreenCanvas(gfx: Graphics, id: string) { const canvas = document.getElementById(id) as HTMLCanvasElement; @@ -187,9 +187,9 @@ async function loadTexture(path: string): Promise { } export class Camera { + dt: number = 0; position: Vec3; movement: Vec4; - dt: number = 0; constructor(position: Vec3) { this.position = position; @@ -200,7 +200,7 @@ export class Camera { this.dt = dt; let newPosition = this.movement.multScalarNew(this.dt); - this.position.x += (newPosition.x + newPosition.y) / 1.5; + this.position.x += (newPosition.x + newPosition.y) / 2; this.position.y += newPosition.z + newPosition.w; } } diff --git a/src/js/script.js b/src/js/script.js index f5c1c71..f5efe7d 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -12,6 +12,7 @@ const vertexShader = `#version 300 es out vec4 v_color; uniform mat4 u_matrix; uniform bool u_isTex; + uniform bool u_isIso; mat4 Iso = mat4( 1, -1, 0, 0, @@ -21,9 +22,16 @@ const vertexShader = `#version 300 es ); void main() { - vec4 transformed = u_matrix * Iso * vec4(a_position.xyz, 1.0); + vec4 orthographic; - gl_Position = transformed; + if (u_isIso) { + vec4 isometric = Iso * vec4(a_position.xyz, 1.0); + orthographic = u_matrix * isometric; + } else { + orthographic = u_matrix * vec4(a_position.xyz, 1.0); + } + + gl_Position = orthographic; if (u_isTex) { v_tex_position = a_tex_position; @@ -62,10 +70,8 @@ function draw(gfx, camera, dt, tex) { let far = 100; let mo = Mat4.orthographic(left, right, bottom, top, near, far); let mt = Mat4.translate(camera.position); + let mi = Mat4.isometric(); let m = mo.multNew(mt); - //m = m.multNew(Mat4.rotation_x(angle)); - //m = m.multNew(Mat4.rotation_y(angle)); - //m = m.multNew(Mat4.rotation_z(angle)); gfx.ctx.uniformMatrix4fv(gfx.getUniform("u_matrix"), false, m.splat()); let exts = new Vec3(50, 50, 20); for (let i = 0; i < 10; ++i) { @@ -84,17 +90,17 @@ function addDefaultKeybinds(input, camera) { }, (c) => { c.movement.x = 1; }); - input.addKeyAction("KeyD", [], camera, c => { + input.addKeyAction("KeyD", [], camera, (c) => { c.movement.y = 0; }, (c) => { c.movement.y = -1; }); - input.addKeyAction("KeyW", [], camera, c => { + input.addKeyAction("KeyW", [], camera, (c) => { c.movement.z = 0; }, (c) => { c.movement.z = -1; }); - input.addKeyAction("KeyS", [], camera, c => { + input.addKeyAction("KeyS", [], camera, (c) => { c.movement.w = 0; }, (c) => { c.movement.w = 1; @@ -115,6 +121,7 @@ function addDefaultKeybinds(input, camera) { a_tex_position.format(2, gfx.ctx.FLOAT, false, 0, 0); gfx.createUniform("u_matrix"); gfx.createUniform("u_isTex"); + gfx.createUniform("u_isIso"); let city = await Texture.load(ctx, "../../assets/genetica/rt/City Night.jpg"); let wall = await Texture.load(ctx, "../../assets/wall.png"); let camera = new Camera(new Vec3(0, 0, 0)); diff --git a/src/js/script.ts b/src/js/script.ts index b2a0c8e..342901e 100644 --- a/src/js/script.ts +++ b/src/js/script.ts @@ -1,4 +1,4 @@ -import { initializeContext, Vec3, Mat4 } from "./common.js"; +import { initializeContext, Vec3, Mat4, Vec2 } from "./common.js"; import { Graphics, fullscreenCanvas, Texture, Camera } from "./graphics.js"; import * as drawing from "./draw.js"; import * as wasm from "./wasm.js"; @@ -14,6 +14,7 @@ const vertexShader = out vec4 v_color; uniform mat4 u_matrix; uniform bool u_isTex; + uniform bool u_isIso; mat4 Iso = mat4( 1, -1, 0, 0, @@ -23,9 +24,16 @@ const vertexShader = ); void main() { - vec4 transformed = u_matrix * Iso * vec4(a_position.xyz, 1.0); + vec4 orthographic; - gl_Position = transformed; + if (u_isIso) { + vec4 isometric = Iso * vec4(a_position.xyz, 1.0); + orthographic = u_matrix * isometric; + } else { + orthographic = u_matrix * vec4(a_position.xyz, 1.0); + } + + gl_Position = orthographic; if (u_isTex) { v_tex_position = a_tex_position; @@ -72,11 +80,9 @@ function draw(gfx: Graphics, camera: Camera, dt: number, tex: Texture) { let mo = Mat4.orthographic(left, right, bottom, top, near, far); let mt = Mat4.translate(camera.position); + let mi = Mat4.isometric(); let m = mo.multNew(mt); - //m = m.multNew(Mat4.rotation_x(angle)); - //m = m.multNew(Mat4.rotation_y(angle)); - //m = m.multNew(Mat4.rotation_z(angle)); gfx.ctx.uniformMatrix4fv( gfx.getUniform("u_matrix"), @@ -106,21 +112,24 @@ function addDefaultKeybinds(input: Input, camera: Camera) { c.movement.x = 1; }); - input.addKeyAction("KeyD", [], camera, c => { + input.addKeyAction("KeyD", [], camera, + (c) => { c.movement.y = 0; }, (c) => { c.movement.y = -1; }); - input.addKeyAction("KeyW", [], camera, c => { + input.addKeyAction("KeyW", [], camera, + (c) => { c.movement.z = 0; }, (c) => { c.movement.z = -1; }); - input.addKeyAction("KeyS", [], camera, c => { + input.addKeyAction("KeyS", [], camera, + (c) => { c.movement.w = 0; }, (c) => { @@ -147,6 +156,7 @@ function addDefaultKeybinds(input: Input, camera: Camera) { gfx.createUniform("u_matrix"); gfx.createUniform("u_isTex"); + gfx.createUniform("u_isIso"); let city = await Texture.load(ctx, "../../assets/genetica/rt/City Night.jpg"); let wall = await Texture.load(ctx, "../../assets/wall.png");