import { initializeContext, Vec2, Mat4 } from "./common.js"; import { Graphics, fullscreenCanvas, Texture } from "./graphics.js"; import * as drawing from "./draw.js"; import * as wasm from "./wasm.js"; const vertexShader = `#version 300 es in vec2 a_position; in vec2 a_tex_position; out vec2 v_tex_position; uniform mat4 u_matrix; void main() { vec4 transformed = u_matrix * vec4(a_position.xy, 0.0, 1.0); gl_Position = transformed; v_tex_position = a_tex_position; } `; const fragmentShader = `#version 300 es precision highp float; in vec2 v_tex_position; out vec4 outColor; uniform sampler2D u_texture; void main() { outColor = texture(u_texture, v_tex_position); } `; function draw(gfx, angle, tex) { gfx.clear(0, 0, 0, 0); let left = 0; let right = gfx.ctx.canvas.width; let bottom = 0; let top = gfx.ctx.canvas.height; let near = -1; let far = 1; let m = Mat4.orthographic(left, right, bottom, top, near, far); m = m.mult(Mat4.rotation_x(angle)); m = m.mult(Mat4.rotation_y(angle)); m = m.mult(Mat4.rotation_z(angle)); gfx.ctx.uniformMatrix4fv(gfx.getUniform("u_matrix"), false, m.splat()); drawing.drawRectangle(gfx, new Vec2(gfx.ctx.canvas.width / 2 - 200, gfx.ctx.canvas.height / 2 - 200), new Vec2(400, 400), tex); } (async () => { const canvasId = "game"; const ctx = initializeContext(canvasId); if (ctx === null) return; const gfx = new Graphics(ctx, vertexShader, fragmentShader); fullscreenCanvas(gfx, canvasId); const a_position = gfx.createAttribute("a_position"); a_position.format(2, gfx.ctx.FLOAT, false, 0, 0); //const a_color = gfx.createAttribute("a_color"); //a_color.format(4, gfx.ctx.FLOAT, false, 0, 0); const a_tex_position = gfx.createAttribute("a_tex_position"); a_tex_position.format(2, gfx.ctx.FLOAT, false, 0, 0); gfx.createUniform("u_matrix"); let city = await Texture.load(ctx, "../../assets/genetica/rt/City Night.jpg"); let angle = 0; let prevTimestamp = 0; const frame = (timestamp) => { const deltaTime = (timestamp - prevTimestamp) / 1000; prevTimestamp = timestamp; fullscreenCanvas(gfx, "game"); draw(gfx, angle, city); angle += Math.PI * deltaTime * 0.5; window.requestAnimationFrame(frame); }; window.requestAnimationFrame((timestamp) => { prevTimestamp = timestamp; window.requestAnimationFrame(frame); }); let wasmgl = new wasm.WASMGL(await wasm.loadWasmModule("./src/wasm/module.wasm")); })();