Comic Book Effects (Includes Code)

I created the Comic Book Effects package to recreate a comic book-like visual style in Unity using custom shaders and post-processing effects. To do this I used Unity's built-in render pipeline together with the post-processing stack v2.

The project originally started during the individual assignment of the gameplay engineering semester. During that semester I tried to recreate the visual style of the Spider-Man: Into the Spider-Verse movie in Unity. You can read the original article I wrote about it here.

After the semester I continued working on the project and improved both the halftone lit shader and the post-processing effects in order to release it on the Unity Asset Store. The project is now available for purchase here.

Halftone Lit Shader

To recreate the visual style of the Spider-Verse movie I created a surface shader with custom lighting functions that use different halftone pattern textures. The result of this is that the shadows have a very stylized look.

The shader uses a custom shader GUI to display the properties and control the shader keywords like whether to use the screen space UVs or the object's UVs for the halftone pattern.

Here you can see the method used to calculate the halftone diffuse shadows. To create the halftone effect a shadow pattern texture and the lighting value are used in multiple step functions. During the gameplay engineering semester, the lighting calculation used to be much simpler and used a single step function which resulted in the loss of a lot of detail in the shadows.

CMYK Depth of Field

To create the effect of depth of field in the Spider-Verse movie they repurposed an old printing error called CMYK offsetting. This printing error causes colors to be slightly misaligned.

I recreated the effect using the camera's depth texture and increased the intensity of the offsetting as the object is further away from the focus area.  The offsetting itself is done by sampling 3 extra colors around the original point and converting those colors to the CYMK format. Those colors are then combined and reconverted into the RGB format.

Below you can see the inspector for the CMYK Motion Blur post-processing effect:

CMYK Motion blur

To create a motion blur effect I used the same CMYK offsetting but instead of using the camera's depth texture I used the camera's motion vector texture to determine the intensity. This way fast-moving objects like Spider-Man in the video below will have their colors offset relative to their speed.

Hand-Drawn frames

There are multiple moments in the Spider-Man: Into the Spider-Verse movie, where instead of 3d animation, frames are hand-drawn. To recreate this effect in Unity I wrote a replacement shader that renders the characters with different textures and replaces the background with a single image. The foreground elements are also outlined using a dual-pass technique.

The replacement shader renders objects with three types of tags "Background", "BackgroundNoZWrite" and "Foreground". These tags can be set per material in the Halftone Lit shader. The background elements are rendered as black with an alpha of 1 and the foreground elements are rendered using an unlit texture set in the Halftone Lit shader. The alpha value is used to determine what parts of the image should be replaced with the background texture in the post-processing effect.

Prowler Vision

Another effect from the Spider-Verse movie is the Prowler Vision effect. To recreate this effect I used the same replacement shader as with the Hand-Drawn frames effect. I also wrote a line renderer post-processing effect to outline the details in the background and add different color tints to the fore and background elements.

The background's outline effect uses the difference in depth and normal direction to the neighboring pixels to determine where the lines should be placed. How sensitive the outlines are can be customized in the post-processing effect's inspector.

I also created a boot-up animation by exponentially increasing the Wave Distance variable with a basic C# script you can see here: