Extending: Plugins and scripts
Plugin “Shadertoy unofficial” (unrelated to this site 🙂 )
Features: extend and fix what you dreamed of 🙂
- Fork any shader.
- Backup all your shaders, import or export shaders.
- Adjustable slider for full control of ‘iTime’ uniform and audio/video inputs + loops.
4 sliders simulating mouse position. - Make link clickable. Make key shortcut work even in fullscreen.
- Speed-up button for simulation-based shaders.
- Image preview (to compare what you see with what the coder saw).
- List of your own recent visited shaders (life-changer for finding again private and unlisted shaders 🙂 ).
- Change resolution in windowed and fullscreen mode by pressing keys 1…9.
- Take screenshot width doubled resolution.
- Pause/Restart in fullscreen mode.
- Fullscreen edit mode.
- and more…
Scripts for TamperMonkey plugin (all browsers)
- Andrei Drexler proposes several goodies (some have then be included in Shadertoy):
Comments preview, browse errors, first-person mouse, enhance video recording, display perfs, limit framerate, force webGL1,…
Using custom textures (only on your local machine)
- Chrome plugin Shadertoy Custom Textures
- Semi-automatic method for all browsers [old link]
- Manual method via the JS console
Exporting images and video
Shadertoy now natively allows to save images and videos of the result, and exr images of the buffers (including CubeMapA).
In addition:
- The Shadertoy unofficial plugin add some goodies ( sur-resolution, etc).
- The Shadertoy frame exporter allow to choose format, fps, duration, and save the video as files.
- The Koltes Digital frame exporter [ obsolete ? ]
- As an alternate, one can convert a saved webm video from shell using
ffmpeg -i capture.webm -vf fps=30 -filter:v "scale=910:512, crop=512:512" frame%3d.png
360 images and images with depth (e.g. for Facebook)
Many mobile phones can now provide cylindrical or spherical panorama is “360°” format, as well as images with depth. Facebook, for instance, can display them natively ( only as image in a front post for now, not in a reply ).
How to produce them with Shadertoy ?
“360” images:
- from CubeMapA:
- click the “save image” button of CubeMapA. Note that the format is exr.
- convert the .exr to .jpg with your favorite tool ( ImageMagick convert, Gimp, etc ).
- add the “360” metadata tag to the image:
exiftool -ProjectionType="equirectangular" <image>.jpg
The tool can be found here: https://exiftool.org/ or on linux, just search in packages list.
- from the Image tab:
Compute the projection as in this shader, but commenting out the #define STEREO line 156
Images with depth:
- Making a native file from RGB + depth in A, or depth as a 2nd image: I don’t know.
- In Facebook: just download 2 images: <name>.jpg and <name>_depth.png
Pseudo-scripts (via URL, using bookmarks)
[ no longer allowed ]
(… but you can still copy-paste them in the JS console via F12 . )
Theron Tarigo (aka TTG ) propose several goodies here ( + corresponding shadertoy ) :
- Create a shader (+content) with a simple bookmarkable link ( e.g. your custom default shader )
- Load them (or first, export) from a bookmarkable JS ( if enabled on your browser ).
- Overwrite an existing shader.
Replacing: Websites and Desktop apps
Shadertoy cousins
Fragment shader: (like shadertoy)
- Shaderoo quasi-clone. Goodies: geometry shader, infinite amount of buffers, external textures, includes, save geometry, comments in latex or images.
- shaderboy quasi-clone (but without textures and cubemap yet), especially convenient on smarthphone, can be installed standalone, shaders stored on GoogleDrive. Goodies: GUI for uniforms (+ 24 extra), export video and sounds. Keymap, features and compatibility.
- ISF Goodies: vertex shaders, sliders, modules, textures, integrable
no buffers, no textures:
- glslsandbox Goodies: clone, camera
- GLSLbin Goodies: includes ( from many base stack.gl shaders )
- OneShader Goodies: extra sliders for uniforms with default value
- ShaderGif Goddies:
Applied on a mesh: ( + vertex shader, possibly )
- shdr@bkcore Goodies: vertex shaders, snippets, camera, 3D models, custom models
- shaderfrog Goodies: shaders + composer, vertex shaders, clone, uniforms, camera, 3D models, custom models
- shader_editor@kickjs Goodies : vertex shaders, load texture, uniforms, 3D models
- vertexShaderArt Goodies: tune vertex position and color at the same time.
On desktop (quick shader prototypers):
- KodeLife Goodies: vertex, tesselators, geometry, fragments, custom model, Shadertoy compatibility mode
- glslEditor
- shaderEd ( also have an online lite version )
- shaderboi Run shadertoys offline, + output goodies ( used on the demoscene ).
Applications compatible with Shadertoy
- Shadertoy iOS app.
- libShadertoy (Ubuntu and Debian) : run shadertoys from your desktop app.
Also a simple way to play with fragments shaders on desktop without all the burden (bindings…), with the Shadertoy convention for extra uniforms (mouse, time…).
Can mix GLSL, CUDA, C++ passes. - Vulkan shadertoy launcher (Windows & Linux): run shadertoys from your desktop app using vulkan.
Note that this allows to replace floats with doubles (and vec2 with dvec2 , etc) to improve precision. - ShadertoyConnector (Ubuntu and Debian) : interface with Mathematica and Octave
( send parameters and arrays to your shader, get the resulting image as array).
Also a simple way to interface GLSL shaders with Mathematica and Octave. - Accessing shadertoy database from your website or appli: web API.
- Note that some programs are more or less shadertoy-compatible:
Gratin, Natron, KodeLife . - Grimoire (Linux, MaxOS, Windows): command-line tool for creating shader demos
- Shader Web Background : get a shadertoy on webpage background.
- TurboPlay : multimedia editor.
- shadertoy plugin for VisualStudioCode
More
Note that Firefox and Chrome now allow direct editing (and more) of any online shader:
It’s also worth mentioning GlslViewer, from https://github.com/patriciogonzalezvivo/glslViewer, which is great for developing shaders (both vertex and fragment, and combined) locally.
LikeLike
it’s not clear in the description: is it directly compatible with Shadertoy ?
( for I don’t plan to mention the xillion of desktop GLSL viewers 🙂 ).
LikeLike
Hadn’t heard of Grimoire. This may be a game-changer for me – simple running of shaders locally based on my own text editor. Thanks for this list !
LikeLike
the link for “Semi-automatic method for all browsers” is 404, but the project seems to be still live here: https://github.com/andrewhills/ShadertoyCustomTextures .
LikeLike
thanks !
fixed.
LikeLike
Wow, I just discovered this! Thanks Fabrice.
For what it’s worth, I worked on this a while back: https://github.com/toomuchvoltage/shadertoy-utils
Gives you custom textures/sounds (without needing SoundCloud :).
LikeLike
good !
NB: OpenGL strange limit is different: as explained on the “compatibility issues” page,
– it’s a bug ( of nvidia drivers, I guess ).
– it’s only if you fetch several time the same array value: bilinear interp = 4 fetches, for which it stupidly uses 4 times more registers.
LikeLike
I’ve glanced over that page, pretty useful! I’m gonna give it a good read soon…
I think this bug is limited to Linux for some reason; I’m on Windows 10 (RTX 2080Ti) and all seems fine.
Interestingly enough, I found someone that got it running nVidia HW in Firefox on Ubuntu… though they did not mention which card. They did say they had the vendor’s own drivers installed: https://www.reddit.com/r/amiga/comments/ctnuab/shadertoy_inspired_by_the_psygnosis_owl_and_the/
LikeLike