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).
- 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 ?
- 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 . )
- 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
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
- 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
Note that Firefox and Chrome now allow direct editing (and more) of any online shader: