Consistent note borders with keyboard spacing

shaders/cake/cake.frag

@@ -6,6 +6,7 @@ layout(location = 2) in vec2 left_right;
 layout(location = 3) flat in int ticks_height;
 layout(location = 4) flat in int ticks_start;
 layout(location = 5) flat in int buffer_index;
+layout(location = 6) flat in int border_width;
 
 layout(location = 0) out vec4 fsout_Color;
 
@@ -21,7 +22,6 @@ layout(set = 0, binding = 0) readonly buffer BufferArray
     ivec4 BinTree[];
 } buffers[256];
 
-const float border_width = 1;
 const float pi = 3.1415926535897;
 
 ivec4 getNoteAt(int time) {

shaders/cake/cake.geom

@@ -9,13 +9,15 @@ layout(location = 1) in float right[];
 layout(location = 2) in int start[];
 layout(location = 3) in int end[];
 layout(location = 4) in int buffer_index[];
+layout(location = 5) in int border_width_in[];
 
 layout(location = 0) out vec2 v_uv;
 layout(location = 1) out vec2 screen_pos;
 layout(location = 2) out vec2 v_left_right;
 layout(location = 3) out int ticks_height;
 layout(location = 4) out int ticks_start;
 layout(location = 5) out int v_buffer_index;
+layout(location = 6) out int border_width;
 
 layout(push_constant) uniform PushConstants {
     int start_time;
@@ -63,6 +65,7 @@ void main()
     v_left_right = vec2(left[0], right[0]);
     ticks_height = top_tick - bottom_tick;
     ticks_start = bottom_tick;
+    border_width = border_width_in[0];
 
     EmitVertex();
 
@@ -79,6 +82,7 @@ void main()
     v_left_right = vec2(left[0], right[0]);
     ticks_height = top_tick - bottom_tick;
     ticks_start = bottom_tick;
+    border_width = border_width_in[0];
 
     EmitVertex();
 
@@ -95,6 +99,7 @@ void main()
     v_left_right = vec2(left[0], right[0]);
     ticks_height = top_tick - bottom_tick;
     ticks_start = bottom_tick;
+    border_width = border_width_in[0];
 
     EmitVertex();
 
@@ -111,6 +116,7 @@ void main()
     v_left_right = vec2(left[0], right[0]);
     ticks_height = top_tick - bottom_tick;
     ticks_start = bottom_tick;
+    border_width = border_width_in[0];
 
     EmitVertex();
 

shaders/cake/cake.vert

@@ -5,17 +5,20 @@ layout(location = 1) in float right;
 layout(location = 2) in int start;
 layout(location = 3) in int end;
 layout(location = 4) in int buffer_index;
+layout(location = 5) in int border_width;
 
 layout(location = 0) out float v_left;
 layout(location = 1) out float v_right;
 layout(location = 2) out int v_start;
 layout(location = 3) out int v_end;
 layout(location = 4) out int v_buffer_index;
+layout(location = 5) out int v_border_width;
 
 void main() {
     v_left = left;
     v_right = right;
     v_start = start;
     v_end = end;
     v_buffer_index = buffer_index;
+    v_border_width = border_width;
 }

shaders/notes/notes.frag

@@ -4,10 +4,10 @@ layout(location = 0) in vec3 frag_color;
 layout(location = 1) in vec2 frag_tex_coord;
 layout(location = 2) in vec2 v_note_size;
 layout(location = 3) in vec2 win_size;
+layout(location = 4) in flat uint border_width;
 
 layout(location = 0) out vec4 out_color;
 
-const float border = 1;
 const float pi = 3.1415926535897;
 
 void main() {
@@ -21,8 +21,8 @@ void main() {
     float horiz_width_pixels = v_note_size.x / 2 * win_size.x;
     float vert_width_pixels = v_note_size.y / 2 * win_size.y;
 
-    float horiz_margin = 1 / horiz_width_pixels * border;
-    float vert_margin = 1 / vert_width_pixels * border;
+    float horiz_margin = 1 / horiz_width_pixels * border_width;
+    float vert_margin = 1 / vert_width_pixels * border_width;
 
     bool border =
         v_uv.x < horiz_margin ||

shaders/notes/notes.geom

@@ -5,11 +5,13 @@ layout(triangle_strip, max_vertices = 4) out;
 
 layout(location = 0) in vec2 start_length[];
 layout(location = 1) in uint key_color[];
+layout(location = 2) in uint border_width_in[];
 
 layout(location = 0) out vec3 frag_color;
 layout(location = 1) out vec2 frag_tex_coord;
 layout(location = 2) out vec2 v_note_size;
 layout(location = 3) out vec2 win_size;
+layout(location = 4) out uint border_width;
 
 layout(push_constant) uniform PushConstants {
     float height_time;
@@ -54,27 +56,31 @@ void main()
     frag_tex_coord = vec2(0, 0);
     v_note_size = note_size_out;
     win_size = win_size_out;
+    border_width = border_width_in[0];
     EmitVertex();
 
     gl_Position = vec4(right, start, 0, 1);
     frag_color = color;
     frag_tex_coord = vec2(1, 0);
     v_note_size = note_size_out;
     win_size = win_size_out;
+    border_width = border_width_in[0];
     EmitVertex();
 
     gl_Position = vec4(left, end, 0, 1);
     frag_color = color;
     frag_tex_coord = vec2(0, 1);
     v_note_size = note_size_out;
     win_size = win_size_out;
+    border_width = border_width_in[0];
     EmitVertex();
 
     gl_Position = vec4(right, end, 0, 1);
     frag_color = color;
     frag_tex_coord = vec2(1, 1);
     v_note_size = note_size_out;
     win_size = win_size_out;
+    border_width = border_width_in[0];
     EmitVertex();
 
     EndPrimitive();

src/gui/window/keyboard.rs

@@ -21,7 +21,7 @@ impl GuiKeyboard {
         let (rect, _) = ui.allocate_exact_size(ui.available_size(), Sense::click());
         let mut mesh = Mesh::default();
         let key_density =
-            ((rect.width() / key_view.visible_range.len() as f32) / 15.0).clamp(1.0, 5.0);
+            crate::utils::calculate_border_width(rect.width(), key_view.visible_range.len() as f32);
         let onepx = ui.painter().round_to_pixel(key_density);
 
         let md_height = rect.height() * 0.048;

src/gui/window/scene/cake_system/mod.rs

@@ -62,6 +62,8 @@ struct CakeNoteColumn {
     end: i32,
     #[format(R32_SINT)]
     buffer_index: i32,
+    #[format(R32_SINT)]
+    border_width: i32,
 }
 
 impl BufferSet {
@@ -244,6 +246,11 @@ impl CakeRenderer {
             screen_height: img_dims[1] as i32,
         };
 
+        let border_width = crate::utils::calculate_border_width(
+            final_image.image().dimensions().width() as f32,
+            key_view.visible_range.len() as f32,
+        ) as i32;
+
         let mut buffer_instances = self.buffers_init.write().unwrap();
         // Black keys first
         let mut written_instances = 0;
@@ -252,6 +259,7 @@ impl CakeRenderer {
             if key.black {
                 buffer_instances[written_instances] = CakeNoteColumn {
                     buffer_index: i as i32,
+                    border_width,
                     start: buffer.start,
                     end: buffer.end,
                     left: key.left,
@@ -266,6 +274,7 @@ impl CakeRenderer {
             if !key.black {
                 buffer_instances[written_instances] = CakeNoteColumn {
                     buffer_index: i as i32,
+                    border_width,
                     start: buffer.start,
                     end: buffer.end,
                     left: key.left,

src/gui/window/scene/note_list_system/mod.rs

@@ -8,6 +8,7 @@ use vulkano::image::ImageViewAbstract;
 use crate::{
     gui::{window::keyboard_layout::KeyboardView, GuiRenderer},
     midi::{DisplacedMIDINote, MIDIColor, MIDIFile, MIDINoteColumnView, MIDINoteViews},
+    utils,
 };
 
 use self::notes_render_pass::{NotePassStatus, NoteRenderPass, NoteVertex};
@@ -58,6 +59,7 @@ impl NoteRenderer {
             key: u8,
             remaining: usize,
             color: Option<MIDIColor>,
+            border_width: f32,
         }
 
         let mut total_notes = 0;
@@ -66,6 +68,11 @@ impl NoteRenderer {
 
         let mut columns_view_info = Vec::new();
 
+        let border_width = utils::calculate_border_width(
+            final_image.dimensions().width() as f32,
+            key_view.visible_range.len() as f32,
+        );
+
         // Add black keys first
         for (i, column) in columns.iter().enumerate() {
             if key_view.key(i).black {
@@ -77,6 +84,7 @@ impl NoteRenderer {
                     key: i as u8,
                     remaining: length,
                     color: None,
+                    border_width,
                 });
                 total_notes += length;
             }
@@ -93,6 +101,7 @@ impl NoteRenderer {
                     key: i as u8,
                     remaining: length,
                     color: None,
+                    border_width,
                 });
                 total_notes += length;
             }
@@ -144,6 +153,7 @@ impl NoteRenderer {
                                         note.len,
                                         column.key,
                                         note.color.as_u32(),
+                                        column.border_width as u32,
                                     );
 
                                     if note.start <= 0.0

src/gui/window/scene/note_list_system/notes_render_pass.rs

@@ -38,13 +38,16 @@ pub struct NoteVertex {
     pub start_length: [f32; 2],
     #[format(R32_UINT)]
     pub key_color: u32,
+    #[format(R32_UINT)]
+    pub border_width: u32,
 }
 
 impl NoteVertex {
-    pub fn new(start: f32, len: f32, key: u8, color: u32) -> Self {
+    pub fn new(start: f32, len: f32, key: u8, color: u32, border_width: u32) -> Self {
         Self {
             start_length: [start, len],
             key_color: key as u32 | (color << 8),
+            border_width,
         }
     }
 }
@@ -408,13 +411,16 @@ mod vs {
 #version 450
 layout(location = 0) in vec2 start_length;
 layout(location = 1) in uint key_color;
+layout(location = 2) in uint border_width;
 
 layout(location = 0) out vec2 v_start_length;
 layout(location = 1) out uint v_key_color;
+layout(location = 2) out uint v_border_width;
 
 void main() {
     v_start_length = start_length;
     v_key_color = key_color;
+    v_border_width = border_width;
 }"
     }
 }

src/main.rs

@@ -9,6 +9,7 @@ mod renderer;
 mod scenes;
 mod settings;
 mod state;
+mod utils;
 
 use egui_winit_vulkano::{Gui, GuiConfig};
 use gui::{window::GuiWasabiWindow, GuiRenderer, GuiState};

src/utils.rs

@@ -0,0 +1,3 @@
+pub fn calculate_border_width(width_pixels: f32, keys_len: f32) -> f32 {
+    ((width_pixels / keys_len) / 12.0).clamp(1.0, 5.0).round()
+}