Derivatives allow the shader to know "how fast" the UVs are changing. If the change is high, the pattern is moving too fast for the screen resolution, and the shader needs to blur (mip) the result. This is how texture() lookups automatically select the correct MIP map level—they calculate derivatives of the UVs behind the scenes.
// The normal is the cross product of these two vectors vec3 normal = normalize(cross(dx, dy));
Because the GPU calculates the color for four pixels simultaneously, it can compare the values of variables between them. If pixel A has a value of $5.0$ and its neighbor pixel B has a value of $5.1$, the hardware knows that the value is changing at a rate of $0.1$ per pixel. That rate of change is the derivative. derivative shaders
In the world of real-time graphics, we often think in terms of vertices and fragments. We define positions, calculate lighting, and paint colors. But lurking just beneath the surface of modern GPUs is a powerful, often overlooked capability: the ability to calculate instantaneous derivatives.
Before diving into derivative shaders, it's essential to have a basic understanding of shaders in general. Shaders are small programs that run on the Graphics Processing Unit (GPU) and are used to determine the final appearance of objects in a 3D scene. They can control a wide range of graphical effects, including texture mapping, lighting, and color manipulation. The two most commonly used types of shaders are vertex shaders, which manipulate the geometry of a scene, and pixel shaders, which determine the color of individual pixels. Derivatives allow the shader to know "how fast"
No geometry adjacency, no UV seams for wear masks — just pure derivative-driven intuition.
In the realm of computer graphics, shaders have long been a crucial tool for developers looking to create stunning visual effects in games, simulations, and other graphical applications. Among the various types of shaders, derivative shaders stand out for their unique capabilities in enhancing and manipulating graphics on the fly. This article explores the concept of derivative shaders, their applications, and how they contribute to the evolving landscape of computer graphics. // The normal is the cross product of
if (x > 0.5) { float derivative = dFdx(y); }
Derivative functions are essential for creating sharp, flicker-free procedural effects, such as wireframes or patterns. The fwidth() function, which combines the absolute horizontal and vertical derivatives, provides a measure of how much a value changes per pixel. This allows developers to create "screen-space constant" thicknesses, ensuring a line stays exactly one pixel wide regardless of how far the object is from the camera. 3. Surface Normals from Depth