diff --git a/example/boxes.odin b/example/boxes.odin index 130edd8..aab9772 100644 --- a/example/boxes.odin +++ b/example/boxes.odin @@ -83,7 +83,7 @@ boxes_frame :: proc(delta: f32) { // Clear the canvas AND the depth buffer. gl.Clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT) - rotation += 0.01 * delta * (window_size.yx / 2 - mouse_pos.yx) / window_size.yx + rotation -= 0.01 * delta * mouse_rel.yx mat: Mat4 = 1 mat *= glm.mat4PerspectiveInfinite( diff --git a/example/camera.odin b/example/camera.odin index fabb0d4..eb66b78 100644 --- a/example/camera.odin +++ b/example/camera.odin @@ -99,16 +99,15 @@ camera_frame :: proc(delta: f32) { camera_mat *= mat4_translate({0, 0, 800 - 700 * (scale/1.2)}) camera_mat = glm.inverse_mat4(camera_mat) - view_mat: Mat4 = 1 - view_mat = glm.mat4PerspectiveInfinite( + view_mat := glm.mat4PerspectiveInfinite( fovy = radians(80), aspect = aspect_ratio, near = 1, ) view_mat *= camera_mat - rotation += 0.01 * delta * (window_size.x / 2 - mouse_pos.x) / window_size.x - elevation := 160 + 300 * (window_size.y / 2 - mouse_pos.y) / window_size.y + rotation += 0.01 * delta * mouse_rel.x + elevation := 300 * -(mouse_rel.y - 0.5) cube_pos: Vec cube_pos.y = elevation @@ -119,8 +118,8 @@ camera_frame :: proc(delta: f32) { /* Draw pyramid looking at the cube */ angle := 2*PI * f32(i)/f32(AMOUNT) - x: f32 = RADIUS * cos(angle) y: f32 = -80 + x: f32 = RADIUS * cos(angle) z: f32 = RADIUS * sin(angle) mat := view_mat diff --git a/example/pyramid.odin b/example/pyramid.odin index 2f99a41..5d8f71f 100644 --- a/example/pyramid.odin +++ b/example/pyramid.odin @@ -50,12 +50,9 @@ to show the front-face. } @(private="file") state: struct { - rotation_y: f32, - rotation_x: f32, - a_position: i32, - a_color: i32, - u_matrix: i32, - vao: VAO, + rotation: [2]f32, + u_matrix: i32, + vao: VAO, } pyramid_start :: proc(program: gl.Program) { @@ -64,9 +61,9 @@ pyramid_start :: proc(program: gl.Program) { vao = gl.CreateVertexArray() gl.BindVertexArray(vao) - a_position = gl.GetAttribLocation (program, "a_position") - a_color = gl.GetAttribLocation (program, "a_color") - u_matrix = gl.GetUniformLocation(program, "u_matrix") + a_position := gl.GetAttribLocation (program, "a_position") + a_color := gl.GetAttribLocation (program, "a_color") + u_matrix = gl.GetUniformLocation(program, "u_matrix") gl.EnableVertexAttribArray(a_position) gl.EnableVertexAttribArray(a_color) @@ -94,8 +91,7 @@ pyramid_frame :: proc(delta: f32) { gl.ClearColor(0, 0.01, 0.02, 0) gl.Clear(gl.COLOR_BUFFER_BIT) - rotation_y += 0.01 * delta * (window_size.x / 2 - mouse_pos.x) / window_size.x - rotation_x += 0.01 * delta * (window_size.y / 2 - mouse_pos.y) / window_size.y + rotation -= 0.01 * delta * mouse_rel.yx mat := glm.mat4Ortho3d( left = 0, @@ -107,8 +103,8 @@ pyramid_frame :: proc(delta: f32) { ) mat *= glm.mat4Translate(vec2_to_vec3(mouse_pos - canvas_pos)) mat *= glm.mat4Scale(scale*2 + 0.4) - mat *= mat4_rotate_y(rotation_y) - mat *= mat4_rotate_x(-rotation_x) + mat *= mat4_rotate_y(-rotation.y) + mat *= mat4_rotate_x(rotation.x) mat *= glm.mat4Translate({0, -H / 2, 0}) gl.UniformMatrix4fv(u_matrix, mat) diff --git a/example/rectangle.odin b/example/rectangle.odin index 0114cc9..e3466da 100644 --- a/example/rectangle.odin +++ b/example/rectangle.odin @@ -28,11 +28,9 @@ import gl "../wasm/webgl" } @(private="file") state: struct { - rotation: f32, - a_position: i32, - a_color: i32, - u_matrix: i32, - vao: VAO, + rotation: f32, + u_matrix: i32, + vao: VAO, } rectangle_start :: proc(program: gl.Program) { @@ -46,9 +44,9 @@ rectangle_start :: proc(program: gl.Program) { vao = gl.CreateVertexArray() gl.BindVertexArray(vao) // need to bind VAO before binding buffers - a_position = gl.GetAttribLocation (program, "a_position") - a_color = gl.GetAttribLocation (program, "a_color") - u_matrix = gl.GetUniformLocation(program, "u_matrix") + a_position := gl.GetAttribLocation (program, "a_position") + a_color := gl.GetAttribLocation (program, "a_color") + u_matrix = gl.GetUniformLocation(program, "u_matrix") gl.EnableVertexAttribArray(a_position) gl.EnableVertexAttribArray(a_color) @@ -74,7 +72,7 @@ rectangle_frame :: proc(delta: f32) { gl.ClearColor(0, 0.01, 0.02, 0) gl.Clear(gl.COLOR_BUFFER_BIT) - rotation += 0.01 * delta * (window_size.x / 2 - mouse_pos.x) / window_size.x + rotation -= 0.01 * delta * mouse_rel.x mat: Mat3 = 1 mat *= mat3_projection(canvas_size) diff --git a/example/setup.js b/example/setup.js index 9485957..4475006 100644 --- a/example/setup.js +++ b/example/setup.js @@ -150,7 +150,7 @@ const dpr = window.devicePixelRatio || 1 function updateCanvasSize() { const rect = canvas.getBoundingClientRect() - canvas.width = rect.width * dpr + canvas.width = rect.width * dpr canvas.height = rect.height * dpr exports.on_window_resize( window.innerWidth, diff --git a/example/setup.odin b/example/setup.odin index 3793e04..7aa9d6e 100644 --- a/example/setup.odin +++ b/example/setup.odin @@ -12,6 +12,7 @@ canvas_pos: [2]f32 canvas_size: [2]f32 window_size: [2]f32 mouse_pos: [2]f32 +mouse_rel: [2]f32 // Relative mouse position -0.5 to 0.5 dpr: f32 aspect_ratio: f32 @@ -113,6 +114,7 @@ main :: proc() { on_mouse_move :: proc(e: dom.Event) { mouse_pos = cast_vec2(f32, e.data.mouse.client) + mouse_rel = (mouse_pos - window_size / 2) / window_size } on_wheel :: proc(e: dom.Event) { scale -= f32(e.data.wheel.delta.y) * 0.001 diff --git a/main.js b/main.js index 5d4758e..f423ef3 100644 --- a/main.js +++ b/main.js @@ -7,17 +7,17 @@ TODO: */ -import * as fs from "node:fs" -import * as fsp from "node:fs/promises" -import * as path from "node:path" -import * as url from "node:url" -import * as http from "node:http" -import * as process from "node:process" -import * as child_process from "node:child_process" -import * as chokidar from "chokidar" -import * as ws from "ws" -import * as rollup from "rollup" -import * as swc from "@swc/core" +import fs from "node:fs" +import fsp from "node:fs/promises" +import path from "node:path" +import url from "node:url" +import http from "node:http" +import process from "node:process" +import child_process from "node:child_process" +import * as chokidar from "chokidar" +import * as ws from "ws" +import * as rollup from "rollup" +import * as swc from "@swc/core" import { DIST_DIRNAME, CONFIG_FILENAME, HTTP_PORT, MESSAGE_RELOAD, PACKAGE_DIRNAME, PLAYGROUND_DIRNAME,