WebGL GLSL Shader Editor Extension for Google Chrome
A Chrome DevTools extension to help you edit shaders live in the browser. Very much based on Firefox DevTools Shader Editor. Here's a video showing it in action
Twin project of Web Audio API Editor Extension for Google Chrome
Some more info about this project: Creating a Plug'n Play Live WebGL Shader Editor
How to install
From the chrome store:
Load the extension from disk directly:
- Checkout the repo
- Open Chrome's Extensions page (
Settings / More tools / Extensions)
- Click on `
Load unpacked extension...
- Select the folder /src in the checked out project
Alternatively, you can pack the extension yourself and load by dropping the .crx file in the Extensions page.
How to use
- Browse to a page with WebGL content (you can find many here http://threejs.org/, here https://www.chromeexperiments.com/webgl or here http://www.webgl.com/)
- Open DevTools
- Select the
- The extension needs to instrument
WebGLRenderingContext: if you open DevTools after the page has loaded, hit the
Reloadbutton. If the extension was already running, it automatically instruments the page.
- If there are calls to
.createProgram, the UI will show a list
- Select a program to see its vertex shader and fragment shader
- Use the Pretty Print icon to make the code more readable
- Use the fullscreen button to make the code editor bigger
- Use the Star icon to apply the GLSL Optimiser
- Use the check mark icon next to each shader's name to toggle its visiblity
- Use the Eye icon to disable shader highlighting
- On the Textures tab, click on a texture to open a File Dialog to use another texture, or drag and drop a file into the texture.
- On the Setting tab, enable or disable texture monitoring and shader highlighting (for performance reasons)
As always: forks, pull requests and code critiques are welcome!
Detect when the page is reloaded or changed Issue #1 Highlight shaders when hovering over list item Issue #3
- Check why some pages don't load (like http://david.li/flow/) Issue #4
- Figure out why it doesn't .postMessage the first time it's injected Issue #5
- Figure out why it doesn't work on Android over remote debugging Issue #6
Nice to have:
- Save to disk (?) - Not possible for now with the DevTools API
- Add uniform tracking to display values fed to the shader
Integrating @aras-p + @zz85 GLSL OptimizerAdded
Copyright (C) 2015 Jaume Sanchez Elias, http://www.clicktorelease.com