Shader guides

Short, practical explanations with code. Each one links to the interactive lessons where you can try it.

• What is a fragment shader? A plain explanation with codeA fragment (pixel) shader is a tiny function the GPU runs once for every pixel, all at the same time. See what it receives, what it returns, and write one yourself.
• HLSL vs GLSL vs WGSL vs Metal: shader languages comparedWhich shader language should you learn? Compare HLSL, GLSL, WGSL, Metal and the Godot shading language: where each runs, how the syntax differs, and how to move between them.
• How to learn shader programming: a step-by-step roadmapA practical order for learning shaders from zero: pixels and color, shapes, motion, repetition, noise, 3D ray marching and real effects. With the exact lessons for each step.
• What is ray marching? Distance fields explained simplyRay marching draws 3D scenes with no 3D models: for each pixel, step along a ray until a distance function says you are touching something. A simple explanation with code.
• Noise in shaders: value noise, fBm and what they are forShaders have no random() function. Learn how hash functions, value noise and fractal noise (fBm) work, and how they make clouds, terrain, marble and fire.
• How to make an ocean shader: waves, Fresnel and foamBuild a realistic ocean in a fragment shader: sum of sine waves, ray marching a height field, Fresnel reflection of the sky, sun glitter, foam and haze. Step by step.