1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
# WGSL Shader Editor
Live WebGPU shader editor with syntax highlighting and #include composition.
## Quick Start
```bash
# Option 1: Direct file access
open tools/shader_editor/index.html
# Option 2: Local server (recommended)
python3 -m http.server 8000
# Then open http://localhost:8000/tools/shader_editor/
```
## Features
- **Live WebGPU Preview** (57% screen) - Auto-plays on load
- **Syntax Highlighting** (43% screen) - WGSL keywords, types, comments
- **Shader Composition** - `#include` directive support
- **Animation Controls** - Time, loop (0→1), audio peak
- **File I/O** - Load/save .wgsl files
- **Default Scene** - Animated gradient + pulsing circle
## Controls
**Animation:**
- Auto-plays on load (Pause button to stop)
- Loop Time: 0.0→1.0 progress bar (maps to `uniforms.beat`)
- Loop Period: Adjustable cycle duration (default 2.0s)
- Audio Peak: Manual slider or auto-pulse mode
**Keyboard:**
- `Ctrl/Cmd+S` - Save shader
- `Ctrl/Cmd+O` - Load shader
- `Space` - Play/Pause
- `Tab` - Insert 4 spaces
## Available Uniforms
All shaders have access to `CommonUniforms` at `@binding(2)`:
```wgsl
struct CommonUniforms {
resolution: vec2<f32>, // Canvas width/height
aspect_ratio: f32, // width / height
time: f32, // Seconds since start (resetable)
beat: f32, // Loop time 0.0→1.0 (configurable period)
audio_intensity: f32, // Manual slider or auto-pulse
};
@group(0) @binding(2) var<uniform> uniforms: CommonUniforms;
```
Standard bindings:
- `@binding(0)` - Sampler
- `@binding(1)` - Texture (1x1 black placeholder)
- `@binding(2)` - CommonUniforms
## Snippets
Click "📚 Snippets" button to view available includes. Core snippet:
```wgsl
#include "common_uniforms"
@group(0) @binding(2) var<uniform> uniforms: CommonUniforms;
```
Math: `math/sdf_shapes`, `math/sdf_utils`, `math/common_utils`, `math/noise`
Render: `render/scene_query_linear`, `render/lighting_utils`, `render/shadows`
Primitives: `sdf_primitives`, `lighting`, `ray_box`, `ray_triangle`
## Technical Details
See `SHADER_EDITOR_DETAILS.md` for:
- Uniform buffer layout
- Bind group specification
- Example shaders
- Architecture overview
## Current Limitations
- Fragment shaders only (no compute/vertex)
- Single 1x1 black texture placeholder
- Fixed 1280×720 resolution
- Hardcoded snippet library
- Basic syntax highlighting (no autocomplete)
## Next Steps
See `SHADER_EDITOR_PLAN.md` for roadmap.
|
