Visualize and debug WebGL fragment shader uniform variables in real-time. A free, browser-based tool using Three.js to manipulate shader parameters instantly.
AI Generation Prompt
WebGL Fragment Shader Uniform Debugger
Overview
This application is a single-file, browser-based tool designed to allow developers to rapidly prototype, test, and debug WebGL fragment shaders using Three.js. It allows users to write custom GLSL code and immediately interact with the declared uniform variables via an auto-generated control panel.
Technical Constraints & Implementation
- Single File: All HTML, CSS, and JS (including Three.js via CDN) must reside in one file.
- No Storage: Usage of
localStorage,cookies, or any persistent state is strictly prohibited. State is handled entirely in-memory. - Design: Light-mode only, professional SaaS aesthetic, utilizing system fonts and high-contrast, clean UI elements.
- Sandbox Safety: No popup alerts. Errors are displayed in a dedicated UI console section.
UI Layout
- Header: Contains the app title, a 'Compile Shader' action button, and a status indicator (e.g., 'Ready', 'Compiling', 'Error').
- Main Layout (Split-Screen):
- Editor Pane: A code entry area (using a lightweight code editor library like CodeMirror or a syntax-highlighting textarea) for GLSL fragment code.
- Preview Pane: A full-screen or responsive Three.js Canvas where the shader is rendered on a plane.
- Uniform Controller Pane: An auto-generated panel that detects uniform variables (e.g.,
uniform float u_speed;) and renders appropriate inputs (sliders for floats, color pickers for vec3, etc.).
- Error Console: A collapsible bottom drawer that displays shader compilation logs or Three.js runtime errors.
Feature List
- Auto-Detection: Parser that scans GLSL code for
uniformdeclarations to dynamically build the UI controls. - Real-time Rendering: Instant updates to the shader when uniform values change or code is recompiled.
- Responsive Resizing: The Three.js canvas dynamically adjusts resolution based on the container size to maintain quality.
- Performance Monitoring: Small FPS counter overlay in the corner of the viewport.
- Light-Mode Aesthetic:
- Background: Soft off-white or light gray (#F8F9FA).
- Accents: Professional blue/teal for action buttons (#007AFF).
- Typography: Inter or system-ui sans-serif stack.
- Animations: Smooth CSS transitions on panel expansion/collapse and hover states on inputs.
Developer Directives
- Use
THREE.ShaderMaterialto wrap user input. - Implement a safe parser that regex-extracts uniform types and names from the input string to generate UI components.
- Ensure the WebGL context is properly handled during window resizing to prevent canvas flickering.
- Ensure no external frameworks (Vue/React) are used; keep logic in vanilla JS modules.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is this WebGL Fragment Shader Uniform Debugger?
This tool is an interactive, browser-based environment designed to help developers and designers test WebGL fragment shader uniforms without writing boilerplate setup code. By leveraging Three.js, it provides a dedicated viewport to visualize how uniform variables (such as floats, vectors, and colors) affect the shader output in real-time. It eliminates the need for complex build steps or local server environments, allowing for rapid prototyping directly in the browser. Users can simply input their GLSL fragment shader code, and the tool automatically generates corresponding input controls, enabling instant visual feedback for shader tweaks and parameter adjustments.
Can I save my shader code using this tool?
For security and privacy, this application operates strictly in-memory within your browser's sandboxed environment. It does not use localStorage, cookies, or external databases to save your data, ensuring a secure experience where your code remains strictly on your local machine. Because the application resets on page refresh, we recommend copying your finalized shader code to a local file or version control system to ensure it is preserved. This design prioritizes your privacy and prevents potential data persistence issues in restricted iframe environments.
Does this tool support all Three.js shader features?
This debugger is optimized for standard fragment shader uniform types including floats, integers, boolean flags, and vector inputs (vec2, vec3, vec4). It maps these to intuitive HTML form controls such as sliders, color pickers, and number inputs to make real-time parameter tuning seamless and efficient for developers. While it supports the core functionality of fragment shaders via Three.js, it is intended for testing and rapid visualization rather than full-scale engine development. It provides the perfect sandbox for experimenting with visual effects, mathematical functions, and color manipulation within a fragment shader.
Is this tool mobile-friendly?
Yes, the application is built with a responsive, mobile-first design philosophy, ensuring it performs optimally across various screen sizes, from tablets to desktop monitors. The UI layout adapts to provide a clean, uncluttered interface that separates the shader editor from the interactive preview window. Touch-friendly input components have been carefully selected to ensure that adjusting uniform values is intuitive on mobile devices. Whether you are performing a quick edit on a tablet or a detailed shader analysis on a desktop, the interface provides a professional-grade experience that maintains visual clarity and responsiveness.
