OneShader Syntax Reference

Getting Started

To create a new shader, click the New shader 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 'New shader' 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.);
}
        

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