diff options
| -rw-r--r-- | tools/shader_editor/index.html | 27 |
1 files changed, 19 insertions, 8 deletions
diff --git a/tools/shader_editor/index.html b/tools/shader_editor/index.html index d74b9ff..4889046 100644 --- a/tools/shader_editor/index.html +++ b/tools/shader_editor/index.html @@ -25,7 +25,7 @@ body { } .preview-pane { - flex: 0 0 70%; + flex: 0 0 64%; background: #252526; position: relative; display: flex; @@ -137,7 +137,7 @@ body { } .editor-pane { - flex: 0 0 30%; + flex: 0 0 36%; background: #1e1e1e; display: flex; flex-direction: column; @@ -457,13 +457,24 @@ struct CommonUniforms { } @fragment fn fs_main(@builtin(position) p: vec4<f32>) -> @location(0) vec4<f32> { - let uv = p.xy / uniforms.resolution; - let c = vec3<f32>( - 0.5 + 0.5 * sin(uniforms.time + uv.x * 3.0), - 0.5 + 0.5 * cos(uniforms.time + uv.y * 3.0), - 0.5 + 0.5 * sin(uniforms.beat * 6.28) + let uv = (p.xy / uniforms.resolution) * 2.0 - 1.0; + uv.x *= uniforms.aspect_ratio; + + // Animated gradient background + let t = uniforms.time * 0.3; + let bg = vec3<f32>( + 0.1 + 0.1 * sin(t + uv.y * 2.0), + 0.15 + 0.1 * cos(t * 0.7 + uv.x * 1.5), + 0.2 + 0.1 * sin(t * 0.5) ); - return vec4<f32>(c * uniforms.audio_intensity, 1.0); + + // Pulsing circle + let d = length(uv) - 0.3 - 0.1 * sin(uniforms.beat * 6.28); + let circle = smoothstep(0.02, 0.0, d); + let glow = 0.02 / (abs(d) + 0.02); + + let col = bg + vec3<f32>(circle) * vec3<f32>(0.8, 0.4, 0.9) + glow * 0.1 * vec3<f32>(0.6, 0.3, 0.8); + return vec4<f32>(col * uniforms.audio_intensity, 1.0); }`; } |