start working on ray casting

build.sh

@@ -1,8 +1,9 @@
 #!/bin/bash
-
+set -e
 cd src/shaders/
 ./compile_shaders.sh
 cd ..
 cd ..
 /home/katajisto/bin/jai/bin/jai-linux -x64 first.jai
+./first &
 /home/katajisto/bin/jai/bin/jai-linux first.jai - wasm

first.jai

@@ -54,7 +54,7 @@
         //  -rluba, 2023-11-15
         walloc_object_file_path := "walloc.o";
 
-        STACK_SIZE :: 24 * 1024;
+        STACK_SIZE :: 1024 * 1024 * 1024;
         options.additional_linker_arguments = .["--stack-first", "-z", tprint("stack-size=%", STACK_SIZE), walloc_object_file_path];
 
         set_build_options(options, w);
@@ -90,6 +90,7 @@
             "src/platform_specific/main.c", "dist/main.o", "modules/sokol-jai/sokol/gfx/sokol_gfx_wasm_gl_debug.a", "modules/sokol-jai/sokol/log/sokol_log_wasm_gl_debug.a", "modules/sokol-jai/sokol/time/sokol_time_wasm_gl_debug.a", "modules/sokol-jai/sokol/app/sokol_app_wasm_gl_debug.a", "modules/sokol-jai/sokol/glue/sokol_glue_wasm_gl_debug.a", "modules/sokol-jai/sokol/fetch/sokol_fetch_wasm_gl_debug.a", "modules/sokol-jai/sokol/gl/sokol_gl_wasm_gl_debug.a", "modules/sokol-jai/sokol/fontstash/sokol_fontstash_wasm_gl_debug.a",
             "modules/sokol-jai/sokol/stbi/stb_image.a",
             "-o", "dist/index.html",
+            "-sSTACK_SIZE=10MB",
             "-sERROR_ON_UNDEFINED_SYMBOLS=1", "-sMEMORY64", "-sMAX_WEBGL_VERSION=2",
             "--js-library=src/platform_specific/runtime.js",
             "--shell-file=src/platform_specific/shell.html",

modules/Input/sokol.jai

@@ -71,7 +71,7 @@ get_key_code :: (key: sapp_keycode) -> Key_Code {
         return PRINT_SCREEN;
 
 
-    if (key >= #char "a") && (key <= #char "z") return cast(Key_Code) (key - 0x20);
+    if (key >= #char "a") && (key <= #char "z") return cast(Key_Code) (key);
     if key > 32 && key < 127 return cast(Key_Code) key;
 
     return UNKNOWN;
@@ -154,11 +154,12 @@ handle_sokol_event :: (event: *sapp_event) {
             input_mouse_x = event.mouse_x;
             input_mouse_y = event.mouse_y;
             return;
+        case .MOUSE_SCROLL;
+            mouse_delta_z = cast(int) event.scroll_y;
     }
     array_add(*events_this_frame, new_event);
 }
 
-WHEEL_DELTA :: 120;
 
 /*
 

src/camera.jai

@@ -2,7 +2,7 @@ Camera :: struct {
 	fov      : float   = 75.0 * 3.141 / 180.0;
 	near     : float   = 1.0;
 	far      : float   = 20.0;
-	position: Vector3 = .{3, 3, 3};
+	position : Vector3 = .{2, 2, 2};
 	target   : Vector3 = .{0, 0, 0};
 }
 
@@ -38,7 +38,6 @@ create_lookat :: (camera: *Camera) -> Matrix4 {
 	};
 }
 
-// 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/editor.jai

@@ -1,4 +1,6 @@
 #load "console.jai";
+#load "trile_editor.jai";
+
 
 draw_editor_ui :: (theme: *GR.Overall_Theme) {
     r := GR.get_rect(0,0,0,0);
@@ -7,12 +9,15 @@ draw_editor_ui :: (theme: *GR.Overall_Theme) {
     draw_bg_rectangle(r, theme);
     r.w = 15*vw;
     GR.label(r, tprint("Trueno v%.%", V_MAJOR, V_MINOR), *t_label_left(theme));
-    r = GR.get_rect(0, ui_h(5,0), ui_w(20, 20), ui_h(95, 0));
-    draw_bg_rectangle(r, theme);
 
+    draw_trile_editor_ui(theme);
     draw_console(theme);
 }
 
 tick_editor_ui :: () {
+    tick_trile_editor();
     tick_console();
+
+    
+    
 }

src/editor/trile_editor.jai

@@ -0,0 +1,127 @@
+#scope_file
+rotation : float = 0.0;
+tilt     : float = 0.0;
+zoom     : float = 3.0;
+
+roughness : int = 0;
+metallic  : int = 0;
+emittance : int = 0;
+
+
+TRILE_ROTATION_SPEED :: 2.0;
+
+Trile_Editor_Tab :: enum {
+    TOOLSET;
+    METADATA;
+    MATERIAL;  
+};
+
+current_tab : Trile_Editor_Tab = .TOOLSET;
+
+#scope_export
+
+current_color : Vector3 = .{1.0, 0.0, 0.0};
+
+tick_trile_editor :: () {
+    if input_button_states[#char "D"] & .DOWN {
+        rotation += TRILE_ROTATION_SPEED * cast(float) delta_time;
+    }
+    if input_button_states[#char "A"] & .DOWN {
+        rotation -= TRILE_ROTATION_SPEED * cast(float) delta_time;
+    }
+    if input_button_states[#char "W"] & .DOWN {
+        tilt += TRILE_ROTATION_SPEED * cast(float) delta_time;
+    }
+    if input_button_states[#char "S"] & .DOWN {
+        tilt -= TRILE_ROTATION_SPEED * cast(float) delta_time;
+    }
+    tilt = clamp(tilt, -(PI/2.0) + 0.01, PI/2.0 - 0.01);
+    zoom = clamp(zoom + mouse_delta_z * -0.2, 1.0, 3.0);
+
+    cam := get_trile_editor_camera();
+    ray := get_mouse_ray(*cam);
+    hit := does_ray_hit_cube(ray, .{ .{0, 0, 0}, .{1, 1, 1}});
+
+
+    print("Ray direction %\n", ray.direction);
+     
+}
+
+get_trile_editor_camera :: () -> Camera {
+    camera: Camera;
+    camera.near = 0.1;
+    camera.far = 100;
+
+    cameraDir : Vector3    = .{1, 0, 0};
+    qrotation : Quaternion = .{cos(rotation/2.0),0,sin(rotation/2.0),0};
+    qtilt     : Quaternion = .{cos(tilt/2.0),sin(tilt/2.0), 0, 0};
+
+    rotate(*cameraDir, qrotation * qtilt);
+    camera.position = .{0.5, 0.5, 0.5};
+
+    camera.position += cameraDir * zoom;
+    camera.target = .{0.5, 0.5, 0.5};
+    
+    return camera;
+}
+
+global_palette_scroll : float = 0.0;
+trile_palette_scroll  : float = 0.0;
+
+draw_material_tab :: (theme: *GR.Overall_Theme, area: GR.Rect) {
+    r := area;
+    r.h = ui_h(42, 0);
+    GR.color_picker(r, *current_color, *theme.color_picker_theme);
+    r.y += r.h;
+    r.h = ui_h(100,0) - r.y;
+    r.h -= ui_h(18,0);
+    r.h /= 2;
+    region, inside := GR.begin_scrollable_region(r, *theme.scrollable_region_theme);
+    s := inside;
+    GR.end_scrollable_region(region, s.x + s.w, s.y + s.h, *global_palette_scroll);
+    r.y += r.h;
+    region, inside = GR.begin_scrollable_region(r, *theme.scrollable_region_theme);
+    s = inside;
+    GR.end_scrollable_region(region, s.x + s.w, s.y + s.h, *trile_palette_scroll);
+    r.y += r.h;
+    r.h = ui_h(3,2);
+    GR.label(r, "Roughness", *t_label_left(theme));
+    r.y += r.h;
+    GR.slider(r, *roughness, 0, 7, 1, *theme.slider_theme);
+    r.y += r.h;
+    GR.label(r, "Metallic", *t_label_left(theme));
+    r.y += r.h;
+    GR.slider(r, *metallic, 0, 3, 1, *theme.slider_theme);
+    r.y += r.h;
+    GR.label(r, "Emittance", *t_label_left(theme));
+    r.y += r.h;
+    GR.slider(r, *emittance, 0, 2, 1, *theme.slider_theme);
+    
+}
+
+draw_trile_editor_ui :: (theme: *GR.Overall_Theme) {
+    r := GR.get_rect(0, ui_h(5,0), ui_w(20, 20), ui_h(95, 0));
+    draw_bg_rectangle(r, theme);
+    tab_r := r;
+    tab_r.h = ui_h(3,0);
+    tab_r.w = ui_w(20, 20) / 3;
+
+    if GR.button(tab_r, "Tool", *t_button_tab(theme, current_tab == .TOOLSET)) {
+        current_tab = .TOOLSET;
+    }
+    tab_r.x += tab_r.w;
+    if GR.button(tab_r, "Material", *t_button_tab(theme, current_tab == .MATERIAL)) {
+        current_tab = .MATERIAL;
+    }
+    tab_r.x += tab_r.w;
+    if GR.button(tab_r, "Meta", *t_button_tab(theme, current_tab == .METADATA)) {
+        current_tab = .METADATA;
+    }
+
+    r.y += tab_r.h;
+
+    if current_tab == {
+        case .MATERIAL;
+            draw_material_tab(theme, r);
+    }
+}

src/main.jai

@@ -11,6 +11,7 @@ stbi :: #import "stb_image";
 #load "events.jai";
 #load "load.jai";
 #load "camera.jai";
+#load "ray.jai";
 
 last_frame_time : float64;
 delta\    _time : float64;
@@ -70,7 +71,7 @@ init :: () {
     state.font_default.fons_font = FONS_INVALID;
     create_pipelines();
 
-    state.pass_action_clear.colors[0] = .{ load_action = .CLEAR, clear_value = .{ r = 0.5, g = 0.5, b = 0.9, a = 1 } };
+    state.pass_action_clear.colors[0] = .{ load_action = .CLEAR, clear_value = .{ r = 0.6, g = 0.7, b = 1.0, a = 1 } };
     state.pass_action.colors[0] = .{ load_action = .LOAD };
     init_font_loads();
 }
@@ -82,19 +83,15 @@ init_after_mandatory_loads :: () {
 cam : Camera;
 
 frame :: () {
-    print("FLAG1\n");
     delta_time = get_time() - last_frame_time;
     last_frame_time = get_time();
 
     sfetch_dowork();
 
-    print("FLAG2\n");
     if mandatory_loads_done() && !init_after_mandatory_done {
-        print("FLAG3\n");
         init_after_mandatory_loads();
         init_after_mandatory_done = true;
     }
-    print("FLAG4\n");
 
     if !mandatory_loads_done() then return;
     fonsClearState(state.fons);
@@ -112,19 +109,21 @@ frame :: () {
 
     tick_ui();
 
-    mvp := create_viewproj(*cam);
+    mvp := create_viewproj(*get_trile_editor_camera());
     vs_params : Vs_Params;
     vs_params.mvp = mvp.floats;
 
-    test : [4096]Vector4;
+    test : [4096]Position_Color;
 
     for x: 0..15 {
         for y: 0..15 {
             for z: 0..15 {
-                test[x * 16 * 16 + y * 16 + z].x = x * (1.0 / 16.0);
+                test[x * 16 * 16 + y * 16 + z].pos.x = x * (1.0 / 16.0);
-                test[x * 16 * 16 + y * 16 + z].y = y * (1.0 / 16.0);
+                test[x * 16 * 16 + y * 16 + z].pos.y = y * (1.0 / 16.0);
-                test[x * 16 * 16 + y * 16 + z].z = z * (1.0 / 16.0);
+                test[x * 16 * 16 + y * 16 + z].pos.z = z * (1.0 / 16.0);
-                test[x * 16 * 16 + y * 16 + z].w = 1.0;
+                test[x * 16 * 16 + y * 16 + z].pos.w = 1.0;
+                test[x * 16 * 16 + y * 16 + z].col   = .{current_color.x, current_color.y, current_color.z, 1.0};
+
             }
         }
     }

src/pipelines.jai

@@ -27,16 +27,26 @@ TRIXEL_SIZE_HALF : float : 1.0/32.0;
 
 gArbtriMem : [100000*3*9]float;
 
+Position_Color :: struct {
+    pos: Vector4;
+    col: Vector4;
+}
+
 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.buffers[1].step_func = .PER_INSTANCE;
+    pipeline.layout.buffers[1].step_func = .PER_INSTANCE;
     
     pipeline.layout.attrs[ATTR_trixel_position] = .{ format = .FLOAT3, buffer_index = 0 };
-    // pipeline.layout.attrs[ATTR_trixel_inst]     = .{ format = .FLOAT4, buffer_index = 1 };
+    pipeline.layout.attrs[ATTR_trixel_inst]     = .{ format = .FLOAT4, buffer_index = 1 };
+    pipeline.layout.attrs[ATTR_trixel_inst_col] = .{ format = .FLOAT4, buffer_index = 1 };
     pipeline.index_type = .UINT16;
+    pipeline.depth = .{
+            write_enabled = true,
+            compare = .LESS_EQUAL,
+    };
 
     color_state := sg_color_target_state.{
         pixel_format = .RGBA8,
@@ -79,12 +89,12 @@ create_trixel_pipeline :: () {
 	verts[23] = .{ TRIXEL_SIZE_HALF, TRIXEL_SIZE_HALF, -TRIXEL_SIZE_HALF   };
 
 	indices: [] u16 = .[
-		0, 1, 2, 0, 2, 3,
+		0, 2, 1, 0, 3, 2,
-		4, 5, 6, 4, 6, 7,
+		4, 6, 5, 4, 7, 6,
-		8, 9, 10, 8, 10, 11,
+		8, 10, 9, 8, 11, 10,
-		12, 13, 14, 12, 14, 15,
+		12, 14, 13, 12, 15, 14,
-		16, 17, 18, 16, 18, 19,
+		16, 18, 17, 16, 19, 18,
-		20, 21, 22, 20, 22, 23
+		20, 22, 21, 20, 23, 22
 	];
     
     pipeline.color_count = 1;
@@ -94,11 +104,11 @@ create_trixel_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.{ usage = .STREAM, size = 4096 * size_of(Vector4)};
+    instance_buffer := sg_buffer_desc.{ usage = .STREAM, size = 4096 * size_of(Position_Color)};
 
     gPipelines.trixel.bind.index_buffer      = sg_make_buffer(*ibuffer);
     gPipelines.trixel.bind.vertex_buffers[0] = sg_make_buffer(*vbuffer);
-    // gPipelines.trixel.bind.vertex_buffers[1] = sg_make_buffer(*instance_buffer);
+    gPipelines.trixel.bind.vertex_buffers[1] = sg_make_buffer(*instance_buffer);
 }
 
 create_arbtri_pipeline :: () {

src/platform_specific/common.jai

@@ -2,6 +2,7 @@
 #import,dir "../../modules/sokol-jai/sokol/gfx";
 #import,dir "../../modules/sokol-jai/sokol/gl";
 #import,dir "../../modules/sokol-jai/sokol/glue";
+#import,dir "../../modules/sokol-jai/sokol/shape";
 #import,dir "../../modules/sokol-jai/sokol/fontstash";
 #import,dir "../../modules/sokol-jai/sokol/log";
 #import,dir "../../modules/sokol-jai/sokol/time";

src/ray.jai

@@ -0,0 +1,48 @@
+Ray :: struct {
+    origin    : Vector3;
+    direction : Vector3;
+};
+
+get_mouse_ray :: (cam: *Camera) -> Ray {
+    sw, sh := get_window_size();
+    normalized_mouse_x := (2.0 * input_mouse_x) / sw - 1.0;
+    normalized_mouse_y := 1.0 - (2.0 * input_mouse_y) / sh;
+
+    ray_clip : Vector4 = .{normalized_mouse_x, normalized_mouse_y, -1.0, 1.0};
+
+    cam := get_trile_editor_camera();
+    
+    viewmat  := create_lookat(*cam);
+    projmat  := create_perspective(*cam);
+    ray_eye  := inverse(projmat) * ray_clip;
+    ray_eye.z = -1.0;
+    ray_eye.w =  0.0;
+
+    ray_world_4d := (inverse(viewmat) * ray_eye);
+    ray_world    :  Vector3 = .{ray_world_4d.x, ray_world_4d.y, ray_world_4d.z};
+    ray_world     = normalize(ray_world);
+
+    return .{
+        origin    = cam.position,
+        direction = ray_world
+    };
+}
+
+Collision_Cube :: struct {
+    position : Vector3;
+    size     : Vector3;
+};
+
+does_ray_hit_cube :: (ray: Ray, cube: Collision_Cube) -> bool {
+    cube_min := cube.position;
+    cube_max := cube.position + cube.size;
+    tMin := (cube_min - ray.origin) / ray.direction;
+    tMax := (cube_max - ray.origin) / ray.direction;
+    t1   := min(tMin, tMax);
+    t2   := max(tMin, tMax);
+    
+    tNear := max(max(t1.x, t1.y), t1.z);
+    tFar  := min(min(t2.x, t2.y), t2.z);
+
+    return tNear > tFar;
+}

src/shaders/jai/shader_trixel.jai

@@ -14,12 +14,16 @@
         Fragment Shader: fs_trixel
         Attributes:
             ATTR_trixel_position => 0
+            ATTR_trixel_inst => 1
+            ATTR_trixel_inst_col => 2
     Bindings:
         Uniform block 'vs_params':
             Jai struct: Vs_Params
             Bind slot: UB_vs_params => 0
 */
 ATTR_trixel_position :: 0;
+ATTR_trixel_inst :: 1;
+ATTR_trixel_inst_col :: 2;
 UB_vs_params :: 0;
 Vs_Params :: struct {
     mvp: [16]float;
@@ -28,13 +32,15 @@ Vs_Params :: struct {
     #version 430
 
     uniform vec4 vs_params[4];
+    layout(location = 1) in vec4 inst;
     layout(location = 0) in vec4 position;
     layout(location = 0) out vec4 color;
+    layout(location = 2) in vec4 inst_col;
 
     void main()
     {
-        gl_Position = mat4(vs_params[0], vs_params[1], vs_params[2], vs_params[3]) * position;
+        gl_Position = mat4(vs_params[0], vs_params[1], vs_params[2], vs_params[3]) * vec4(position.xyz + inst.xyz, 1.0);
-        color = vec4(1.0, 0.0, 0.0, 1.0);
+        color = inst_col;
     }
 
 */
@@ -42,20 +48,25 @@ vs_trixel_source_glsl430 := u8.[
     0x23,0x76,0x65,0x72,0x73,0x69,0x6f,0x6e,0x20,0x34,0x33,0x30,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,
+    0x6c,0x6f,0x63,0x61,0x74,0x69,0x6f,0x6e,0x20,0x3d,0x20,0x31,0x29,0x20,0x69,0x6e,
-    0x20,0x76,0x65,0x63,0x34,0x20,0x70,0x6f,0x73,0x69,0x74,0x69,0x6f,0x6e,0x3b,0x0a,
+    0x20,0x76,0x65,0x63,0x34,0x20,0x69,0x6e,0x73,0x74,0x3b,0x0a,0x6c,0x61,0x79,0x6f,
-    0x6c,0x61,0x79,0x6f,0x75,0x74,0x28,0x6c,0x6f,0x63,0x61,0x74,0x69,0x6f,0x6e,0x20,
+    0x75,0x74,0x28,0x6c,0x6f,0x63,0x61,0x74,0x69,0x6f,0x6e,0x20,0x3d,0x20,0x30,0x29,
-    0x3d,0x20,0x30,0x29,0x20,0x6f,0x75,0x74,0x20,0x76,0x65,0x63,0x34,0x20,0x63,0x6f,
+    0x20,0x69,0x6e,0x20,0x76,0x65,0x63,0x34,0x20,0x70,0x6f,0x73,0x69,0x74,0x69,0x6f,
-    0x6c,0x6f,0x72,0x3b,0x0a,0x0a,0x76,0x6f,0x69,0x64,0x20,0x6d,0x61,0x69,0x6e,0x28,
+    0x6e,0x3b,0x0a,0x6c,0x61,0x79,0x6f,0x75,0x74,0x28,0x6c,0x6f,0x63,0x61,0x74,0x69,
-    0x29,0x0a,0x7b,0x0a,0x20,0x20,0x20,0x20,0x67,0x6c,0x5f,0x50,0x6f,0x73,0x69,0x74,
+    0x6f,0x6e,0x20,0x3d,0x20,0x30,0x29,0x20,0x6f,0x75,0x74,0x20,0x76,0x65,0x63,0x34,
-    0x69,0x6f,0x6e,0x20,0x3d,0x20,0x6d,0x61,0x74,0x34,0x28,0x76,0x73,0x5f,0x70,0x61,
+    0x20,0x63,0x6f,0x6c,0x6f,0x72,0x3b,0x0a,0x6c,0x61,0x79,0x6f,0x75,0x74,0x28,0x6c,
-    0x72,0x61,0x6d,0x73,0x5b,0x30,0x5d,0x2c,0x20,0x76,0x73,0x5f,0x70,0x61,0x72,0x61,
+    0x6f,0x63,0x61,0x74,0x69,0x6f,0x6e,0x20,0x3d,0x20,0x32,0x29,0x20,0x69,0x6e,0x20,
-    0x6d,0x73,0x5b,0x31,0x5d,0x2c,0x20,0x76,0x73,0x5f,0x70,0x61,0x72,0x61,0x6d,0x73,
+    0x76,0x65,0x63,0x34,0x20,0x69,0x6e,0x73,0x74,0x5f,0x63,0x6f,0x6c,0x3b,0x0a,0x0a,
-    0x5b,0x32,0x5d,0x2c,0x20,0x76,0x73,0x5f,0x70,0x61,0x72,0x61,0x6d,0x73,0x5b,0x33,
+    0x76,0x6f,0x69,0x64,0x20,0x6d,0x61,0x69,0x6e,0x28,0x29,0x0a,0x7b,0x0a,0x20,0x20,
-    0x5d,0x29,0x20,0x2a,0x20,0x70,0x6f,0x73,0x69,0x74,0x69,0x6f,0x6e,0x3b,0x0a,0x20,
+    0x20,0x20,0x67,0x6c,0x5f,0x50,0x6f,0x73,0x69,0x74,0x69,0x6f,0x6e,0x20,0x3d,0x20,
-    0x20,0x20,0x20,0x63,0x6f,0x6c,0x6f,0x72,0x20,0x3d,0x20,0x76,0x65,0x63,0x34,0x28,
+    0x6d,0x61,0x74,0x34,0x28,0x76,0x73,0x5f,0x70,0x61,0x72,0x61,0x6d,0x73,0x5b,0x30,
-    0x31,0x2e,0x30,0x2c,0x20,0x30,0x2e,0x30,0x2c,0x20,0x30,0x2e,0x30,0x2c,0x20,0x31,
+    0x5d,0x2c,0x20,0x76,0x73,0x5f,0x70,0x61,0x72,0x61,0x6d,0x73,0x5b,0x31,0x5d,0x2c,
-    0x2e,0x30,0x29,0x3b,0x0a,0x7d,0x0a,0x0a,0x00,
+    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,0x69,0x6e,0x73,0x74,0x2e,0x78,0x79,0x7a,0x2c,0x20,0x31,0x2e,0x30,
+    0x29,0x3b,0x0a,0x20,0x20,0x20,0x20,0x63,0x6f,0x6c,0x6f,0x72,0x20,0x3d,0x20,0x69,
+    0x6e,0x73,0x74,0x5f,0x63,0x6f,0x6c,0x3b,0x0a,0x7d,0x0a,0x0a,0x00,
 ];
 /*
     #version 430
@@ -84,13 +95,15 @@ fs_trixel_source_glsl430 := u8.[
     #version 300 es
 
     uniform vec4 vs_params[4];
+    layout(location = 1) in vec4 inst;
     layout(location = 0) in vec4 position;
     out vec4 color;
+    layout(location = 2) in vec4 inst_col;
 
     void main()
     {
-        gl_Position = mat4(vs_params[0], vs_params[1], vs_params[2], vs_params[3]) * position;
+        gl_Position = mat4(vs_params[0], vs_params[1], vs_params[2], vs_params[3]) * vec4(position.xyz + inst.xyz, 1.0);
-        color = vec4(1.0, 0.0, 0.0, 1.0);
+        color = inst_col;
     }
 
 */
@@ -98,19 +111,24 @@ vs_trixel_source_glsl300es := u8.[
     0x23,0x76,0x65,0x72,0x73,0x69,0x6f,0x6e,0x20,0x33,0x30,0x30,0x20,0x65,0x73,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,
+    0x75,0x74,0x28,0x6c,0x6f,0x63,0x61,0x74,0x69,0x6f,0x6e,0x20,0x3d,0x20,0x31,0x29,
-    0x20,0x69,0x6e,0x20,0x76,0x65,0x63,0x34,0x20,0x70,0x6f,0x73,0x69,0x74,0x69,0x6f,
+    0x20,0x69,0x6e,0x20,0x76,0x65,0x63,0x34,0x20,0x69,0x6e,0x73,0x74,0x3b,0x0a,0x6c,
-    0x6e,0x3b,0x0a,0x6f,0x75,0x74,0x20,0x76,0x65,0x63,0x34,0x20,0x63,0x6f,0x6c,0x6f,
+    0x61,0x79,0x6f,0x75,0x74,0x28,0x6c,0x6f,0x63,0x61,0x74,0x69,0x6f,0x6e,0x20,0x3d,
-    0x72,0x3b,0x0a,0x0a,0x76,0x6f,0x69,0x64,0x20,0x6d,0x61,0x69,0x6e,0x28,0x29,0x0a,
+    0x20,0x30,0x29,0x20,0x69,0x6e,0x20,0x76,0x65,0x63,0x34,0x20,0x70,0x6f,0x73,0x69,
-    0x7b,0x0a,0x20,0x20,0x20,0x20,0x67,0x6c,0x5f,0x50,0x6f,0x73,0x69,0x74,0x69,0x6f,
+    0x74,0x69,0x6f,0x6e,0x3b,0x0a,0x6f,0x75,0x74,0x20,0x76,0x65,0x63,0x34,0x20,0x63,
-    0x6e,0x20,0x3d,0x20,0x6d,0x61,0x74,0x34,0x28,0x76,0x73,0x5f,0x70,0x61,0x72,0x61,
+    0x6f,0x6c,0x6f,0x72,0x3b,0x0a,0x6c,0x61,0x79,0x6f,0x75,0x74,0x28,0x6c,0x6f,0x63,
-    0x6d,0x73,0x5b,0x30,0x5d,0x2c,0x20,0x76,0x73,0x5f,0x70,0x61,0x72,0x61,0x6d,0x73,
+    0x61,0x74,0x69,0x6f,0x6e,0x20,0x3d,0x20,0x32,0x29,0x20,0x69,0x6e,0x20,0x76,0x65,
-    0x5b,0x31,0x5d,0x2c,0x20,0x76,0x73,0x5f,0x70,0x61,0x72,0x61,0x6d,0x73,0x5b,0x32,
+    0x63,0x34,0x20,0x69,0x6e,0x73,0x74,0x5f,0x63,0x6f,0x6c,0x3b,0x0a,0x0a,0x76,0x6f,
-    0x5d,0x2c,0x20,0x76,0x73,0x5f,0x70,0x61,0x72,0x61,0x6d,0x73,0x5b,0x33,0x5d,0x29,
+    0x69,0x64,0x20,0x6d,0x61,0x69,0x6e,0x28,0x29,0x0a,0x7b,0x0a,0x20,0x20,0x20,0x20,
-    0x20,0x2a,0x20,0x70,0x6f,0x73,0x69,0x74,0x69,0x6f,0x6e,0x3b,0x0a,0x20,0x20,0x20,
+    0x67,0x6c,0x5f,0x50,0x6f,0x73,0x69,0x74,0x69,0x6f,0x6e,0x20,0x3d,0x20,0x6d,0x61,
-    0x20,0x63,0x6f,0x6c,0x6f,0x72,0x20,0x3d,0x20,0x76,0x65,0x63,0x34,0x28,0x31,0x2e,
+    0x74,0x34,0x28,0x76,0x73,0x5f,0x70,0x61,0x72,0x61,0x6d,0x73,0x5b,0x30,0x5d,0x2c,
-    0x30,0x2c,0x20,0x30,0x2e,0x30,0x2c,0x20,0x30,0x2e,0x30,0x2c,0x20,0x31,0x2e,0x30,
+    0x20,0x76,0x73,0x5f,0x70,0x61,0x72,0x61,0x6d,0x73,0x5b,0x31,0x5d,0x2c,0x20,0x76,
-    0x29,0x3b,0x0a,0x7d,0x0a,0x0a,0x00,
+    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,0x69,0x6e,0x73,0x74,0x2e,0x78,0x79,0x7a,0x2c,0x20,0x31,0x2e,0x30,0x29,0x3b,
+    0x0a,0x20,0x20,0x20,0x20,0x63,0x6f,0x6c,0x6f,0x72,0x20,0x3d,0x20,0x69,0x6e,0x73,
+    0x74,0x5f,0x63,0x6f,0x6c,0x3b,0x0a,0x7d,0x0a,0x0a,0x00,
 ];
 /*
     #version 300 es
@@ -150,6 +168,10 @@ trixel_shader_desc :: (backend: sg_backend) -> sg_shader_desc {
         desc.fragment_func.entry = "main";
         desc.attrs[0].base_type = .FLOAT;
         desc.attrs[0].glsl_name = "position";
+        desc.attrs[1].base_type = .FLOAT;
+        desc.attrs[1].glsl_name = "inst";
+        desc.attrs[2].base_type = .FLOAT;
+        desc.attrs[2].glsl_name = "inst_col";
         desc.uniform_blocks[0].stage = .VERTEX;
         desc.uniform_blocks[0].layout = .STD140;
         desc.uniform_blocks[0].size = 64;
@@ -163,6 +185,10 @@ trixel_shader_desc :: (backend: sg_backend) -> sg_shader_desc {
         desc.fragment_func.entry = "main";
         desc.attrs[0].base_type = .FLOAT;
         desc.attrs[0].glsl_name = "position";
+        desc.attrs[1].base_type = .FLOAT;
+        desc.attrs[1].glsl_name = "inst";
+        desc.attrs[2].base_type = .FLOAT;
+        desc.attrs[2].glsl_name = "inst_col";
         desc.uniform_blocks[0].stage = .VERTEX;
         desc.uniform_blocks[0].layout = .STD140;
         desc.uniform_blocks[0].size = 64;

src/shaders/shader_trixel.glsl

@@ -1,19 +1,20 @@
 @vs vs_trixel
 
 in vec4 position;
-// in vec4 inst;
+in vec4 inst;
+in vec4 inst_col;
 
 layout(binding=0) uniform vs_params {
     mat4 mvp;
 };
 
+
 out vec4 color;
 
 void main() {
-    // vec3 instancepos = inst.xyz;
+    vec3 instancepos = inst.xyz;
-    // gl_Position = mvp * (vec4(position.xyz + instancepos, 1.0));
+    gl_Position = mvp * (vec4(position.xyz + instancepos, 1.0));
-    gl_Position = mvp * position;
+    color = inst_col;
-    color = vec4(1.0, 0.0, 0.0, 1.0);
 }
 @end
 

src/ui/component_themes.jai

@@ -3,3 +3,15 @@ t_label_left :: (theme: *GR.Overall_Theme) -> GR.Label_Theme {
     t.alignment = GR.Text_Alignment.Left;
     return t;
 }
+
+t_button_tab :: (theme: *GR.Overall_Theme, active: bool) -> GR.Button_Theme {
+    t := theme.button_theme;
+
+    t.rectangle_shape.rounding_flags = .NORTH;
+
+    if active {
+        t.surface_color = theme.button_theme.surface_color_down;
+    }
+    
+    return t;
+}

src/ui/ui.jai

@@ -46,6 +46,7 @@ Ui_Font :: struct {
     fons_font                        : s32 = 0;
     temporary_glyphs                 : [..]Ui_Font_Glyph;
     temporary_glyphs_byte_offsets    : [..]u32;
+    temporary_glyphs_width_in_pixels : u32;
 };
 
 ui_init_font_fields :: (font: *Ui_Font) {
@@ -167,10 +168,13 @@ prepare_text :: (font: *Ui_Type_Indicator.Font, text: string, effects: Ui_Type_I
     array_reset(*font.temporary_glyphs);
     array_reset(*font.temporary_glyphs_byte_offsets);
 
+    font.temporary_glyphs_width_in_pixels = 0;
+
     for 0..(text.count-1) {
         glyph : Ui_Font_Glyph;
 
         glyph.advance = cast(u32) fonsTextBounds(state.fons, 0.0, 0.0, text.data + it, text.data + it + 1, null);
+        font.temporary_glyphs_width_in_pixels += glyph.advance;
         
         array_add(*font.temporary_glyphs, glyph);
         array_add(*font.temporary_glyphs_byte_offsets, cast(u32) it);