https://github.com/prideout/shaderhud
quick shader editor overlay for debugging
https://github.com/prideout/shaderhud
Last synced: 5 months ago
JSON representation
quick shader editor overlay for debugging
- Host: GitHub
- URL: https://github.com/prideout/shaderhud
- Owner: prideout
- License: mit
- Created: 2018-11-11T00:19:05.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-11-11T18:42:33.000Z (over 7 years ago)
- Last Synced: 2025-08-09T15:54:01.728Z (10 months ago)
- Language: JavaScript
- Size: 9.77 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
This package displays a shader editor over your `` that lets you modify the GLSL
code in any running WebGL 2.0 app. This makes it easy to perform experiments and diagnostics.
Shaderhud is fairly robust at collecting shaders for viewing purposes, but the shader editing
feature only works with certain rendering engines that use uniform blocks (e.g. [Filament]).
There are many limitations to shader editing due to the fact that WebGL doesn't allow shaderhud
to glean information from a `WebGLUniformLocation` object.
To inject shaderhud, first paste this into your browser's developer console:
```js
const script = document.createElement('script');
script.src = '//unpkg.com/shaderhud';
document.head.appendChild(script);
```
Next you need to activate the widget by calling the `shaderhud()` function, passing in your
canvas element and context. Here's an example for a [Filament] app:
```js
const canvas = document.getElementsByTagName('canvas')[0];
shaderhud(canvas, Filament.ctx);
```
[Filament]: https://github.com/google/filament