OneShader Syntax Reference

Getting Started

To create a new shader, click the Start Coding link and modify the example in the editor to the right.

All shaders on OneShader are written in GLSL. For the complete specification please have a look at GLSL ES specification.

GLSL ES 3.0

If you start writing a shader you can choose between the GLSL ES 1.0 and the GLSL ES 3.0 syntax. The example code you see when you click on 'Start Coding' is written using the GLSL ES 3.0 syntax:

#version 300 es
precision highp float;

uniform float iTime;
uniform vec2  iResolution;

out vec4 fragColor;

void main() {
    // Screen coordinate (from [-aspect, -1] to [aspect, 1])
    vec2 q   = (2. * gl_FragCoord.xy - iResolution) / iResolution.y;

    // Pixel color
    vec3 col = .5 + .5 * sin((vec3(normalize(q), length(q)) + iTime) * 6.283);

    // Output
    fragColor = vec4(col, 1.);
}
        

GLSL ES 1.0

The same shader written using the GLSL ES 1.0 syntax, would look like this:

precision highp float;

uniform float iTime;
uniform vec2  iResolution;

void main() {
    // Screen coordinate (from [-aspect, -1] to [aspect, 1])
    vec2 q   = (2. * gl_FragCoord.xy - iResolution) / iResolution.y;

    // Pixel color
    vec3 col = .5 + .5 * sin((vec3(normalize(q), length(q)) + iTime) * 6.283);

    // Output
    gl_FragColor = vec4(col, 1.);
}
        

Shadertoy

OneShader supports shaders from Shadertoy. If your code contains void mainImage(out vec4 fragColor, in vec2 fragCoord) without a main() function, it will be detected as a Shadertoy shader. Uniforms like iResolution (vec3), iTime, iTimeDelta, iFrame, iMouse, and iDate are provided.

Fluxer

OneShader supports shaders from Fluxer. If your code contains a vec3 shade(vec2 uv, float time) function without a main() function, it will be detected as a Fluxer shader.

GLSLSandbox

OneShader supports shaders from GLSLSandbox and twigl.app (classic mode). If your code uses resolution, time, mouse, or backbuffer uniforms, it will be detected as a GLSLSandbox shader. (backbuffer not supported)

twigl geekest

OneShader supports twigl.app geekest mode. If your code has no main() function, it will be wrapped in one automatically. Uses single-char uniforms: r (resolution), t (time), m (mouse), f (frame), and o for output. FC is defined as gl_FragCoord. Includes snoise(vec3) for 3D simplex noise.

ISF (Interactive Shader Format)

OneShader supports ISF shaders. If your code contains a JSON metadata block /*{ ... }*/ with INPUTS, it will be detected as an ISF shader. Supported input types: float, bool, long, point2D, color. Uniforms like TIME, RENDERSIZE, TIMEDELTA, DATE, FRAMEINDEX, and PASSINDEX are provided. (WIP and multi-pass not supported)

Note: Format is auto-detected. If your shader contains main(), it uses OneShader format.

Uniforms & Varyings

The following uniforms are provided (adopted from Shadertoy):

uniform float iTime;

Time in seconds.

uniform int iFrame;

Index of rendered frame.

uniform vec2 iResolution;

Resolution or the WebGL canvas.

uniform float iLoop;

Loops from zero to one every 4 seconds.

In many shaders the normalized screen position of the pixel is used. It is therefore available as a varying:

in vec2 vScreen; (in GLSL ES 3.0)

From [-aspectRatio, -1] to [aspectRatio,1].

varying vec2 vScreen; (in GLSL ES 1.0)

From [-aspectRatio, -1] to [aspectRatio,1].

Adjustable uniforms

By adding a specific formatted comment behind the initialisation of an uniform, OneShader can find out the default value of this uniform. A slider that can be used to tweak the value of the uniform will automatically be visible beneath your shader:

uniform float name; // value=x, min=x, max=x, step=x
uniform int   name; // value=x, min=x, max=x, step=x
uniform vec3  name; // value=x,y,z
        

MIDI Learn

If you have a MIDI controller connected, you can use MIDI Learn to control adjustable uniforms with physical knobs, faders, or keys. Click the MIDI Learn button next to any slider, then move a control on your MIDI device to create a mapping. The mapping is saved in your browser and will be restored when you revisit the shader.