This is my first attempt at both generating stylized renders as well as working with Unity's shader graphs. As soon as the context of stylized was established for this project, the first thing to come to my mind was the Spiderverse movie franchise. Gwen's Universe and Hobie Brown's Spider Punk were the 2 most stylistically mind-blowinig aspects of the movie for me personally, and therefore it was imperative that I pick one of those as my reference goals. And I am really happy with how the final outcome turned out - see below (Sound ON🔊)! (Here is a link to a high-res video).
Hobie.Brown.aka.Spider.Punk.mp4
 |
 |
|---|---|
| 2D Concept Illustration | 3D Stylized Scene in Unity |
- Toon Shading
- Light Interaction
- Ben-Day Dotting
- Inverted Hull
- Assembling the Scene
- Post-Process Outlines
- Renderer Features
- Vignette
- User Interactivity
- Credits
The very first step towards getting a stylistic looking scene complementing the concept art chosen for the project was to get a toon shaded material. The shader graph implemented for the same can be found in Assets/Shaders/Toon Shader.shadergraph. The desired result was achieved by:
- Factoring in the contribution from the Directional Light.
- Exposing threshold values for highlights VS shadow areas.
- Using a hatching texture to define a midtone between highlights & shadows.
Hatching texture used for shadows:
After factoring in the Directional Light for the Toon Shader, we need to consider more light sources in the scene such as point lights. TheComputeAdditionalLighting function in Assets/Shaders/Includes/LightingHelp.hlsl helps us achieve this. We use the same by adding a Custom Function node in Assets/Shaders/Toon Shader.shadergraph. To demonstrate the result, we use a Blue-colored point light:
- When the point light is far away, only the Directional Light affects the material:
Ben-day dotting is a fairly common art style found in comics, wherein a polka-dot texture overlay is used to depict certain stylistic elements. This style has also recently found its way in many games and movies. Examples:
I add this support by adding another distance-based factor to the Toon Material, such that moving the point light even more closer to the surface results in a more highlighted area where I sample the polka-dot texture to generate a ben-day dotted effect:
Polka-dot texture used for specular highlights:
Looking back at the chosen concept art, we see a non-uniform outline surrounding Hobie Brown (Spider-Punk) and his guitar. This was one of the most impressive stylistic choices in the film, wherein Hobie always had this wiggly outline containing him. To get a similar look, I decided to implement an Inverted Hull. This was implemented as a separate shadergraph that can be found in Assets/Shaders/Inverted Hull.shadergraph. The implementation is basically as follows:
- A scaled-up version of the mesh is first established by extruding the vertices of the original mesh along the surface normal.
- Next, we choose the option in Shadergraph to render only the back faces, so that front faces always get culled, and we are able to view the material in front no matter which camera angle we are looking from:
The extrusion along normals causes the mesh to 'break-apart' for larger scaling factors. I tried adding a vertex displacement noise to achieve the non-uniform boundary look from the concept art, but couldn't figure out a good way to achieve that look due to time restrictions. Therefore, I used low and appropriate scale values to get a slightly different but appealing final look. (It is not a bug, it is a feature. Right?)
I was able to find this fantastic FBX model on Sketchfab by CVRxEarth. I was also able to find this lightning model asset by daedaljs licensed under Creative Commons Attribution. I got to work on creating the materials:
At this point, I had the following scene assembled:
Finally, I added a blue point light to include the Ben-Day dotting effect:
To match the concept art, I attempted to render outlines on the lighting assets as a Sobel Post-Process using Depth and Normal Buffers. The script for this can be found at Assets/Shaders/Includes/EdgeDetectionOutlines.hlsl. This was implemented in its own shadergraph Assets/Shaders/Edge Detection Outlines.shadergraph. A static outline implementation looks something like:
The material created off of the shadergraph has a check-box for applying Noise that the user can toggle ON or OFF. If noise is applied, then the output looks something like:
Unity's URP (Universal Render Pipeline) gives us access to Renderer Features, wherein we can define custom render tasks at certain steps in the rendering pipeline. I used render features for 4 things:
- Rendering the Normals in to the Normals Buffer,
- Background
InAssets/Shaders/Background.shadergraph, I define a simple Full screen shadergraph that samples a given texture to render it on the entire screen. I use a newspaper background texture downloaded from the internet to match the concept art. This gives us the following result:
- Drawing the Normals on the screen before we move on to apply post-processing effects, and
- Chromatic Aberration
To give the iconic glitchy effect to my render, I chalked out a quick and easy shadergraphAssets/Shaders/ChromAberr.shadergraphthat applies Chromatic Aberration to the entire screen:
Our Renderer Features look something like this:
The URP also allows us to use some out-of-the-box post-processing overlays, and I chose to use the Vignette filter because it went well with my final output:
To author some level of user interactivity, I wrote the script Assets/Scripts/MatSwapKeypress.cs that swaps a material's texture to the next one in the list on hitting the Space Bar. I used this on the lighting assets, adn the final result looked something like this:
If you made it all the way here, I apologize for rambling on and on about every minute detail of the project. I had a lot of fun learning Unity, shader graphs, and non-photorealistic rendering techniques, and hope to pick up more such projects in the near future! Thank you for reading through my brain dump, hope you have a great day!
- Logan Cho and his amazing walkthroughs:
- Spider-Punk Model by CVRxEarth
- Lightning model asset by daedaljs licensed under Creative Commons Attribution
- Concept Art reference from the work of Sony Pictures Animation
- Music Track "Across the Titles" from Spider-Man: Across the Spider-Verse, Music by Daniel Pemberton. Listen Here
- Peers Utkarsh Dwivedi and Linda Zhu for all their help along the way!