WebGL rendering now partially works

examples/web/minimal.odin

@@ -21,7 +21,7 @@ main :: proc() {
 	context.logger = log.create_console_logger()
 	default_context = context
 
-	k2.init(1080, 1080, "Karl2D Minimal Program")
+	k2.init(1000, 1000, "Karl2D Minimal Program", {.Resizable})
 	//7k2.set_window_position(300, 100)
 	tex = k2.load_texture_from_bytes(#load("sixten.jpg"),)
 

karl2d.odin

@@ -76,11 +76,11 @@ init :: proc(window_width: int, window_height: int, window_title: string,
 	rb_alloc_error: runtime.Allocator_Error
 	s.rb_state, rb_alloc_error = mem.alloc(rb.state_size(), allocator = allocator)
 	log.assertf(rb_alloc_error == nil, "Failed allocating memory for rendering backend: %v", rb_alloc_error)
-	s.proj_matrix = make_default_projection(window_width, window_height)
+	s.proj_matrix = make_default_projection(win.get_width(), win.get_height())
 	s.view_matrix = 1
 
 	// Boot up the render backend. It will render into our previously created window.
-	rb.init(s.rb_state, s.window, window_width, window_height, allocator)
+	rb.init(s.rb_state, s.window, win.get_width(), win.get_height(), allocator)
 
 	// The vertex buffer is created in a render backend-independent way. It is passed to the
 	// render backend each frame as part of `draw_current_batch()`

render_backend_gl.odin

@@ -167,9 +167,7 @@ gl_draw :: proc(
 	case .Premultiplied_Alpha: gl.BlendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)
 	}
 
-	gl.EnableVertexAttribArray(0)
-	gl.EnableVertexAttribArray(1)
-	gl.EnableVertexAttribArray(2)
+	gl.BindVertexArray(gl_shd.vao)
 
 	gl.UseProgram(gl_shd.program)
 	assert(len(shd.constants) == len(gl_shd.constants))
@@ -787,10 +785,11 @@ gl_translate_pixel_format :: proc(f: Pixel_Format) -> i32 {
 	case .RG_32_Float: return gl.RG
 	case .R_32_Float: return gl.R
 
-	case .RGBA_8_Norm: return gl.RGBA8_SNORM
-	case .RG_8_Norm: return gl.RG8_SNORM
-	case .R_8_Norm: return gl.R8_SNORM
-	case .R_8_UInt: return gl.R8_SNORM
+	// THIS SEEMS WRONG -- Am I putting the 8 bit info in the wrong place?
+	case .RGBA_8_Norm: return gl.RGBA
+	case .RG_8_Norm: return gl.RG
+	case .R_8_Norm: return gl.R
+	case .R_8_UInt: return gl.R
 
 	case .Unknown: fallthrough
 	case: log.error("Unhandled pixel format %v", f) 

render_backend_webgl.odin

@@ -142,7 +142,7 @@ webgl_clear :: proc(render_texture: Render_Target_Handle, color: Color) {
 }
 
 webgl_present :: proc() {
-	// The browser flips the backbuffer for you
+	// The browser flips the backbuffer for you when 'step' ends
 }
 
 webgl_draw :: proc(
@@ -164,9 +164,7 @@ webgl_draw :: proc(
 	case .Premultiplied_Alpha: gl.BlendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)
 	}
 
-	gl.EnableVertexAttribArray(0)
-	gl.EnableVertexAttribArray(1)
-	gl.EnableVertexAttribArray(2)
+	gl.BindVertexArray(gl_shd.vao)
 
 	gl.UseProgram(gl_shd.program)
 	assert(len(shd.constants) == len(gl_shd.constants))
@@ -204,27 +202,27 @@ webgl_draw :: proc(
 			case gl.FLOAT_VEC2:
 				gl.Uniform2f(loc, fptr[0], fptr[1])
 			case gl.FLOAT_MAT2:
-				gl.UniformMatrix2fv(loc, la.transpose((^matrix[2,2]f32)(ptr)^))
+				gl.UniformMatrix2fv(loc, (^matrix[2,2]f32)(ptr)^)
 			case gl.FLOAT_MAT2x3:
-				gl.UniformMatrix2x3fv(loc, la.transpose((^matrix[2,3]f32)(ptr)^))
+				gl.UniformMatrix2x3fv(loc, (^matrix[3,2]f32)(ptr)^)
 			case gl.FLOAT_MAT2x4:
-				gl.UniformMatrix2x4fv(loc, la.transpose((^matrix[2,4]f32)(ptr)^))
+				gl.UniformMatrix2x4fv(loc, (^matrix[4,2]f32)(ptr)^)
 
 			case gl.FLOAT_VEC3:
 				gl.Uniform3f(loc, fptr[0], fptr[1], fptr[2])
 			case gl.FLOAT_MAT3x2:
-				gl.UniformMatrix3x2fv(loc, la.transpose((^matrix[3,2]f32)(ptr)^))
+				gl.UniformMatrix3x2fv(loc, (^matrix[2,3]f32)(ptr)^)
 			case gl.FLOAT_MAT3:
-				gl.UniformMatrix3fv(loc, la.transpose((^matrix[3,3]f32)(ptr)^))
+				gl.UniformMatrix3fv(loc, (^matrix[3,3]f32)(ptr)^)
 			case gl.FLOAT_MAT3x4:
-				gl.UniformMatrix3x4fv(loc, la.transpose((^matrix[3,4]f32)(ptr)^))
+				gl.UniformMatrix3x4fv(loc, (^matrix[4,3]f32)(ptr)^)
 
 			case gl.FLOAT_VEC4:
 				gl.Uniform4f(loc, fptr[0], fptr[1], fptr[2], fptr[3])
 			case gl.FLOAT_MAT4x2:
-				gl.UniformMatrix4x2fv(loc, la.transpose((^matrix[4,2]f32)(ptr)^))
+				gl.UniformMatrix4x2fv(loc, (^matrix[2,4]f32)(ptr)^)
 			case gl.FLOAT_MAT4x3:
-				gl.UniformMatrix4x3fv(loc, la.transpose((^matrix[4,3]f32)(ptr)^))
+				gl.UniformMatrix4x3fv(loc, (^matrix[3,4]f32)(ptr)^)
 			case gl.FLOAT_MAT4:
 				gl.UniformMatrix4fv(loc, (^matrix[4,4]f32)(ptr)^)
 
@@ -251,7 +249,7 @@ webgl_draw :: proc(
 			
 		}
 	}
-	
+
 	gl.BindBuffer(gl.ARRAY_BUFFER, s.vertex_buffer_gpu)
 	gl.BufferDataSlice(gl.ARRAY_BUFFER, vertex_buffer, gl.DYNAMIC_DRAW)
 
@@ -271,7 +269,6 @@ webgl_draw :: proc(
 		}
 	}
 
-	// IS THE TYPE WRONG HERE? Should it be i32?
 	gl.DrawArrays(gl.TRIANGLES, 0, int(len(vertex_buffer)/shd.vertex_size))
 }
 

window_js.odin

@@ -44,6 +44,37 @@ js_init :: proc(
 	s = (^JS_State)(window_state)
 	s.allocator = allocator
 	s.canvas_id = "webgl-canvas"
+
+	// The browser window probably has some other size than what was sent in.
+	if .Resizable in flags {
+		js.add_window_event_listener(.Resize, nil, js_window_event_resize, true)
+		update_canvas_size(s.canvas_id)
+	} else {
+		set_window_size(window_width, window_height)
+	}
+}
+
+js_window_event_resize :: proc(e: js.Event) {
+	update_canvas_size(s.canvas_id)
+}
+
+update_canvas_size :: proc(canvas_id: HTML_Canvas_ID) {
+	rect := js.get_bounding_client_rect(canvas_id)
+	dpi := js.device_pixel_ratio()
+
+	width := f64(rect.width) * dpi
+	height := f64(rect.height) * dpi
+
+	js.set_element_key_f64(canvas_id, "width", width)
+	js.set_element_key_f64(canvas_id, "height", height)
+
+	s.width = int(width)
+	s.height = int(height)
+
+	append(&s.events, Window_Event_Resize {
+		width = int(width),
+		height = int(height),
+	})
 }
 
 js_shutdown :: proc() {
@@ -58,18 +89,19 @@ js_process_events :: proc() {
 }
 
 js_get_events :: proc() -> []Window_Event {
-	return {}
+	return s.events[:]
 }
 
 js_get_width :: proc() -> int {
-	return 1080
+	return s.width
 }
 
 js_get_height :: proc() -> int {
-	return 1080
+	return s.height
 }
 
 js_clear_events :: proc() {
+	runtime.clear(&s.events)
 }
 
 js_set_position :: proc(x: int, y: int) {
@@ -77,6 +109,12 @@ js_set_position :: proc(x: int, y: int) {
 }
 
 js_set_size :: proc(w, h: int) {
+	dpi := js.device_pixel_ratio()
+
+	width := f64(w) * dpi
+	height := f64(h) * dpi
+	js.set_element_key_f64(s.canvas_id, "width", width)
+	js.set_element_key_f64(s.canvas_id, "height", height)
 }
 
 js_get_window_scale :: proc() -> f32 {
@@ -116,6 +154,9 @@ js_set_internal_state :: proc(state: rawptr) {
 JS_State :: struct {
 	allocator: runtime.Allocator,
 	canvas_id: HTML_Canvas_ID,
+	width: int,
+	height: int,
+	events: [dynamic]Window_Event,
 }
 
 s: ^JS_State