Christopher Sims Profile picture
Jul 7, 2021 15 tweets 14 min read Read on X
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 Image
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 Image
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 Image
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 Image
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 Image
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 Image
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 Image
This is a nice method when you want edges everywhere and you don’t want to fiddle with sensitivity settings (9/15) #UnrealEngine #OutlineShader Image
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 ImageImage
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 ImageImage
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 ImageImage
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 Image
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 Image
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

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Christopher Sims

Christopher Sims Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @csims314

Jan 14, 2022
Perfect edge detection for Unreal & Unity. It's painful adjusting Depth/Normal thresholds and rendering still misses edges or picks up artifacts. The solution is a perfect input map like the colors you see here. Project files in the thread📂🧵👇 #UnrealEngine #unity3d #gamedev
Vertex colors on the models make for a perfect screen space texture for identifying and shading edges. The IDMapper Blender addon quickly identifies similar geometry, and lets you tweak the level of detail blendermarket.com/products/idmap…
Rendering the vertex colors to a texture and then sampling it for edges is a well covered topic, here is my approach for both engines. Unreal Engine 4: github.com/chrisloop/UE4_…. Unity 2020 HDRP: github.com/chrisloop/HDRP… Image
Read 6 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(