GLSL Guides and Integration
Practical explanations of porting, sampling, outlines, lighting and debugging.
Shadertoy to Three.js ShaderMaterial
Shadertoy's mainImage is not a GLSL entry point. After moving it into Three.js, add main and update iTime and iResolution from JavaScript. First verify a full-screen plane, then change the coordinate source for a model. This separates entry-point failures from UV mistakes.
GLSL vs HLSL Texture Sampling
Fix the environments before comparing syntax: this GLSL fragment targets WebGL 2, while the HLSL pixel shader targets Direct3D 11 / Shader Model 5. Both sample one image and blend toward a warm tint along x. This site runs GLSL; the HLSL counterpart requires a Direct3D host to compile it and bind resources.
Anti-Aliased SDF Outlines with fwidth
A distance field measures geometry units while a screen displays pixels. Scaling changes how many pixels represent one distance unit, so a fixed smoothstep width varies in apparent thickness. fwidth estimates the change across nearby fragments, allowing a transition of roughly one pixel.
SDF vs Alpha Outline vs Sobel
Outline can mean three different input problems. An SDF stroke selects |d| near zero. A sprite outline dilates alpha and subtracts the original mask. A photo edge detector measures luminance gradient. Using Sobel for a leaf silhouette also detects veins inside the leaf.
How to Bind iChannel0 in Three.js
iChannel0 is a host-defined sampler name, not an automatically associated image. Load a texture, bind it to a uniform with the same name and match the shader sampler type. A labeled fixture with arrows is a useful first test for binding, orientation and filtering.
Aspect Ratio Correction in GLSL
Dividing fragCoord by resolution normalizes both axes to zero-to-one, but a unit on each axis may cover a different pixel count. Use one pixel scale for circles, such as dividing both axes by canvas height. Image lookup still uses UV normalized independently per axis.
Single-Pass vs Separable Gaussian Blur
A 2D Gaussian kernel is the product of a horizontal and a vertical 1D kernel. Direct N×N convolution takes N² lookups per pixel; two passes use roughly 2N plus intermediate-texture bandwidth. An extra pass may not help a tiny kernel but becomes attractive at larger radii.
Sphere Tracing Step Size Explained
Fixed steps can skip thin geometry or waste iterations in empty space. Sphere tracing advances by a safe distance to the surface. The sphere field length(p)-r is exact, whereas arbitrarily scaled or distorted fields may stop being conservative distance bounds.
Dissolve Shader Edge Width
Dissolve progress and the burning edge use different masks. Noise below the threshold disappears. A narrow band just above it remains visible and is tinted as the hot edge. Tinting the whole surviving region produces a color change rather than a burning boundary.
texture2D vs texture vs texelFetch
texture2D is the ES 1.00 name for filtered 2D lookup. ES 3.00 uses texture overloads selected by sampler type. texelFetch reads an integer texel coordinate at a chosen mip level without bilinear filtering. Images often want interpolation, while cell states and precise data lookups often must not blend neighboring values.
WebGL Texture Y Flip
Image row direction, upload-time flipping and shader UV orientation are independent. Debug with labeled corners and arrows. Fix the UV mapping, then flip either on upload or in sampling; doing both flips the image twice.
Debugging a Black Shadertoy Import
Narrow a black screen by following the data path. Return constant red to establish linking, vertex coverage and drawing. Then display UV, introduce time and finally the texture. Add one input at a time so the first failing step is informative.
Lighting a Ray-Marched SDF
A distance field supplies a scalar but lighting needs orientation. Sample on both sides of x/y/z to estimate its gradient, then normalize. An RGB normal view is an intermediate diagnostic; establish continuous orientations before tuning diffuse or specular lighting.
Porting Shadertoy Buffer A with Ping-Pong Targets
Buffer A often reads its own previous-frame result. WebGL does not allow sampling the texture currently being written, so keep separate read and write targets. Swap after each update and let the display pass read the newly completed texture.
Bloom Post-Processing vs Procedural Glow
Procedural neon evaluates distance from a luminous line inside one fragment shader. Bloom is post-processing: extract bright image regions, blur and composite. Neon knows the emitting geometry; bloom only sees image brightness, so any sufficiently bright source can contribute.
Halftone vs Ordered Dithering
Both methods approximate continuous tone with limited ink, but use different controls. Halftone varies dot area inside fixed cells. Bayer dithering compares each position against a threshold matrix. Magnification reveals variable-sized circles versus a regular pixel pattern whose density changes.