minishader

MiniShader is a small JS/WebGL renderer for prototyping fragment shaders locally. It provides common uniforms, up to three image/video inputs, and can export a standalone HTML page. GLSL errors will be shown too.

The code utilises CodeMirror version 5 for the shader editing textarea. Uses CodeMirror 5 for the shader editor. CodeMirror is © Marijn Haverbeke and contributors, released under the MIT License. https://codemirror.net/5/

Images are saved as inline uuencoded data. This is not the case for videos because of size. You will be asked to provide a URL for each input that uses a video.

Uniforms

• iTime - seconds since start/reload
• iResolution - canvas size in pixels (x, y, 1.0)
• iMouse - mouse position in pixels (x, y, 0, 0)
• iFrame - frame count since start/reload
• aspect - width / height
• color - extra color helper (vec4)
• iChannel0 - texture/video input
• iChannel1 - texture/video input
• iChannel2 - texture/video input

See example shaders in the examples/ folder and the "Docs" tab for available uniforms and usage.

Shortcuts

(when focus is not in the editor)

• Ctrl+S - reload shaders
• Ctrl+F1 - export image
• Space - pause/resume time

Also added an example image in the image/ folder. It is included as uuencoded data in the HTML.

The source code is based on a prototype I wrote and extended a few years later, co-developed with the help of AI.

Quick Start

• Serve the folder locally (recommended): python3 -m http.server and open http://localhost:8000.
• file:// may block WebGL texture uploads and external media due to browser security/CORS.

Export HTML

• Export embeds shader code and inline image data.
• Video channels are exported as URLs (prompted on export). Empty URLs get placeholders.
• Large media will increase the export size or require external hosting.

Media Inputs

• iChannel0, iChannel1, iChannel2 accept images or video.
• Videos update each frame; images are uploaded once.

Limitations

• Full video embedding is not supported in the standalone export.
• External media URLs require CORS headers.

License

MIT License. See LICENSE.