Profile picture
J 🌿 @jbtuason
, 8 tweets, 3 min read Read on Twitter
hey there! for this shader i treat the light like a mask. in the areas of shadow i masked on the screenspace hatching while in areas of brightest light i masked on the screenspace halftone.
not sure how familiar you are with lighting but you start creating the mask with "saturate(N dot L)" where N is the surface normal and L is the light direction. this is a standard shading where surface values facing light are 1 and range to perpendicular surfaces which are 0
you can isolate areas of these values that you want to use as masks using pow, multiply, etc. i prefer to use a value remap such as smoothstep which is kind of similar to "levels" and feels more art direct-able to me since i can adjust the mask position and softness
obviously, bad drawing for demonstrating smoothstep but this is a really great introduction and resource for shaping functions in shaders that can explain it better than i can and includes interactive examples: thebookofshaders.com/05/
the halftone is actually applied as specular reflectance. it was a bit of a hack where we could mix in both the S shaped suit spec detail (which uses mesh UVs + applied to whole mesh) and the halftone spec in a way that looked kind of separate and directed like the movie....
the hatching is tiled based on distance from the camera to keep the size of the hatching *mostly proportional* to the size of the character on the screen. it bends a bit but most ppl wont notice/care. the halftone tiling is locked, however, because the stretching was distracting.
for the tech artists + gr programmers: the shader uses ggx lighting model! the texture masking uses the remapped lambertian explained here. rewriting the lighting model to match the movie was Very out of scope but something id be curious to see 🤔🤔🤔
small mistake @kchowdha pointed out—the L arrow is pointed is pointed the wrong way. as the name suggests it is direction to light. sorry for the bad diagram!
Missing some Tweet in this thread?
You can try to force a refresh.

Like this thread? Get email updates or save it to PDF!

Subscribe to J 🌿
Profile picture

Get real-time email alerts when new unrolls are available from this author!

This content may be removed anytime!

Twitter may remove this content at anytime, convert it as a PDF, save and print for later use!

Try unrolling a thread yourself!

how to unroll video

1) Follow Thread Reader App on Twitter so you can easily mention us!

2) Go to a Twitter thread (series of Tweets by the same owner) and mention us with a keyword "unroll" @threadreaderapp unroll

You can practice here first or read more on our help page!

Did Thread Reader help you today?

Support us! We are indie developers!


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

Become a Premium Member and get exclusive features!

Premium member ($30.00/year)

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

Donate via Paypal Become our Patreon

Thank you for your support!