Stylized GGX shading | Alexandre Lamure

Back to graphics

Stylized GGX shading — toon specular highlights

July 19, 2026

To achieve a toon look in 3D rendering, the most common way is to threshold the lighting. It transforms the soft color gradients into flat colors.

// The rendering equation becomes:<br>float Threshold = 0.0; // any value between 0 and 1<br>vec3 Radiance = BRDF * LightIntensity * step (Threshold , dot(Normal, LightDirection));

Diffuse Thresholding

Specular Thresholding

However, one might want to mix the 2D and 3D looks: big sharp highlights at low roughness and soft gradients at high roughness .<br>It feels more modern than classic toon shading, and we can rely on PBR for most of our shading, making everyone's lives easier (closer to energy-conservation, easier integration into existing pipelines, physically-based material calibration...).

I call this mixed approach "Stylized GGX Shading".

Toon Shading video<br>Toon

Stylized GGX Shading video<br>Stylized GGX

GGX Shading video<br>GGX

Many games have explored the combination of PBR and toon shading.

For example in Zelda: Breath of the Wild, the characters use pure toon shading but the environments rely more on a 3D / PBR look (not completely, e.g. the grass). This makes the characters pop out of the background.

Another example is Spellcasters Chronicles, which I had the chance to work on. During development we tested many things, including this "Stylized GGX Shading" I'm describing here. In the end we landed on something else, but it still uses a mix of 2D and 3D looks.

A screenshot from Zelda: Tears of the Kingdom

A screenshot from Spellcasters Chronicles

Simple version

The most common PBR model is the GGX Cook-Torrance microfacet model.

The surface's asperity is analytically modeled as a collection of oriented microfacets, and controlled by a roughness parameter.<br>The distribution of these microfacets' normals is described by the Normal Distribution Function (NDF).<br>Real-time engines usually use the Trowbridge-Reitz NDF, which looks like this:

// GGX Trowbridge-Reitz NDF<br>float D(vec3 Normal, vec3 HalfVector, float Roughness)<br>float a = Roughness * Roughness;<br>float a2 = a * a;<br>float NdotH = max(dot(Normal, HalfVector), 0.0);<br>float NdotH2 = NdotH * NdotH;<br>float denom = NdotH2 * (a2 - 1.0) + 1.0;<br>return a2 / (PI * denom * denom);

GGX Trowbridge-Reitz NDF, at varying roughness

By slightly modifying this equation, we can expand the specular highlights.

// Stylized GGX Trowbridge-Reitz NDF<br>float D(vec3 Normal, vec3 HalfVector, float Roughness, float SpecularSize)<br>float a = Roughness * Roughness;<br>float a2 = a * a;<br>float NdotH = max(dot(Normal, HalfVector), 0.0);<br>float NdotH2 = NdotH * NdotH;<br>float denom = max( SpecularSize * NdotH2 * (a2 - 1.0) + 1.0, 0.0001) ;<br>return a2 / (PI * denom * denom);

Stylized GGX Trowbridge-Reitz NDF, at varying roughness

I made a Desmos graph to visualize what's happening (follow the link to play with its parameters).

Abscissa represents the dot product of the surface normal and the half-vector (NdotH).

Ordinate represents the NDF value (the return value). Higher means more reflected energy.

Black curve is the original Trowbridge-Reitz NDF, red curve is the stylized one.

Our new "Specular Size" parameter allows us to return more energy at higher angles while preserving the original shape of the NDF.

Desmos graph animating the Specular Size

Resulting highlight shape

Improved version

The simple version has the benefit of being extra cheap (1 mul and 1 max), but it impacts rough materials too much, making them appear overly bright.

Here is a slightly more complex equation that preserves the original NDF shape at high roughness, while still expanding the highlights at low roughness.

// Stylized GGX Trowbridge-Reitz NDF<br>float D(vec3 Normal, vec3 HalfVector, float Roughness, float SpecularSize, float GGXMatching)<br>float a = Roughness * Roughness;<br>float a2 = a * a;<br>float NdotH = max(dot(Normal, HalfVector), 0.0);<br>float NdotH2 = NdotH * NdotH;<br>// The GGXMatching parameter controls how much the stylized NDF matches the GGX one at high roughness. In practice, 4 or 8 works well.<br>float denom = max((SpecularSize * pow(1.0 - a, GGXMatching) + 1.0) * NdotH2 * (a2 - 1.0) + 1.0, 0.0001);<br>return a2 / (PI * denom * denom);

Improved Stylized GGX Trowbridge-Reitz NDF.<br>The last three columns better match the original GGX energy distribution.

Here is the graph animating the roughness (at high roughness the curves flatten).

Black curve is the Trowbridge-Reitz NDF, red curve is the simple stylized and green curve is the improved stylized.<br>The improved version matches the red curve at high roughness, and the black curve at low roughness.

Desmos graph animating the roughness

Demo

Here is the final look under varying roughness, metalness and specular size.

Stylized GGX Shading video<br>Stylized GGX Shading

Side notes

One might feel like this stylized GGX look is not "toon" enough.

On Spellcasters we tested many additions to...