Realtime editor for creating webgl shaders with debugging tools to allow for inspecting local variable definitions in a fragment shader.
After lot of frustration with developing shaders and not being able to easily track the calculations within a shader, I wanted explore what the possibilities for enabling a rich shader debugger might be light while still affording the direct shader code editing.
As the vertex and fragment shader are updated, the render display is updated and errors are displayed as annotations.
Zooming in on the image zooms in to a pixel view of the image.
Hovering over a pixel in the preview pane will display the values of all the local variables used for that pixel.
Every local variable will be displayed as a rendered image in the preview bar as though that variable were used to output the color for that fragment.
The vertex and fragment shader being written are saved and reloaded on refresh
- Because colors are stored as 4 8bit values, there is a severe loss of precision when reading out floating point values. Issue 1, Issue 2
- Add pause button for animated variables
- Texture upload
- Uniform variable edit UI
- Multi-pass shaders, stencil buffer, and screen post-effects
- Add mouse position into shader uniforms