1 files changed, 20 insertions, 15 deletions

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);