Skip to main content

Fragment Shaders

Common GLSL Variables and Functions:

These functions could be specific to Shadertoy or OpenGL ES 

  • fragCoord.xy: Current pixel coordinates (in pixels).
  • iResolution.xy: Screen resolution, used for normalization.
  • iTime: Time since shader started, useful for animation.
  • iMouse: Mouse position, used for interaction.
  • iChannel0, iChannel1, etc.: Texture samplers for loading images or videos.
  • gl_FragCoord: Built-in pixel coordinates in GLSL.
  • dot, cross, normalize: Vector math functions for lighting and geometric operations.
  • Transformations: Rotation, scaling, and translation toanipulate coordinates.
  • mod, fract: Useful for creating repeating or tiled patterns.

Getting Started 

When you're working in shaders, the pixel coordinates from fragCoord.xy are typically in pixel units (e.g., ranging from (0,0) to (1920,1080) for an HD screen). If you want to make your shader work consistently across different resolutions, you need to normalize these coordinates.

By dividing fragCoord.xy by iResolution.xy, you map the pixel coordinates to a normalized space, which usually ranges from [0, 1].

INCLUDE CODE HERE

1. fragCoord.xy:
  • Definition: fragCoord.xy is a built-in variable in GLSL that represents the coordinates of the current fragment (or pixel) on the screen.
  • Values: It provides the (x, y) pixel coordinates of the fragment being processed, starting from the bottom-left corner (which is (0, 0) in most shader coordinate systems) and going up to the width and height of the viewport (i.e., screen resolution).
  • Purpose: It allows you to know the exact location of the pixel you're working with. For instance, if your window is 1920x1080, fragCoord.xy will range from (0,0) (bottom-left corner) to (1920,1080) (top-right corner).

2. iResolution.xy:
  • Definition: iResolution.xy is a uniform variable specific to ShaderToy that represents the dimensions of the screen (viewport) in pixels, i.e., the resolution of the output window.
  • Values: iResolution.x is the width of the screen in pixels, and iResolution.y is the height of the screen in pixels.
  • Purpose: It provides the resolution of the screen so that you can scale or normalize coordinates based on the size of the output window. This is important to make sure your shader adapts to different screen resolutions.

Relationship Between fragCoord.xy and iResolution.xy:

When you're working in shaders, the pixel coordinates from fragCoord.xy are typically in pixel units (e.g., ranging from (0,0) to (1920,1080) for an HD screen). If you want to make your shader work consistently across different resolutions, you need to normalize these coordinates. This is where iResolution.xy comes in handy.

By dividing fragCoord.xy by iResolution.xy, you map the pixel coordinates to a normalized space, which usually ranges from [0, 1].

Back to top