The latest DLC for Marvel’s Spider-Man, titled “Silver Lining” included a treat for the fans in the form of a suit inspired by the recent movie Spider-Man: Into the Spider-Verse.
The suit features a very interesting shader that integrates the visuals of the movie into the game in a rather impressive way. If you’re wondering what a shader is, it’s a graphical feature that can perform many tasks, but in this instance, it basically tells materials how to interact with the light in order to achieve a specific effect. I know, I’m oversimplifying a lot, but you’ll find plenty of complexity (and artistry) below.
Associate Graphics Technical Artist J Tuason took to Twitter to explain how the effect was achieved thanks to the power of shaders and a bit of a hack.
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. https://t.co/e3yfVZP6Mj
— J 🌿 (@jbtuason) December 23, 2018
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 pic.twitter.com/nTPRT9zhbN
— J 🌿 (@jbtuason) December 23, 2018
[Editor’s note: Tuason mentioned afterward that they made a small mistake in drawing this diagram, and the L Arrow should point the other way]
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 pic.twitter.com/H3Qvy4Zn2U
— J 🌿 (@jbtuason) December 23, 2018
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: https://t.co/TDOds06nPz
— J 🌿 (@jbtuason) December 23, 2018
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….
— J 🌿 (@jbtuason) December 23, 2018
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.
— J 🌿 (@jbtuason) December 23, 2018
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 🤔🤔🤔
— J 🌿 (@jbtuason) December 23, 2018
Does this sound complex? That’s because it is. Shaders are one of the most interesting and diverse aspects of graphics technology nowadays, and even if you didn’t understand a single word (I have no qualms in admitting that I understood just a small part of it) this is a perfect example of how much knowledge goes into creating something as apparently simple as a costume in a game.
Interestingly, we also hear that each suit in the game has its own shaders, which makes sense since they’re made with different materials, and shaders play a primary role in determining the look and feel of a surface’s materials through interaction with lighting.
Basically, when a Graphics Artist wants to turn a textured 3D model into something that can be perceived by our eyes as cloth, leather, rubber, or even a cartoon, that’s when shaders come into play. Marvel’s Spider-Man’s suits involve a wide range of realistic (or intentionally unrealistic) materials and effects, and that’s certainly a testament to the love and care poured into the game.
Another recent example of excellent shader work is the suit featured in Sam Raimi’s films, which has been provided for free to the fans a few days ago.
Marvel’s Spider-Man is currently available exclusively for PS4, and it has been met with critical and fan acclaim, on top of commercial success. Its sales have outpaced every other superhero game in the United States. If you’d like to learn why it’s so good, you can check out our review.
