MaciejSamborski
/
webgl_game
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added ability to change between isometric and normal drawing

This commit is contained in:
Maciej Samborski 2024-12-27 14:29:07 +01:00
parent 2a1fe1d0a9
commit 95257a4ef3
7 changed files with 48 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/js/common.ts
View File

@ -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;

2
src/js/draw.js
View File

@ -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");

4
src/js/draw.ts
View File

@ -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) {

4
src/js/graphics.js
View File

@ -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;
}
}

6
src/js/graphics.ts
View File

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

23
src/js/script.js
View File

@ -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));

28
src/js/script.ts
View File

@ -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");