Interactive Shader Parameters

by GameDev.net · GLSL ES 3.00 (WebGL2) · 25 Aug 2026

Beginner 2D interaction parameters starter

Run the shader to adjust these controls.

What it demonstrates

This project presents every parameter type supported by ShaderLab's source annotations in one coherent shader. Radius is a float slider, Ray count is an integer stepper, Animate is a checkbox, Center is a vec2 control, Tint is a vec3 color picker, and Background RGBA is a four-component control. Together they shape a radial flower motif.

Shader inputs

void mainImage(out vec4 fragColor, in vec2 fragCoord)

Called once per pixel. Write the colour to fragColor.

iResolution vec3: Viewport size in pixels (z is the pixel aspect ratio).
iTime float: Seconds since the shader started.
iTimeDelta float: Seconds since the previous frame.
iFrameRate float: Frames per second, smoothed.
iFrame int: Frames rendered since the start.
iMouse vec4: Mouse position: xy while held, zw of the last click.
iDate vec4: Year, month, day, and seconds within the day.
iChannel0 sampler2D: Texture bound to channel 0.
iChannel1 sampler2D: Texture bound to channel 1.
iChannel2 sampler2D: Texture bound to channel 2.
iChannel3 sampler2D: Texture bound to channel 3.
iChannelResolution vec3[4]: Pixel size of each bound channel texture.
iChannelTime float[4]: Playback time of each channel, in seconds.
iSampleRate float: Audio sample rate, always 44100.

Main Image8

1 uniform float uRadius; // @param 0.08..0.42 = 0.27 "Radius"

2 uniform int uRays; // @param 3..12 = 7 "Ray count"

3 uniform bool uAnimate; // @param = 1 "Animate"

4 uniform vec2 uCenter; // @param 0.2..0.8 = 0.5, 0.5 "Center"

5 uniform vec3 uTint; // @param 0.0..1.0 = 0.18, 0.78, 0.95 color "Tint"

6 uniform vec4 uBackground; // @param 0.0..1.0 = 0.025, 0.04, 0.09, 1.0 "Background RGBA"

8 void mainImage(out vec4 fragColor, in vec2 fragCoord) {

9 vec2 uv = fragCoord / iResolution.xy;

10 vec2 p = uv - uCenter;

11 p.x *= iResolution.x / iResolution.y;

12 float angle = atan(p.y, p.x);

13 float phase = uAnimate ? iTime * 0.7 : 0.0;

14 float petals = 0.75 + 0.25 * cos(float(uRays) * angle + phase);

15 float shapeRadius = uRadius * petals;

16 float shape = 1.0 - smoothstep(shapeRadius, shapeRadius + 0.012, length(p));

17 vec3 color = mix(uBackground.rgb, uTint, shape);

18 fragColor = vec4(color, uBackground.a);

19 }

Learn from this shader

How it works

Each uniform has a same-line @param comment. Numeric ranges define control bounds, equals signs provide defaults, quoted text supplies labels, and the word color requests a picker for the vec3. The shader converts fragments to coordinates around Center and aspect-corrects x. atan gives the angle around the center. Ray count multiplies that angle to create repeated lobes; optional time advances their phase. The cosine result modulates Radius, and a smooth radial threshold blends Tint over the background. The fourth background component becomes output alpha.

Try changing

Adjust each control independently before combining them. Use an even and odd Ray count, disable Animate to inspect a fixed phase, move Center near the range limits, and compare saturated with muted colors. In a fork, change defaults in the comments, narrow a range, or remove the color marker to see the same three values represented as ordinary sliders.

Using it in a game

Source-declared controls are useful when exposing safe material variations to artists, technical designers, or tutorial readers. An engine would normally define equivalent properties in a material inspector rather than parse these comments. Preserve sensible bounds and defaults when recreating the interface, and confirm the target pipeline's alpha blending behavior.

Explore the techniques

Continue with curated explanations and progressively related examples.

2D & patternShapes, tiling, symmetry and colour worked out in the plane.

LicenseMIT

Views0

Forks0

Discussion

Loading comments...