From 34bee8b09566a52cedced99b7bd13d29907512ce Mon Sep 17 00:00:00 2001
From: skal <pascal.massimino@gmail.com>
Date: Sat, 28 Feb 2026 09:15:23 +0100
Subject: fix(shader_editor): sync CommonUniforms to current struct, fix layout

- Update CommonUniforms: remove _pad0/_pad1, add beat_time/beat_phase,
  move _pad to end (matches src/shaders/common_uniforms.wgsl)
- Fix JS uniform write order to match new layout
- Fix flex-direction: row override (common.css forced column, hiding editor)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 tools/shader_editor/index.html | 35 ++++++++++++++++++++---------------
 1 file changed, 20 insertions(+), 15 deletions(-)

(limited to 'tools/shader_editor/index.html')

diff --git a/tools/shader_editor/index.html b/tools/shader_editor/index.html
index d93a595..d318304 100644
--- a/tools/shader_editor/index.html
+++ b/tools/shader_editor/index.html
@@ -6,6 +6,10 @@
     <title>WGSL Shader Editor</title>
     <link rel="stylesheet" href="../common/style.css">
     <style>
+.container {
+    flex-direction: row;
+}
+
 .preview-pane {
     flex: 0 0 57%;
     background: #252526;
@@ -428,13 +432,13 @@ class WebGPUPreview {
 @group(0) @binding(1) var txt: texture_2d<f32>;
 
 struct CommonUniforms {
-    resolution: vec2<f32>,
-    _pad0: f32,
-    _pad1: f32,
+    resolution: vec2f,
     aspect_ratio: f32,
     time: f32,
-    beat: f32,
+    beat_time: f32,
+    beat_phase: f32,
     audio_intensity: f32,
+    _pad: f32,
 };
 @group(0) @binding(2) var<uniform> uniforms: CommonUniforms;
 
@@ -460,7 +464,7 @@ struct CommonUniforms {
     );
 
     // Pulsing circle
-    let d = length(uv) - 0.3 - 0.1 * sin(uniforms.beat * 6.28);
+    let d = length(uv) - 0.3 - 0.1 * sin(uniforms.beat_phase * 6.28);
     let circle = smoothstep(0.02, 0.0, d);
     let glow = 0.02 / (abs(d) + 0.02);
 
@@ -528,13 +532,14 @@ struct CommonUniforms {
             this.currentTime = (now - this.startTime) / 1000;
         }
 
-        const loopTime = (this.currentTime % this.loopPeriod) / this.loopPeriod;
+        const beatPhase = (this.currentTime % this.loopPeriod) / this.loopPeriod;
+        const beatTime = this.currentTime / this.loopPeriod;
         const audioPeak = this.autoPulse ? 0.5 + 0.5 * Math.sin(this.currentTime * Math.PI) : this.audioPeak;
 
         const uniformData = new Float32Array([
-            this.canvas.width, this.canvas.height, 0, 0,
+            this.canvas.width, this.canvas.height,
             this.canvas.width / this.canvas.height,
-            this.currentTime, loopTime, audioPeak,
+            this.currentTime, beatTime, beatPhase, audioPeak, 0,
         ]);
 
         this.device.queue.writeBuffer(this.uniformBuffer, 0, uniformData);
@@ -546,7 +551,7 @@ struct CommonUniforms {
             this.lastFrameTime = now;
         }
 
-        return { time: this.currentTime, loopTime, audioPeak };
+        return { time: this.currentTime, beatPhase, beatTime, audioPeak };
     }
 
     render() {
@@ -608,13 +613,13 @@ struct CommonUniforms {
 // Main App
 const composer = new ShaderComposer();
 composer.registerSnippet('common_uniforms', `struct CommonUniforms {
-    resolution: vec2<f32>,
-    _pad0: f32,
-    _pad1: f32,
+    resolution: vec2f,
     aspect_ratio: f32,
     time: f32,
-    beat: f32,
+    beat_time: f32,
+    beat_phase: f32,
     audio_intensity: f32,
+    _pad: f32,
 };`);
 
 const canvas = document.getElementById('preview-canvas');
@@ -718,8 +723,8 @@ function renderLoop() {
     if (stats) {
         fpsCounter.textContent = `FPS: ${preview.getFPS()}`;
         timeValue.textContent = stats.time.toFixed(2);
-        loopTimeValue.textContent = stats.loopTime.toFixed(2);
-        loopTimeBar.style.width = `${stats.loopTime * 100}%`;
+        loopTimeValue.textContent = stats.beatPhase.toFixed(2);
+        loopTimeBar.style.width = `${stats.beatPhase * 100}%`;
         audioPeakValue.textContent = stats.audioPeak.toFixed(2);
     }
     requestAnimationFrame(renderLoop);
-- 
cgit v1.2.3