junkpile

02 · Tauri v1 Raw WebGL Single Window

A focused foundation for running a GLSL ES 1.00 shader through raw WebGL inside one Tauri v1 WebView.

This folder intentionally retains its original repository name:

webgl-tauri-v1-single-template

The visible example number is 02 so it aligns with the complete Junkpile Tauri v1 Essentials sequence.

What this example teaches

• Creating a WebGL 1 context without p5.js or another graphics framework
• Compiling vertex and fragment shader stages
• Linking a complete GPU program
• Uploading full-screen quad geometry into an array buffer
• Resolving vertex attributes and shader uniforms
• Driving a render loop with requestAnimationFrame()
• Resizing the real WebGL drawing buffer with its containing panel
• Recovering from WebGL context loss
• Calling a small Rust command from JavaScript to control the native window

Signal flow

HTML range / checkbox
        ↓
     params{}
        ↓
requestAnimationFrame()
        ↓
gl.uniform*()
        ↓
gl.drawArrays()
        ↓
GLSL fragment shader
        ↓
WebGL canvas in the same WebView

There is no WebSocket, inter-window relay, p5.js renderer, or native GPU surface.

Run

npm install
npm run dev

Production build

npm run build

On macOS, generated bundles are placed under:

src-tauri/target/release/bundle/

Unsigned builds may trigger Gatekeeper on another Mac. Public distribution generally requires Apple signing and notarization.

Controls

Section	Parameter	Purpose
Color	Hue shift	Rotates the shader palette
Color	Saturation	Moves from monochrome to vivid color
Color	Brightness	Multiplies final output brightness
Motion	Zoom	Scales shader coordinates
Motion	Speed	Advances the accumulated animation clock
Motion	Distortion	Strengthens domain warping
Pattern	Complexity	Changes the fBm octave count
Pattern	Symmetry	Changes rotational folding
Pattern	Glow	Brightens the center of the field
Switches	Invert	Inverts the final color
Switches	Pulse	Enables rhythmic brightness modulation
Switches	Rotate	Rotates the complete coordinate field

Keyboard shortcuts:

Key	Action
Space	Pause or resume animation
R	Restore defaults and reset time
C	Recompile the shader program
F	Toggle native-window fullscreen

Project structure

webgl-tauri-v1-single-template/
├── README.md
├── MODERNIZATION-NOTES.md
├── package.json
├── src/
│   ├── index.html
│   ├── sketch.js
│   └── styles.css
└── src-tauri/
    ├── Cargo.toml
    ├── tauri.conf.json
    └── src/main.rs

Raw WebGL bootstrap

The complete setup is visible in src/sketch.js:

1. canvas.getContext('webgl')
2. gl.createShader() and gl.compileShader()
3. gl.createProgram() and gl.linkProgram()
4. gl.createBuffer() for a four-vertex full-screen quad
5. gl.getAttribLocation() and gl.vertexAttribPointer()
6. gl.getUniformLocation() and gl.uniform*() every frame
7. gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)

The small diagnostics panel reports shader compilation and link status. The dedicated shader-playground examples later provide source editing and richer error parsing.

Add a new shader parameter

1. Add a range input and matching <output> in src/index.html.
2. Add its default to DEFAULT_PARAMS in src/sketch.js.
3. Add its ID to SLIDER_IDS.
4. Declare a matching uniform in FRAG_SHADER.
5. Upload it in render() with uniform1f() or uniform2f().
6. Use the uniform in the shader.

GLSL ES 1.00 note

WebGL 1 requires fixed compile-time loop bounds. The fbm() function loops to a fixed maximum of eight iterations and exits early using the float u_complexity uniform.

Known limitations

• This example is deliberately single-window.
• It uses browser WebGL rather than native wgpu.
• The drawing buffer uses CSS-pixel dimensions for predictable performance.
• Uniform locations are resolved by the helper during each frame to keep the educational path obvious; production engines usually cache them.

This site is open source. Improve this page.