Christopher Sims Profile picture
Technical Art. I publish everything I create CC0 (free) https://t.co/hiFrzW0iV2 https://t.co/puftHXnVoA #Unity3D #UE5 #Blender3D #C4D #IndieGameDev

Jul 7, 2021, 15 tweets

Finally! Here it is - my free #UE5 Lumen and Nanite compatible toon shader. 3 methods for cel shading, 7 methods for outlines, and a custom function example. 🧵Breakdown thread below (1/15) 👇github.com/chrisloop/Unre… #UnrealEngine5 #gamedev

This is an unlit surface shader. The diffuse and specular colors are based on the main directional light in the scene. Very consistent results, but we can do more... (2/15) #UnrealEngine #GameDev #ToonShader

Here I desaturate the final render, mask out the shadow and change it’s color to match the cel shading bands (3/15) #UnrealEngine #GameDev #ToonShader

This time I desaturate the entire scene and posterize the result. You get really noisy edges because Lumen is raytracing, but it’s still a neat style. I tweeted a better example here (4/15) #UnrealEngine #GameDev #ToonShader

As of UE 4.2 you can do a separate render pass for just the transparent objects in your scene. Then apply any edge detection algorithm you’d like. Looks awesome with animated fractures (5/15) #UnrealEngine #GameDev #ToonShader #OutlineShader

This one really surprised me. If you turn indirect lighting intensity all the way down, Lumen shadows become crisp enough to do a nice comic style outline around the shadows (6/15) #UnrealEngine #OutlineShader

For Depth based edges I like to fade the edges further away from the camera and rather than use a hard threshold, use a multiplier and bias as described here: ronja-tutorials.com/post/019-postp… @totallyRonja (7/15) #UnrealEngine #OutlineShader

Normals edge detection is a great complement to depth edges because you can catch edges within each object like on the cube. More later on how I deal with rounded geometry getting ugly extra lines (8/15) #UnrealEngine #OutlineShader

This is a nice method when you want edges everywhere and you don’t want to fiddle with sensitivity settings (9/15) #UnrealEngine #OutlineShader

This is the most bizarre and fun edge method I use on every project. I stick a texture into the specular channel of the surface shader, then sample it in post and overlay the edges on the final render (10/15) #UnrealEngine #OutlineShader

During modeling, or using the UE Modeling plugin I assign a random value to the red channel of each faces vertex color, and again feed it into the specular channel for edge detection (11/15) #UnrealEngine #OutlineShader

Here I do a pseudo random number based on each object’s WS position, and again use that value in the specular channel. It’s much faster than manually coloring vertices, and I can fill in the missing interior edges with Normals based edges (12/15) #UnrealEngine #OutlineShader

Nanite does not support a custom depth buffer yet so I use a specular value of 0 to disable normal based outlines in post, and a range of .1 - .5 for everything else, in particular object position color. Low specular values are imperceptible. (13/15) #UnrealEngine #OutlineShader

The custom function material node allows you to do loops so you can achieve Voronoi patterns, among others. I use these patterns for edge detection detail just like with the procedural textures by @WMillArt (14/15) #UnrealEngine #gamedev

If you made it this far, thanks! I share everything I learn about shaders and gamedev here on twitter. Follow/RT me if you dig it, it'll always be free. #indiegamedev #UnrealEngine #Unity3D

Share this Scrolly Tale with your friends.

A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.

Keep scrolling