Shadertoy coding

This is a very brief introduction to how the shaders in Shadertoy interface with the rendering platform of your choice (WebGL in the case of the web client, Opengl 2, Opengl 3 or Opengl 4 in case of the native app, OpenGL ES in case of the iOS version). The interface description contains what inputs and outputs are needed for the shaders to produce the images, the sound and the VR rendering.

Image shaders

Image shaders implement the mainImage() function in order to generate the procedural images by computing a color for each pixel. This function is expected to be called once per pixel, and it is responsability of the host application to provide the right inputs to it and get the output color from it and assign it to the screen pixel. The prototype is:

void mainImage( out vec4 fragColor, in vec2 fragCoord );

where fragCoord contains the pixel coordinates for which the shader needs to compute a color. The coordinates are in pixel units, ranging from 0.5 to resolution-0.5, over the rendering surface, where the resolution is passed to the shader through the iResolution uniform (see below).

The resulting color is gathered in fragColor as a four component vector, the last of which is ignored by the client. The result is gathered as an "out" variable in prevision of future addition of multiple render targets.

Sound shaders

Sound is generated by GLSL shaders through the mainSound() entrypoint, which has the following prototype:

vec2 mainSound( float time )

where the time variable contains the time, in seconds, of the sound sample for which the wave amplitude needs to be computed. This time will be sampled at a sample rate specified by the iSampleRate uniform, which typically will be 44100 or 48000 depending on the host application.

The desired wave amplitude is output as a pair of values, for stereo (left and right channel) sound, though the return value of the mainSound() function.
Shaders that implement the mainSound entrypoint will automatically be flagged as sound shaders and will be searchable though the filter system under the Sound Output qualifier.

VR shaders

Shadertoy shaders can create images for Virtual Reality (VR) mediums seamlessly. For that shaders must implement the mainVR() entry point, which is optional and has this prototype:

void mainVR( out vec4 fragColor, in vec2 fragCoord, in vec3 fragRayOri, in vec3 fragRayDir )

where fragCoord and fragColor work the same as in regular 2D image shaders: they contain the pixel coordinates in surface space and the output pixel color.

The variables fragRayOri and fragRayDir contain the ray origin and ray direction of the ray that goes through that pixel in the virtual world, given in tracker space. The shader is expected to transform these values into camera space if a moving camera is to be moved though the virtual world. The ray origin is given as variable and not uniform for VR systems where the camera is not modelled as a pinhole camera.

Shaders that implement the mainVR entrypoint will automatically be flagged as VR ready and will be searchable though the filter system under the VR qualifier.

Input Uniforms

Shader can be fed with different types of per-frame static information by using the following uniform variables:

uniform vec3 iResolution;
uniform float iTime;
uniform float iTimeDelta;
uniform float iFrame;
uniform float iChannelTime[4];
uniform vec4 iMouse;
uniform vec4 iDate;
uniform float iSampleRate;
uniform vec3 iChannelResolution[4];
uniform samplerXX iChanneli;

External Resources

Fabrice's Unofficial Shadertoy Blog:

Facebook Unofficial Shadertoy Group:

Video Tutorial for beginners on making shaders: