https://github.com/gkjohnson/webgl-shader-editor

Realtime editor for creating webgl shaders
https://github.com/gkjohnson/webgl-shader-editor

3d ace-editor editor graphics rendering shaders threejs webgl webgl-programming

Last synced: 3 months ago
JSON representation

Realtime editor for creating webgl shaders

• Host: GitHub
• URL: https://github.com/gkjohnson/webgl-shader-editor
• Owner: gkjohnson
• License: mit
• Created: 2017-09-09T17:55:23.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-07-07T02:51:37.000Z (over 4 years ago)
• Last Synced: 2024-11-01T11:51:26.182Z (3 months ago)
• Topics: 3d, ace-editor, editor, graphics, rendering, shaders, threejs, webgl, webgl-programming
• Language: HTML
• Homepage: https://gkjohnson.github.io/webgl-shader-editor/dist/index.bundle.html
• Size: 4.66 MB
• Stars: 25
• Watchers: 6
• Forks: 6
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# webgl-shader-editor

Realtime editor for creating webgl shaders with debugging tools to allow for inspecting local variable definitions in a fragment shader.

[Demo](https://gkjohnson.github.io/webgl-shader-editor/dist/index.bundle.html)

![Example](/docs/example.gif)

## Goal

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.

## Features

#### Real Time Compilation and Render

As the vertex and fragment shader are updated, the render display is updated and errors are displayed as annotations.

#### Pixel Zoom

Zooming in on the image zooms in to a pixel view of the image.

#### Local Variable Value Inspection

Hovering over a pixel in the preview pane will display the values of all the local variables used for that pixel.

#### Local Variable Color Display

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.

#### LocalStorage Saving

The vertex and fragment shader being written are saved and reloaded on refresh

## Caveats

- Because colors are stored as 4 8bit values, there is a severe loss of precision when reading out floating point values. [Issue 1](https://github.com/gkjohnson/webgl-shader-editor/issues/2), [Issue 2](https://github.com/gkjohnson/webgl-shader-editor/issues/1)

## TODO

- [ ] 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