Supported file : PNG, JPEG, GIF (Max 6 MB)
Choose a canvas model , or specify your dimensions (Max 5000 pixels)
Add some magic in your design
Derivatives offer an elegant solution. By taking the derivative of the height or position of the surface, you can construct a tangent plane and, subsequently, a normal vector.
Most shaders work like a recipe: take these inputs (UVs, normals, time), mix them through hardcoded math, and output a color. But what if your shader could feel its own surface? What if it could know how fast colors change as you move one pixel to the right, or one pixel up? That’s the promise of .
float checker = mod(floor(uv.x * scale) + floor(uv.y * scale), 2.0); derivative shaders
// Edge detection via derivative of normal float edge = length(ddx(worldNormal)) + length(ddy(worldNormal)); rustAmount += edge * 2.0;
: This technique simulates depth on 2D textures by displacing the texture coordinates based on the view direction and surface normal. Derivative shaders aid in calculating the necessary texture offsets. Derivatives offer an elegant solution
Modern APIs like OpenGL and Vulkan distinguish between different types of derivative calculations:
What are screen space derivatives and when would I use them? But what if your shader could feel its own surface
// Get the rate of change of the world position vec3 dx = dFdx(worldPos); vec3 dy = dFdy(worldPos);
The most common use of derivatives is texture anti-aliasing. Imagine a procedural checkerboard pattern calculated mathematically (without a texture file).
A sine-wave pattern aliases horribly without filtering. With derivatives, you can compute the local frequency and apply a smoothstep falloff: float freq = length(ddx(uv*scale)); Then clamp your pattern’s contrast where freq > Nyquist. No extra samples, no blur — just mathematically correct anti-aliasing.
If this pattern recedes into the distance, aliasing occurs. The squares become smaller than a single pixel, creating a shimmering mess known as "Moiré bands." The shader samples the pattern at a single point, unaware that the pattern is changing rapidly between pixels.
You are using the desktop version of Picfont