get instancing somewhat working

src/arbtri.jai

@@ -104,6 +104,8 @@ debug_arb_flush : bool : false;
 layer : s32  = 0;
 
 flush_arb_commands :: () {
+    sfons_flush(state.fons); // All the text has been drawn, now flush it to the atlas.
+
     layer = 0;
     if debug_arb_flush then print(" --- !BEGIN FLUSH! ---- \n");
     for arbTriState.command_list {

src/camera.jai

@@ -0,0 +1,44 @@
+Camera :: struct {
+	fov: float = 75.0 * 3.141 / 180.0;
+	near: float = 1.0;
+	far: float = 20.0;
+	position: Vector3 = .{3, 3, 3};
+	target: Vector3 = .{0, 0, 0};
+}
+
+create_perspective :: (camera: *Camera) -> Matrix4 {
+
+	w, h: s32 = get_window_size();
+    
+
+	num : float = 1.0 / tan(camera.fov * 0.5);
+
+	aspect := w / cast(float)h;
+	
+	return .{
+		num / aspect, 0, 0, 0,
+		0, num, 0, 0,
+		0, 0, camera.far / (camera.near - camera.far), -1,
+		0, 0, (camera.near * camera.far) / (camera.near - camera.far), 0
+	};
+}
+
+create_lookat :: (camera: *Camera) -> Matrix4 {
+	up: Vector3 = .{0, 1, 0};
+	targetToPos := camera.position - camera.target;
+	A := normalize(targetToPos);
+	B := normalize(cross(up, A));
+	C := cross(A, B);
+
+	return .{
+		B.x, C.x, A.x, 0,
+		B.y, C.y, A.y, 0,
+		B.z, C.z, A.z, 0,
+		-dot(B, camera.position), -dot(C, camera.position), -dot(A, camera.position), 1
+	};
+}
+
+// TODO: maybe later don't pass in the whole context, but only the width and height.
+create_viewproj :: (camera: *Camera) -> Matrix4 {
+	return create_lookat(camera) * create_perspective(camera);
+}

src/editor/console.jai

@@ -78,6 +78,7 @@ draw_console :: (theme: *GR.Overall_Theme) {
     if a & .ENTERED {
         array_add(*console_report, copy_string(tprint("> %", new)));
         state.text = console_input_start;
+        array_add(*console_report, "Unknown command.");
     }
 
     for < console_report {

src/main.jai

@@ -10,12 +10,11 @@ stbi :: #import "stb_image";
 #load "arbtri.jai";
 #load "events.jai";
 #load "load.jai";
-#load "./shaders/jai/shader_triangle.jai";
+#load "camera.jai";
 
 last_frame_time : float64;
 delta\    _time : float64;
 
-
 V_MAJOR :: 0;
 V_MINOR :: 2;
 
@@ -80,6 +79,8 @@ init_after_mandatory_loads :: () {
     init_ui();
 }
 
+cam : Camera;
+
 frame :: () {
 
     delta_time = get_time() - last_frame_time;
@@ -107,13 +108,34 @@ frame :: () {
     sgl_ortho(0.0, sapp_widthf(), sapp_heightf(), 0.0, -1.0, +1.0);
 
     tick_ui();
-    render_ui();
 
-    // UI Pass:
+    mvp := create_viewproj(*cam);
+    vs_params : Vs_Params;
+    vs_params.mvp = mvp.floats;
+
+    test : [2]Trixel_Instance;
+    test[0].pos[0] = 0.0;
+    test[0].pos[1] = 0.0;
+    test[0].pos[2] = 0.0;
+    test[0].pos[3] = 1.0;
+    test[1].pos[0] = 1.0;
+    test[1].pos[1] = 0.0;
+    test[1].pos[2] = 0.0;
+    test[1].pos[3] = 1.0;
+
+    sg_update_buffer(gPipelines.trixel.bind.storage_buffers[0], *(sg_range.{
+        ptr = test.data,
+        size = size_of(type_of(test)),
+    }));
+
     sg_begin_pass(*(sg_pass.{ action = state.pass_action_clear, swapchain = cast,force(sg_swapchain) sglue_swapchain() }));
-        arb_tri_flush();
+    sg_apply_pipeline(gPipelines.trixel.pipeline);
+    sg_apply_bindings(*gPipelines.trixel.bind);
+    sg_apply_uniforms(UB_vs_params, *(sg_range.{ ptr = *vs_params, size = size_of(type_of(vs_params)) }));
+    sg_draw(0, 36, 2);
     sg_end_pass();
-    sg_commit();
+
+    ui_pass();
     
     input_per_frame_event_and_flag_update();
     reset_temporary_storage();

src/pipelines.jai

@@ -1,18 +1,104 @@
+#load "./shaders/jai/shader_triangle.jai";
+#load "./shaders/jai/shader_trixel.jai";
+
 Pipeline_Binding :: struct {
     pipeline : sg_pipeline;
     bind     : sg_bindings;
 }
 
 gPipelines : struct {
+
+    // Arbitrary triangle rendering for rendering 2D things on the screen.
+    // Used for UI rendering.
     arbtri : Pipeline_Binding;
+    
+    // Trixel rendering. Used for Trile editor rendering, in-game triles are rendered from
+    // generated meshes.
+    trixel : Pipeline_Binding;
+
 }
 
 create_pipelines :: () {
     create_arbtri_pipeline();
+    create_trixel_pipeline();
 }
 
+TRIXEL_SIZE_HALF : float : 1.0/2.0;
+
 gArbtriMem : [100000*3*9]float;
 
+create_trixel_pipeline :: () {
+    pipeline: sg_pipeline_desc;
+    shader_desc := trixel_shader_desc(sg_query_backend());
+    pipeline.shader = sg_make_shader(*shader_desc);
+    pipeline.layout.buffers[0].stride = 4*3;
+    
+    pipeline.layout.attrs[ATTR_trixel_position] = .{ format = .FLOAT3 };
+    pipeline.index_type = .UINT16;
+
+    color_state := sg_color_target_state.{
+        pixel_format = .RGBA8,
+        blend = .{
+            enabled = true,
+            src_factor_rgb = .SRC_ALPHA,
+            dst_factor_rgb = .ONE_MINUS_SRC_ALPHA
+        }
+    };
+
+    verts : [24] Vector3;
+	verts[0] = .{ -TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF };
+	verts[1] = .{ TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF  };
+	verts[2] = .{ TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF   };
+	verts[3] = .{ -TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF  };
+
+	verts[4] = .{ -TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF  };
+	verts[5] = .{ TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF   };
+	verts[6] = .{ TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF    };
+	verts[7] = .{ -TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF   };
+
+	verts[8] =  .{ -TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF };
+	verts[9] =  .{ -TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF  };
+	verts[10] = .{ -TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF   };
+	verts[11] = .{ -TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF  };
+
+	verts[12] = .{ TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF };
+	verts[13] = .{ TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF  };
+	verts[14] = .{ TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF   };
+	verts[15] = .{ TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF  };
+
+	verts[16] = .{ -TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF };
+	verts[17] = .{ -TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF  };
+	verts[18] = .{ TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF   };
+	verts[19] = .{ TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF  };
+
+	verts[20] = .{ -TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF  };
+	verts[21] = .{ -TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF   };
+	verts[22] = .{ TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF    };
+	verts[23] = .{ TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF   };
+
+	indices: [] u16 = .[
+		0, 1, 2, 0, 2, 3,
+		4, 5, 6, 4, 6, 7,
+		8, 9, 10, 8, 10, 11,
+		12, 13, 14, 12, 14, 15,
+		16, 17, 18, 16, 18, 19,
+		20, 21, 22, 20, 22, 23
+	];
+    
+    pipeline.color_count = 1;
+    pipeline.colors[0]   = color_state;
+
+    gPipelines.trixel.pipeline = sg_make_pipeline(*pipeline);
+    
+    ibuffer         := sg_buffer_desc.{ type = .INDEXBUFFER, data = .{ ptr = indices.data, size = 36 * 2 } };
+    vbuffer         := sg_buffer_desc.{ data = .{ ptr = verts.data, size = 24 * 3 * 4 } };
+    instance_buffer := sg_buffer_desc.{ type = .STORAGEBUFFER, size = 4096 * size_of(Vector4)};
+
+    gPipelines.trixel.bind.index_buffer       = sg_make_buffer(*ibuffer);
+    gPipelines.trixel.bind.vertex_buffers[0]  = sg_make_buffer(*vbuffer);
+    gPipelines.trixel.bind.storage_buffers[0] = sg_make_buffer(*instance_buffer);
+}
+
 create_arbtri_pipeline :: () {
     pipeline: sg_pipeline_desc;
     shader_desc := triangle_shader_desc(sg_query_backend());

src/platform_specific/common.jai

@@ -36,6 +36,7 @@ sapp_init :: () {
         window_title = wi.title,
         // icon = .{ sokol_default = true },
         logger = .{ func = slog_func },
+        sample_count = 4,
     }));
 }
 

src/shaders/compile_shaders.sh

@@ -1,3 +1,5 @@
+rm -rf .jai
+
 for filename in *.glsl; do
     if [ -f "$filename" ]; then
       ./sokol-shdc -i "$filename" -o "./jai/${filename/.glsl/.jai}" -l glsl430:glsl300es -f sokol_jai

src/shaders/jai/shader_trixel.jai

@@ -0,0 +1,233 @@
+/*
+    #version:1# (machine generated, don't edit!)
+
+    Generated by sokol-shdc (https://github.com/floooh/sokol-tools)
+
+    Cmdline:
+        sokol-shdc -i shader_trixel.glsl -o ./jai/shader_trixel.jai -l glsl430:glsl300es -f sokol_jai
+
+    Overview:
+    =========
+    Shader program: 'trixel':
+        Get shader desc: trixel_shader_desc(sg_query_backend())
+        Vertex Shader: vs_trixel
+        Fragment Shader: fs_trixel
+        Attributes:
+            ATTR_trixel_position => 0
+    Bindings:
+        Uniform block 'vs_params':
+            Jai struct: Vs_Params
+            Bind slot: UB_vs_params => 0
+        Storage buffer 'instances':
+            Jai struct: Trixel_Instance
+            Bind slot: SBUF_instances => 0
+            Readonly: true
+*/
+ATTR_trixel_position :: 0;
+UB_vs_params :: 0;
+SBUF_instances :: 0;
+Vs_Params :: struct {
+    mvp: [16]float;
+};
+Trixel_Instance :: struct {
+    pos: [4]float;
+}
+/*
+    #version 430
+
+    struct trixel_instance
+    {
+        vec4 pos;
+    };
+
+    layout(binding = 0, std430) readonly buffer instances
+    {
+        trixel_instance inst[];
+    } _15;
+
+    uniform vec4 vs_params[4];
+    layout(location = 0) in vec4 position;
+    layout(location = 0) out vec4 color;
+
+    void main()
+    {
+        gl_Position = mat4(vs_params[0], vs_params[1], vs_params[2], vs_params[3]) * vec4(position.xyz + _15.inst[gl_InstanceID].pos.xyz, 1.0);
+        color = vec4(_15.inst[gl_InstanceID].pos.xyz, 1.0);
+    }
+
+*/
+vs_trixel_source_glsl430 := u8.[
+    0x23,0x76,0x65,0x72,0x73,0x69,0x6f,0x6e,0x20,0x34,0x33,0x30,0x0a,0x0a,0x73,0x74,
+    0x72,0x75,0x63,0x74,0x20,0x74,0x72,0x69,0x78,0x65,0x6c,0x5f,0x69,0x6e,0x73,0x74,
+    0x61,0x6e,0x63,0x65,0x0a,0x7b,0x0a,0x20,0x20,0x20,0x20,0x76,0x65,0x63,0x34,0x20,
+    0x70,0x6f,0x73,0x3b,0x0a,0x7d,0x3b,0x0a,0x0a,0x6c,0x61,0x79,0x6f,0x75,0x74,0x28,
+    0x62,0x69,0x6e,0x64,0x69,0x6e,0x67,0x20,0x3d,0x20,0x30,0x2c,0x20,0x73,0x74,0x64,
+    0x34,0x33,0x30,0x29,0x20,0x72,0x65,0x61,0x64,0x6f,0x6e,0x6c,0x79,0x20,0x62,0x75,
+    0x66,0x66,0x65,0x72,0x20,0x69,0x6e,0x73,0x74,0x61,0x6e,0x63,0x65,0x73,0x0a,0x7b,
+    0x0a,0x20,0x20,0x20,0x20,0x74,0x72,0x69,0x78,0x65,0x6c,0x5f,0x69,0x6e,0x73,0x74,
+    0x61,0x6e,0x63,0x65,0x20,0x69,0x6e,0x73,0x74,0x5b,0x5d,0x3b,0x0a,0x7d,0x20,0x5f,
+    0x31,0x35,0x3b,0x0a,0x0a,0x75,0x6e,0x69,0x66,0x6f,0x72,0x6d,0x20,0x76,0x65,0x63,
+    0x34,0x20,0x76,0x73,0x5f,0x70,0x61,0x72,0x61,0x6d,0x73,0x5b,0x34,0x5d,0x3b,0x0a,
+    0x6c,0x61,0x79,0x6f,0x75,0x74,0x28,0x6c,0x6f,0x63,0x61,0x74,0x69,0x6f,0x6e,0x20,
+    0x3d,0x20,0x30,0x29,0x20,0x69,0x6e,0x20,0x76,0x65,0x63,0x34,0x20,0x70,0x6f,0x73,
+    0x69,0x74,0x69,0x6f,0x6e,0x3b,0x0a,0x6c,0x61,0x79,0x6f,0x75,0x74,0x28,0x6c,0x6f,
+    0x63,0x61,0x74,0x69,0x6f,0x6e,0x20,0x3d,0x20,0x30,0x29,0x20,0x6f,0x75,0x74,0x20,
+    0x76,0x65,0x63,0x34,0x20,0x63,0x6f,0x6c,0x6f,0x72,0x3b,0x0a,0x0a,0x76,0x6f,0x69,
+    0x64,0x20,0x6d,0x61,0x69,0x6e,0x28,0x29,0x0a,0x7b,0x0a,0x20,0x20,0x20,0x20,0x67,
+    0x6c,0x5f,0x50,0x6f,0x73,0x69,0x74,0x69,0x6f,0x6e,0x20,0x3d,0x20,0x6d,0x61,0x74,
+    0x34,0x28,0x76,0x73,0x5f,0x70,0x61,0x72,0x61,0x6d,0x73,0x5b,0x30,0x5d,0x2c,0x20,
+    0x76,0x73,0x5f,0x70,0x61,0x72,0x61,0x6d,0x73,0x5b,0x31,0x5d,0x2c,0x20,0x76,0x73,
+    0x5f,0x70,0x61,0x72,0x61,0x6d,0x73,0x5b,0x32,0x5d,0x2c,0x20,0x76,0x73,0x5f,0x70,
+    0x61,0x72,0x61,0x6d,0x73,0x5b,0x33,0x5d,0x29,0x20,0x2a,0x20,0x76,0x65,0x63,0x34,
+    0x28,0x70,0x6f,0x73,0x69,0x74,0x69,0x6f,0x6e,0x2e,0x78,0x79,0x7a,0x20,0x2b,0x20,
+    0x5f,0x31,0x35,0x2e,0x69,0x6e,0x73,0x74,0x5b,0x67,0x6c,0x5f,0x49,0x6e,0x73,0x74,
+    0x61,0x6e,0x63,0x65,0x49,0x44,0x5d,0x2e,0x70,0x6f,0x73,0x2e,0x78,0x79,0x7a,0x2c,
+    0x20,0x31,0x2e,0x30,0x29,0x3b,0x0a,0x20,0x20,0x20,0x20,0x63,0x6f,0x6c,0x6f,0x72,
+    0x20,0x3d,0x20,0x76,0x65,0x63,0x34,0x28,0x5f,0x31,0x35,0x2e,0x69,0x6e,0x73,0x74,
+    0x5b,0x67,0x6c,0x5f,0x49,0x6e,0x73,0x74,0x61,0x6e,0x63,0x65,0x49,0x44,0x5d,0x2e,
+    0x70,0x6f,0x73,0x2e,0x78,0x79,0x7a,0x2c,0x20,0x31,0x2e,0x30,0x29,0x3b,0x0a,0x7d,
+    0x0a,0x0a,0x00,
+];
+/*
+    #version 430
+
+    layout(location = 0) out vec4 frag_color;
+    layout(location = 0) in vec4 color;
+
+    void main()
+    {
+        frag_color = color;
+    }
+
+*/
+fs_trixel_source_glsl430 := u8.[
+    0x23,0x76,0x65,0x72,0x73,0x69,0x6f,0x6e,0x20,0x34,0x33,0x30,0x0a,0x0a,0x6c,0x61,
+    0x79,0x6f,0x75,0x74,0x28,0x6c,0x6f,0x63,0x61,0x74,0x69,0x6f,0x6e,0x20,0x3d,0x20,
+    0x30,0x29,0x20,0x6f,0x75,0x74,0x20,0x76,0x65,0x63,0x34,0x20,0x66,0x72,0x61,0x67,
+    0x5f,0x63,0x6f,0x6c,0x6f,0x72,0x3b,0x0a,0x6c,0x61,0x79,0x6f,0x75,0x74,0x28,0x6c,
+    0x6f,0x63,0x61,0x74,0x69,0x6f,0x6e,0x20,0x3d,0x20,0x30,0x29,0x20,0x69,0x6e,0x20,
+    0x76,0x65,0x63,0x34,0x20,0x63,0x6f,0x6c,0x6f,0x72,0x3b,0x0a,0x0a,0x76,0x6f,0x69,
+    0x64,0x20,0x6d,0x61,0x69,0x6e,0x28,0x29,0x0a,0x7b,0x0a,0x20,0x20,0x20,0x20,0x66,
+    0x72,0x61,0x67,0x5f,0x63,0x6f,0x6c,0x6f,0x72,0x20,0x3d,0x20,0x63,0x6f,0x6c,0x6f,
+    0x72,0x3b,0x0a,0x7d,0x0a,0x0a,0x00,
+];
+/*
+    #version 300 es
+
+    struct trixel_instance
+    {
+        vec4 pos;
+    };
+
+    layout(std430) readonly buffer instances
+    {
+        trixel_instance inst[];
+    } _15;
+
+    uniform vec4 vs_params[4];
+    layout(location = 0) in vec4 position;
+    out vec4 color;
+
+    void main()
+    {
+        gl_Position = mat4(vs_params[0], vs_params[1], vs_params[2], vs_params[3]) * vec4(position.xyz + _15.inst[gl_InstanceID].pos.xyz, 1.0);
+        color = vec4(_15.inst[gl_InstanceID].pos.xyz, 1.0);
+    }
+
+*/
+vs_trixel_source_glsl300es := u8.[
+    0x23,0x76,0x65,0x72,0x73,0x69,0x6f,0x6e,0x20,0x33,0x30,0x30,0x20,0x65,0x73,0x0a,
+    0x0a,0x73,0x74,0x72,0x75,0x63,0x74,0x20,0x74,0x72,0x69,0x78,0x65,0x6c,0x5f,0x69,
+    0x6e,0x73,0x74,0x61,0x6e,0x63,0x65,0x0a,0x7b,0x0a,0x20,0x20,0x20,0x20,0x76,0x65,
+    0x63,0x34,0x20,0x70,0x6f,0x73,0x3b,0x0a,0x7d,0x3b,0x0a,0x0a,0x6c,0x61,0x79,0x6f,
+    0x75,0x74,0x28,0x73,0x74,0x64,0x34,0x33,0x30,0x29,0x20,0x72,0x65,0x61,0x64,0x6f,
+    0x6e,0x6c,0x79,0x20,0x62,0x75,0x66,0x66,0x65,0x72,0x20,0x69,0x6e,0x73,0x74,0x61,
+    0x6e,0x63,0x65,0x73,0x0a,0x7b,0x0a,0x20,0x20,0x20,0x20,0x74,0x72,0x69,0x78,0x65,
+    0x6c,0x5f,0x69,0x6e,0x73,0x74,0x61,0x6e,0x63,0x65,0x20,0x69,0x6e,0x73,0x74,0x5b,
+    0x5d,0x3b,0x0a,0x7d,0x20,0x5f,0x31,0x35,0x3b,0x0a,0x0a,0x75,0x6e,0x69,0x66,0x6f,
+    0x72,0x6d,0x20,0x76,0x65,0x63,0x34,0x20,0x76,0x73,0x5f,0x70,0x61,0x72,0x61,0x6d,
+    0x73,0x5b,0x34,0x5d,0x3b,0x0a,0x6c,0x61,0x79,0x6f,0x75,0x74,0x28,0x6c,0x6f,0x63,
+    0x61,0x74,0x69,0x6f,0x6e,0x20,0x3d,0x20,0x30,0x29,0x20,0x69,0x6e,0x20,0x76,0x65,
+    0x63,0x34,0x20,0x70,0x6f,0x73,0x69,0x74,0x69,0x6f,0x6e,0x3b,0x0a,0x6f,0x75,0x74,
+    0x20,0x76,0x65,0x63,0x34,0x20,0x63,0x6f,0x6c,0x6f,0x72,0x3b,0x0a,0x0a,0x76,0x6f,
+    0x69,0x64,0x20,0x6d,0x61,0x69,0x6e,0x28,0x29,0x0a,0x7b,0x0a,0x20,0x20,0x20,0x20,
+    0x67,0x6c,0x5f,0x50,0x6f,0x73,0x69,0x74,0x69,0x6f,0x6e,0x20,0x3d,0x20,0x6d,0x61,
+    0x74,0x34,0x28,0x76,0x73,0x5f,0x70,0x61,0x72,0x61,0x6d,0x73,0x5b,0x30,0x5d,0x2c,
+    0x20,0x76,0x73,0x5f,0x70,0x61,0x72,0x61,0x6d,0x73,0x5b,0x31,0x5d,0x2c,0x20,0x76,
+    0x73,0x5f,0x70,0x61,0x72,0x61,0x6d,0x73,0x5b,0x32,0x5d,0x2c,0x20,0x76,0x73,0x5f,
+    0x70,0x61,0x72,0x61,0x6d,0x73,0x5b,0x33,0x5d,0x29,0x20,0x2a,0x20,0x76,0x65,0x63,
+    0x34,0x28,0x70,0x6f,0x73,0x69,0x74,0x69,0x6f,0x6e,0x2e,0x78,0x79,0x7a,0x20,0x2b,
+    0x20,0x5f,0x31,0x35,0x2e,0x69,0x6e,0x73,0x74,0x5b,0x67,0x6c,0x5f,0x49,0x6e,0x73,
+    0x74,0x61,0x6e,0x63,0x65,0x49,0x44,0x5d,0x2e,0x70,0x6f,0x73,0x2e,0x78,0x79,0x7a,
+    0x2c,0x20,0x31,0x2e,0x30,0x29,0x3b,0x0a,0x20,0x20,0x20,0x20,0x63,0x6f,0x6c,0x6f,
+    0x72,0x20,0x3d,0x20,0x76,0x65,0x63,0x34,0x28,0x5f,0x31,0x35,0x2e,0x69,0x6e,0x73,
+    0x74,0x5b,0x67,0x6c,0x5f,0x49,0x6e,0x73,0x74,0x61,0x6e,0x63,0x65,0x49,0x44,0x5d,
+    0x2e,0x70,0x6f,0x73,0x2e,0x78,0x79,0x7a,0x2c,0x20,0x31,0x2e,0x30,0x29,0x3b,0x0a,
+    0x7d,0x0a,0x0a,0x00,
+];
+/*
+    #version 300 es
+    precision mediump float;
+    precision highp int;
+
+    layout(location = 0) out highp vec4 frag_color;
+    in highp vec4 color;
+
+    void main()
+    {
+        frag_color = color;
+    }
+
+*/
+fs_trixel_source_glsl300es := u8.[
+    0x23,0x76,0x65,0x72,0x73,0x69,0x6f,0x6e,0x20,0x33,0x30,0x30,0x20,0x65,0x73,0x0a,
+    0x70,0x72,0x65,0x63,0x69,0x73,0x69,0x6f,0x6e,0x20,0x6d,0x65,0x64,0x69,0x75,0x6d,
+    0x70,0x20,0x66,0x6c,0x6f,0x61,0x74,0x3b,0x0a,0x70,0x72,0x65,0x63,0x69,0x73,0x69,
+    0x6f,0x6e,0x20,0x68,0x69,0x67,0x68,0x70,0x20,0x69,0x6e,0x74,0x3b,0x0a,0x0a,0x6c,
+    0x61,0x79,0x6f,0x75,0x74,0x28,0x6c,0x6f,0x63,0x61,0x74,0x69,0x6f,0x6e,0x20,0x3d,
+    0x20,0x30,0x29,0x20,0x6f,0x75,0x74,0x20,0x68,0x69,0x67,0x68,0x70,0x20,0x76,0x65,
+    0x63,0x34,0x20,0x66,0x72,0x61,0x67,0x5f,0x63,0x6f,0x6c,0x6f,0x72,0x3b,0x0a,0x69,
+    0x6e,0x20,0x68,0x69,0x67,0x68,0x70,0x20,0x76,0x65,0x63,0x34,0x20,0x63,0x6f,0x6c,
+    0x6f,0x72,0x3b,0x0a,0x0a,0x76,0x6f,0x69,0x64,0x20,0x6d,0x61,0x69,0x6e,0x28,0x29,
+    0x0a,0x7b,0x0a,0x20,0x20,0x20,0x20,0x66,0x72,0x61,0x67,0x5f,0x63,0x6f,0x6c,0x6f,
+    0x72,0x20,0x3d,0x20,0x63,0x6f,0x6c,0x6f,0x72,0x3b,0x0a,0x7d,0x0a,0x0a,0x00,
+];
+trixel_shader_desc :: (backend: sg_backend) -> sg_shader_desc {
+    desc: sg_shader_desc;
+    desc.label = "trixel_shader";
+    if backend == {
+    case .GLCORE;
+        desc.vertex_func.source = xx *vs_trixel_source_glsl430;
+        desc.vertex_func.entry = "main";
+        desc.fragment_func.source = xx *fs_trixel_source_glsl430;
+        desc.fragment_func.entry = "main";
+        desc.attrs[0].base_type = .FLOAT;
+        desc.attrs[0].glsl_name = "position";
+        desc.uniform_blocks[0].stage = .VERTEX;
+        desc.uniform_blocks[0].layout = .STD140;
+        desc.uniform_blocks[0].size = 64;
+        desc.uniform_blocks[0].glsl_uniforms[0].type = .FLOAT4;
+        desc.uniform_blocks[0].glsl_uniforms[0].array_count = 4;
+        desc.uniform_blocks[0].glsl_uniforms[0].glsl_name = "vs_params";
+        desc.storage_buffers[0].stage = .VERTEX;
+        desc.storage_buffers[0].readonly = true;
+        desc.storage_buffers[0].glsl_binding_n = 0;
+    case .GLES3;
+        desc.vertex_func.source = xx *vs_trixel_source_glsl300es;
+        desc.vertex_func.entry = "main";
+        desc.fragment_func.source = xx *fs_trixel_source_glsl300es;
+        desc.fragment_func.entry = "main";
+        desc.attrs[0].base_type = .FLOAT;
+        desc.attrs[0].glsl_name = "position";
+        desc.uniform_blocks[0].stage = .VERTEX;
+        desc.uniform_blocks[0].layout = .STD140;
+        desc.uniform_blocks[0].size = 64;
+        desc.uniform_blocks[0].glsl_uniforms[0].type = .FLOAT4;
+        desc.uniform_blocks[0].glsl_uniforms[0].array_count = 4;
+        desc.uniform_blocks[0].glsl_uniforms[0].glsl_name = "vs_params";
+        desc.storage_buffers[0].stage = .VERTEX;
+        desc.storage_buffers[0].readonly = true;
+        desc.storage_buffers[0].glsl_binding_n = 0;
+    }
+    return desc;
+}

src/shaders/shader_trixel.glsl

@@ -0,0 +1,37 @@
+@vs vs_trixel
+
+in vec4 position;
+
+layout(binding=0) uniform vs_params {
+    mat4 mvp;
+};
+
+struct trixel_instance {
+    vec4 pos;
+};
+
+layout(binding=0) readonly buffer instances {
+    trixel_instance inst[];
+};
+
+
+out vec4 color;
+
+void main() {
+    vec3 instancepos = inst[gl_InstanceIndex].pos.xyz;
+    gl_Position = mvp * (vec4(position.xyz + instancepos, 1.0));
+    color = vec4(instancepos, 1.0);
+}
+@end
+
+@fs fs_trixel
+in vec4 color;
+out vec4 frag_color;
+
+
+void main() {
+    frag_color = color;
+}
+@end
+
+@program trixel vs_trixel fs_trixel

src/ui/ui.jai

@@ -187,7 +187,6 @@ draw_prepared_text :: (font: *Ui_Type_Indicator.Font, x: s64, y: s64, text_color
     result[gPreppedText.count] = 0;
     sgl_layer(layer);
     fonsDrawText(state.fons, xx x, xx y, result, null);
-    sfons_flush(state.fons);
     fonsPushState(state.fons);
     arb_tri_command_add(.{
         type = .DRAW_TEXT,
@@ -320,4 +319,10 @@ render_ui :: () {
     r := GR.get_rect(100, 100, 200, 50);
 }
 
-
+ui_pass :: () {
+    render_ui(); // Generates commands that are handled in arb_tri_flush
+    sg_begin_pass(*(sg_pass.{ action = state.pass_action, swapchain = cast,force(sg_swapchain) sglue_swapchain() }));
+        arb_tri_flush();
+    sg_end_pass();
+    sg_commit();
+}