Extending or replacing Shadertoy

Extending: Plugins and scripts

Plugin “Shadertoy unofficial” (unrelated to this site 🙂 )

• Chrome plugin
• Firefox plugin

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:

• Activating the shader developer tool on Firefox
• Equivalent plugin on Chrome

Advertisement