hs:shader

Start with normalized coordinates from gl_FragCoord divided by u_resolution, then layer noise functions like fBm to build textures such as clouds, marble, or wood. Combine with smoothstep and mix to map noise values to colors.

Use SDF functions that return the distance from a pixel to a shape edge, such as length(st - center) - radius for circles. Convert the distance to a visible shape with smoothstep for anti-aliased edges, and combine shapes with min, max, or smooth boolean operations.

Perlin and gradient noise interpolate random gradients for smooth organic variation, while simplex noise is a faster variant with fewer directional artifacts. Voronoi noise measures distance to random feature points, producing cellular patterns useful for cracked ground or biological textures.

Yes, the fragment shaders use standard GLSL ES syntax compatible with WebGL and Three.js ShaderMaterial. Map the u_time, u_resolution, and u_mouse uniforms to Three.js uniform objects, or adapt them to ShaderToy's iTime, iResolution, and iMouse.

GLSL requires explicit float types, so expressions like 1/2 evaluate to 0 instead of 0.5. Always write decimal literals such as 1.0/2.0 and use explicit casts like float(i) when converting integers.

Pass elapsed seconds through the u_time uniform and incorporate it into your math, such as sin(st.x * 10.0 + u_time) for waves or offsetting noise coordinates for flowing textures. Use fract(u_time) for looping sawtooth motion or sin(u_time) * 0.5 + 0.5 for oscillation.