Skip to main content

Converting ShaderToy to GLSL

ShaderToyhaderToy is a platform for creating and sharing shaders in GLSL, but it includes some unique functions and features that are specific to its environment. If you want to port ShaderToy shaders to plain GLSL or another environment, you’ll need to understand these specific functions and how to replace or adapt them.

Here are some common ShaderToy-specific functions and their equivalents or alternatives in standard GLSL:

  1. 1. **`iGlobalTime`**iGlobalTime: This variable represents the time elapsed since the shader started running.

      - **
    • In GLSL**GLSL: You’ll need to pass the elapsed time as a uniform variable. For example:
      ```
      glsl
      uniform float uTime; // Use this uniform in your shader
      ```

  2. 2. **`iResolution`**iResolution: This variable holds the resolution of the output image.

      - **
    • In GLSL**GLSL: You can pass the resolution as a uniform variable:
      ```
      glsl
      uniform vec2 uResolution; // Use this uniform in your shader
      ```

  3. 3. **`iMouse`**iMouse: This variable contains the position and state of the mouse.

      - **
    • In GLSL**GLSL: You’ll need to pass the mouse position as a uniform variable:
      ```
      glsl
      uniform vec4 uMouse; // x, y, z, and w can represent mouse position and state
      ```

  4. 4. **`iChannel0`iChannel0, `iChannel1`iChannel1, etc.**: These variables represent textures that you can sample from.

      - **
    • In GLSL**GLSL: You’ll need to pass these textures as uniform sampler2D variables:
      ```
      glsl
      uniform sampler2D uTexture0; // Use this uniform in your shader
      ```

  5. 5. **`mainImage(out vec4 fragColor, in vec2 fragCoord)`**: This is the main function in ShaderToy shaders, where `fragColor`fragColor is the output color and `fragCoord`fragCoord is the coordinate of the current fragment.

      - **
    • In GLSL**GLSL: In a typical GLSL setup, you might use a similar fragment shader function, but the signature and setup might vary depending on your framework. For example, in a typical OpenGL setup, the fragment shader might look like this:
      ```
      glsl
      void main() {
        // Your code here
        }
      ```

  6. 6. **`fragCoord.xy`**xy: This variable provides the coordinates of the current fragment.

      - **
    • In GLSL**GLSL: You can pass these coordinates as a varying variable or compute them based on the screen dimensions:
      ```
      glsl
      vec2 fragCoord = gl_FragCoord.xy; // In a GLSL shader
      ```

When porting shaders, make sure to adapt any dependencies on the ShaderToy environment to the specifics of your target environment. This usually involves setting up appropriate uniform variables, handling texture inputs and outputs, and ensuring that your fragment shader logic aligns with the rendering pipeline you're using.

Back to top