started experimenting with textures
authorBrendan Hansen <brendan.f.hansen@gmail.com>
Fri, 11 Sep 2020 03:20:45 +0000 (22:20 -0500)
committerBrendan Hansen <brendan.f.hansen@gmail.com>
Fri, 11 Sep 2020 03:20:45 +0000 (22:20 -0500)
js/webgl.js
res/smile.data [new file with mode: 0644]
src/gfx/quad_renderer.onyx
src/main.onyx
src/shaders/basic.frag
src/shaders/basic.vert

index a8e727dfe49a8d57dfba92324069d7819a647e48..6a496071ecf64d628c26074129cb0fb63184aaa5 100644 (file)
@@ -242,7 +242,7 @@ WebGl_Wasm = {
     stencilOp(fail, zfail, mask) { this.gl.stencilOp(fail, zfail, mask); },
     stencilOpSeparate(face, fail, zfail, zpass) { this.gl.stencilOpSeparate(face, fail, zfail, zpass); },
     texImage2D(target, level, internalforamt, width, height, border, format, type, pixels, pixelslen) {
-        const data = new DataView(WASM_MEMORY.buffer, pixels, pixelslen);
+        const data = new Uint8Array(WASM_MEMORY.buffer, pixels, pixelslen);
         this.gl.texImage2D(target, level, internalforamt, width, height, border, format, type, data);
     },
     texParameterf(target, pname, param) { this.gl.texParameterf(target, pname, param); },
diff --git a/res/smile.data b/res/smile.data
new file mode 100644 (file)
index 0000000..0446344
Binary files /dev/null and b/res/smile.data differ
index ad3fddb6d4e6784251185941f4090805e51eaeec..1bd9c203507c6a099594bedef9cff747bf49fa89 100644 (file)
@@ -28,6 +28,12 @@ Quad :: struct {
     use pos : Vec2;
     w : f32 = 0.0f;
     h : f32 = 0.0f;
+
+    u : f32 = 0.0f;
+    v : f32 = 0.0f;
+    tw : f32 = 0.0f;
+    th : f32 = 0.0f;
+
     r : f32 = 0.0f;
     g : f32 = 0.0f;
     b : f32 = 0.0f;
@@ -62,6 +68,10 @@ quad_renderer_init :: proc (use qr: ^QuadRenderer, initial_quads := 10) {
     default_quad.pos = Vec2.{ 0.0f, 0.0f };
     default_quad.w = 0.0f;
     default_quad.h = 0.0f;
+    default_quad.u = 0.0f;
+    default_quad.v = 0.0f;
+    default_quad.tw = 0.0f;
+    default_quad.th = 0.0f;
     default_quad.r = 0.0f;
     default_quad.g = 0.0f;
     default_quad.b = 0.0f;
@@ -80,12 +90,18 @@ quad_renderer_init :: proc (use qr: ^QuadRenderer, initial_quads := 10) {
     gl.enableVertexAttribArray(1);
     gl.enableVertexAttribArray(2);
     gl.enableVertexAttribArray(3);
+    gl.enableVertexAttribArray(4);
+    gl.enableVertexAttribArray(5);
     gl.vertexAttribDivisor(1, 1);
     gl.vertexAttribDivisor(2, 1);
     gl.vertexAttribDivisor(3, 1);
+    gl.vertexAttribDivisor(4, 1);
+    gl.vertexAttribDivisor(5, 1);
     gl.vertexAttribPointer(1, 2, gl.FLOAT, false, sizeof Quad, 0);
     gl.vertexAttribPointer(2, 2, gl.FLOAT, false, sizeof Quad, 2 * sizeof f32);
-    gl.vertexAttribPointer(3, 4, gl.FLOAT, false, sizeof Quad, 4 * sizeof f32);
+    gl.vertexAttribPointer(3, 2, gl.FLOAT, false, sizeof Quad, 4 * sizeof f32);
+    gl.vertexAttribPointer(4, 2, gl.FLOAT, false, sizeof Quad, 6 * sizeof f32);
+    gl.vertexAttribPointer(5, 4, gl.FLOAT, false, sizeof Quad, 8 * sizeof f32);
     gl.bindBuffer(gl.ARRAY_BUFFER, -1);
 
     index_data : [6] gl.GLubyte;
index f8f7e3c2e12524f68599060713d996153d5d659c..76154fab7f6d24415b47e9f8646b1490aec686d5 100644 (file)
@@ -89,6 +89,8 @@ update :: proc (use gs: ^GameState) {
 
         w = 0.05f, h = 0.05f,
 
+        u = 0.25f, v = 0.25f, tw = 0.25f, th = 0.25f,
+
         r = 1.0f, g = 0.0f, b = 0.0f, a = 0.5f,
     });
 
@@ -96,7 +98,9 @@ update :: proc (use gs: ^GameState) {
         x = player.x,
         y = player.y,
 
-        w = 0.025f, h = 0.025f,
+        w = 0.1f, h = 0.1f,
+
+        u = 0.0f, v = 0.0f, tw = 1.0f, th = 1.0f,
 
         r = 0.0f, g = 0.0f, b = 1.0f, a = 1.0f
     });
@@ -125,18 +129,28 @@ main :: proc (args: [] cstring) {
         return;
     }
 
+
     gl.enable(gl.CULL_FACE);
     gl.cullFace(gl.BACK);
 
     gl.enable(gl.BLEND);
     gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
 
+
     gs := cast(^GameState) calloc(sizeof GameState);
 
     gs.player.pos = Vec2.{ 0.0f, 0.0f };
 
     quad_renderer_init(^gs.quad_renderer, NUM_QUADS);
 
+    image_data := string.{ data = #file_contents "res/smile.data", count = 32 * 32 * 3 };
+    texture := gl.createTexture();
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 32, 32, 0, gl.RGB, gl.UNSIGNED_BYTE, image_data);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+
     event.init();
     input.init(^gs.input_state);
 
index c32ab08f8bfc1f3855453ad35d14124f7f08abcc..0d9552fa95d6a29fdddf4b3d7230603a3410ce18 100644 (file)
@@ -2,10 +2,13 @@
 
 precision mediump float;
 
+uniform sampler2D tex;
+
+in vec2 v_tex_pos;
 in vec4 v_col;
 
 out vec4 fragColor;
 
 void main() {
-       fragColor = v_col;
+       fragColor = v_col * texture(tex, v_tex_pos);
 }
index e73ac2579adda0e11553626c57b1fc12f2bf60fd..f467066df068ed54cf6c2cc61eae585cb418be5b 100644 (file)
@@ -1,15 +1,23 @@
 #version 300 es
 
+// Per Vertex
 layout(location = 0) in vec2 a_vert_pos;
+
+// Per Quad
 layout(location = 1) in vec2 a_pos;
 layout(location = 2) in vec2 a_size;
-layout(location = 3) in vec4 a_col;
+layout(location = 3) in vec2 a_tex_pos;
+layout(location = 4) in vec2 a_tex_size;
+layout(location = 5) in vec4 a_col;
 
 uniform mat3 u_proj;
 
+out vec2 v_tex_pos;
 out vec4 v_col;
 
 void main() {
        gl_Position = vec4(u_proj * vec3(a_vert_pos * a_size + a_pos, 1), 1);
     v_col = a_col;
+
+    v_tex_pos = a_tex_pos + a_vert_pos * a_tex_size;
 }