Move clip-space projection to odin code

example/index.js

@@ -29,6 +29,13 @@ const src_instance = await wasm.fetchInstanciateWasm(WASM_FILENAME, {
 wasm.initWasmState(wasm_state, src_instance)
 const exports = /** @type {t.WasmExports} */ (wasm_state.exports)
 
+if (IS_DEV) {
+	// eslint-disable-next-line no-console
+	console.log("WASM exports:", exports)
+	// eslint-disable-next-line no-console
+	console.log("WASM memory:", exports.memory)
+}
+
 exports._start()
 const odin_ctx = exports.default_context_ptr()
 exports._end()

example/main.odin

@@ -28,7 +28,6 @@ rotation: f32 = 0
 
 a_position: i32
 a_color: i32
-u_resolution: i32
 u_matrix: i32
 
 positions_buffer: webgl.Buffer
@@ -79,7 +78,6 @@ main :: proc() {
 
 	a_position = webgl.GetAttribLocation(program, "a_position")
 	a_color = webgl.GetAttribLocation(program, "a_color")
-	u_resolution = webgl.GetUniformLocation(program, "u_resolution")
 	u_matrix = webgl.GetUniformLocation(program, "u_matrix")
 
 	webgl.EnableVertexAttribArray(a_position)
@@ -123,13 +121,13 @@ frame :: proc "c" (delta: i32, ctx: ^runtime.Context) {
 	box_size: [2]f32 = {160, 100}
 	// odinfmt: disable
 	positions := [?]f32 {
-		 0,           0,
-		 box_size.x,  0,
-		 0,           box_size.y,
+		0,           0,
+		box_size.x,  0,
+		0,           box_size.y,
 
-		 0,           box_size.y,
-		 box_size.x,  0,
-		 box_size.x,  box_size.y,
+		0,           box_size.y,
+		box_size.x,  0,
+		box_size.x,  box_size.y,
 	}
 	// odinfmt: enable
 
@@ -142,15 +140,14 @@ frame :: proc "c" (delta: i32, ctx: ^runtime.Context) {
 	webgl.BufferDataSlice(webgl.ARRAY_BUFFER, colors[:], webgl.STATIC_DRAW)
 	webgl.VertexAttribPointer(a_color, 4, webgl.UNSIGNED_BYTE, true, 0, 0)
 
-	webgl.Uniform2f(u_resolution, canvas_size.x, canvas_size.y)
-
 	webgl.Viewport(0, 0, res.x, res.y)
 	webgl.ClearColor(0, 0.01, 0.02, 0)
 	webgl.Clear(webgl.COLOR_BUFFER_BIT)
 
 
 	rotation += 0.01 * f32(delta) * (window_size.x / 2 - mouse_pos.x) / window_size.x
 	mat :=
+		mat3_projection(canvas_size) *
 		mat3_translate(mouse_pos - canvas_pos) *
 		mat3_scale({scale, scale}) *
 		mat3_rotate(rotation) *
@@ -196,4 +193,12 @@ mat3_rotate :: proc "contextless" (angle: f32) -> glm.mat3 {
 		 0, 0, 1,
 	}
 }
+@(require_results)
+mat3_projection :: proc "contextless" (size: [2]f32) -> glm.mat3 {
+	return {
+		2/size.x, 0,       -1,
+		0,       -2/size.y, 1,
+		0,        0,        1,
+	}
+}
 // odinfmt: enable

example/shader_vertex.glsl

@@ -2,20 +2,15 @@
 attribute vec2 a_position;
 attribute vec4 a_color;
 
-uniform vec2 u_resolution;
 uniform mat3 u_matrix;
 
 // color to pass to the fragment shader
 // value in fragment shader will be interpolated
 varying vec4 v_color;
 
 void main() {
-	vec2 pos = (u_matrix * vec3(a_position, 1)).xy;
-
-    // from pixels to 0->1 then to 0->2 then to -1->+1 (clipspace)
-	vec2 clip_space = (pos / u_resolution) * 2.0 - 1.0;
-
-	gl_Position = vec4(clip_space * vec2(1, -1), 0, 1);
+	// Multiply the position by the matrix.
+	gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
 
 	v_color = a_color;
 }