toon-shading | three.js toon-shading | Graphics library

This type of single-pass view-space technique is necessarily going to produce worse results than the normal-extrusion technique, but in order for it to work at all, you need to get a grip on your coordinate spaces.

What's the aim here? Well, we want to notice when the surface normal is nearly perpendicular to the view direction, and bypass our usual lighting calculations, returning a solid silhouette color instead.

Determining perpendicularity usually means taking dot products, but in (a +Y up, right-handed) view space, the view direction is just (0, 0, -1), V is just (0, 0, 1), and the dot product between V and the view-space normal is just the z component of the view-space normal.

With that knowledge in-hand, we just need to make sure we're passing the view-space normal to our fragment shader correctly.

First, change the name of the normal we pass out from the vertex shader to eyeNormal so we're clear on what space we're operating in. It's then computed as