Stylized Shaders for Unity

A technical art and graphics programming research project in Unity URP, HLSL, and Substance Designer, recreating the non-photorealistic rendering pipelines of Arcane, Spider-Verse, and Moebius.

UnityC#HLSLShaders3D
Stylized Shaders for Unity screenshot

Overview

Inspired by the landmark non-photorealistic rendering (NPR) techniques in Arcane, Spider-Man: Into the Spider-Verse, and the illustrations of Jean "Moebius" Giraud, Stylized Shaders for Unity is a solo Final Year graphics programming and technical art research project.

The primary engineering objective was to deconstruct three distinct stylized rendering pipelines and implement them inside Unity's Universal Render Pipeline (URP) using custom HLSL functions, Shader Graph, Scriptable Renderer Features (fullscreen post-processing passes), and procedural Substance 3D Designer (.sbsar) materials, while maintaining real-time frame rates with minimal GPU overhead.

Tools & Technologies

  • Engine & Rendering: Unity (Universal Render Pipeline / URP), Shader Graph, Custom Scriptable Renderer Features
  • Shading & Programming Languages: HLSL, C# (developed in JetBrains Rider)
  • Procedural Texturing & 3D: Adobe Substance 3D Designer (.sbsar runtime integration), Substance 3D Painter, Blender
  • Profiling & Project Management: Graphy FPS/Frame-Time Profiler, Unity Profiler, Git/GitHub, Jira, Obsidian

Architectural Breakdown & Granular Systems Developed

To systematically engineer each visual style, I first deconstructed their core visual pillars into discrete mathematical and rendering passes:

  • Arcane: Hand-painted brush-stroke surface modulation, directional diffuse quantization, and anisotropic painterly filtering.
  • Spider-Verse: Specular Ben-Day halftone dots, shadow cross-hatching, Sobel normal/depth outlines, and depth-masked anaglyph chromatic aberration.
  • Moebius: World-space positional color gradients, step-quantized specular highlights, normal-buffer detail line injection, and hand-tremor UV-warped ink outlines.

1. Foundational Halftone Shader & Custom HLSL Lighting Parser

Before building the three flagship pipelines, I engineered a baseline reactive halftone shader to establish reusable HLSL lighting queries:

  • Voronoi Halftone Generation: Manipulated UV coordinates feeding a Voronoi procedural noise node to dynamically scale and rotate dot density across surfaces, masking dark shadow regions via a smoothstep operator.
  • Custom HLSL GetMainLight Integration: Wrote a custom HLSL lighting node invoking Unity's GetMainLight() API, explicitly branching to resolve shadow-cascade coordinates across different URP shadow configurations and feeding the resulting attenuation into the halftone mask.
  • Fresnel vs. Fullscreen Edge Detection Analysis: Evaluated Fresnel-based object outlines and identified geometric failure cases on sharp cubic meshes, motivating the transition to depth/normal-buffer Scriptable Renderer Features for all subsequent outline passes.

2. The Arcane Hand-Painted Pipeline

Recreating a painterly aesthetic without requiring artists to manually hand-paint every asset in a scene involved three iterative engineering stages:

Stage A: Offline vs. Runtime Pipeline Evaluation

  • Blender Eevee Prototype: Tested real-time shader-to-RGB nodes in Blender, ruling it out due to Cycle baking incompatibilities for external game engines.
  • Substance Painter Smart Material: Built a multi-layered slope-blur noise and curvature-masked smart material in Substance Painter. While effective, it required an expensive third-party license per artist and manual texture re-exports.

Stage B: Procedural Substance Designer (.sbsar) Brush-Stroke Engine

  • To eliminate external software bottlenecks during Unity scene assembly, I authored a procedural brush-stroke generator in Substance 3D Designer using warp nodes, directional noise, and tileable pattern samplers.
  • Exposed key artistic parameters (stroke scale, distortion, density, and output resolution) and compiled the graph into a .sbsar archive. Using the Substance 3D for Unity runtime plugin, artists can tweak and regenerate randomized brush-stroke textures directly inside the Unity Inspector without a Substance license.
  • Additionally authored procedural .sbsar material generators for weathered walls and wooden planks with modular edge, mold, and base-color outputs.

Stage C: Custom HLSL 5-Color Gradient & Dual-Smoothstep Shader

  • Dual-Smoothstep Diffuse Quantization: Fed the HLSL main-light dot product through dual smoothstep operations with offset smoothness thresholds to isolate core lit zones from painterly transition edges, blending them against the .sbsar brush-stroke mask.
  • Custom 5-Color HLSL Gradient Sampler: Unity Shader Graph's built-in Gradient property cannot be exposed to the Material Inspector. To solve this, I wrote a custom HLSL function performing multi-stop linear interpolation (lerp) across up to five Inspector-exposed color properties, supporting both solid color palettes and albedo texture inputs across Unlit and Normal-Mapped Lit shader variants.

Stage D: Fullscreen Kuwahara Filter Investigation

  • Conducted three engineering iterations on a fullscreen Kuwahara painterly blur Scriptable Render Feature in HLSL:
    1. Quadrant Luminance Sampling: Translated a 4-quadrant mean/variance sampler into HLSL for Shader Graph, uncovering TDR (Timeout Detection and Recovery) GPU driver resets under high sample counts.
    2. Weighted Gaussian + Posterization Hybrid: Salvaged a multi-pass weighted blur by pairing it with color posterization, which directly inspired the standalone Colour Swapper Render Feature.
    3. Gradient-Directed Loop Optimization: Consolidated quadrant UV sampling into a single loop using UnityTexture2D and tex2D() rather than repeated SHADERGRAPH_SAMPLE_SCENE_COLOR() calls, proving stable at low kernel radii while documenting the exact pixel-shader ALU limits of Shader Graph fullscreen passes.

3. The Spider-Verse Comic-Book Pipeline

For the Spider-Verse pipeline, I combined surface-level comic halftone shaders with a consolidated fullscreen post-processing render pass (incorporating workflow optimizations via Cyanilux's Shader Graph Variables and NedMakesGames' RendererFeatureBlitMat):

Surface Material: Specular Ben-Day Dots & Shadow Cross-Hatching

  • Specular Ben-Day Dots: Inverted the foundational Voronoi halftone logic and bound it to the custom HLSL specular highlight mask so Ben-Day dots appear dynamically across bright specular grazing angles.
  • Shadow Cross-Hatching: Sampled multi-channel RGB cross-hatch textures mapped against shadow attenuation gradients.

Consolidated Fullscreen Render Pass: Sobel Outlines & Depth-Masked Chromatic Aberration

  • Depth + Normal Sobel Edge Detection: Authored a custom function sampling both the camera Depth Buffer and World Normal Buffer through a Sobel convolution kernel to extract crisp comic ink outlines across both silhouette edges and internal surface creases.
  • Depth- & Edge-Masked Chromatic Aberration: Rather than applying RGB channel splitting uniformly across the screen, I combined the camera depth buffer mask with the normal/depth edge mask to offset Red, Green, and Blue UV samples exclusively on out-of-focus background edges, faithfully emulating comic print misregistration.
  • Single-Pass Buffer Consolidation: Merged the Chromatic Aberration and Sobel Outline graphs into a single unified Scriptable Render Pass to eliminate multi-pass frame-buffer clearing conflicts and pink missing-texture artifacts.

4. The Moebius (Jean Giraud) Ink & Flat-Shade Pipeline

The Moebius pipeline proved to be the most cohesive stylistic implementation, combining geometric shaders, normal-buffer manipulation, and hand-drawn post-processing:

Surface Material & Custom Normal-Buffer Injection

  • World-Position Y-Axis Gradient: Extracted object position vectors, isolated the Y-axis channel, and remapped it to Inspector-defined thresholds to drive a clean two-color linear interpolation (lerp) overlaid onto base textures.
  • Step-Quantized Circular Specular Highlights: Computed dot(LightDirection, WorldNormal), clamped and inverted the range to [0, 1], and passed it through a hard step threshold to render crisp, pure-white circular specular highlights on curved geometry.
  • Normal-Buffer Detail Line Blending: Following technical consultation with developer Lenny (Uselessgamedev, creator of Montrouge Grand Prix), I engineered a normal-blending pipeline that merges red/black detail maps and pre-blended specular highlight masks directly into the object's world normal vector with adjustable hue/contrast controls. This forces the fullscreen normal-buffer edge detector to draw ink lines around internal surface details and specular rings.
  • Procedural 3-Zone Skybox Material: Created a companion sky sphere shader exposing independent zenith, horizon, and nadir color controls.

Fullscreen Moebius Render Pass

  • Hand-Tremor UV-Warped Outlines: Injected procedural gradient noise into the screen-space UV coordinates feeding the Sobel normal/depth edge detector, introducing an organic wobble that mimics hand-inked pen lines.
  • HSV Value Maximization: Sampled the scene color buffer, converted RGB -> HSV, forced the Value (V) channel to 1.0, and converted back to RGB, producing flat, vibrant comic-book coloration across the entire frame.

5. Additional Post-Processing Render Features

  • Retro Colour Swapper Render Feature: Converts the scene buffer to luminance, quantizes tones through a Posterize operator, applies a Dither matrix to eliminate visible color banding, and remaps the output across a custom multi-stop color gradient to achieve a retro palette aesthetic.
  • Hand-Drawn Paper Line-Art Render Feature: Strips scene saturation (H = 0, S = 0) while preserving luminance value, overlays the procedural Voronoi dot-dither mask to simulate stippled paper texture, and composites the UV-warped Moebius ink outlines on top.

Performance Profiling & Empirical Benchmarks

To quantify the real-time viability of every material and fullscreen Scriptable Render Feature (RF), I constructed a stress-test benchmark scene containing 125 spheres under a continuously rotating directional sun light. Frame rates were recorded over 10-second intervals using Graphy and verified against the Unity GPU/CPU Profiler:

Material + StyleFPS (Without RF)FPS (With RF)Material Delta vs. URPRender Feature (RF) Cost
Built-in URP (Baseline)220N/A0.00%N/A
Arcane (Unlit)226N/A+2.73%N/A
Arcane (Lit)215N/A-2.27%N/A
Spider-Verse212198-3.64%-6.60%
Moebius208182-5.45%-12.50%
LineArt (RF Only)2202000.00%-9.09%
Colour Swapper (RF Only)2201900.00%-13.64%

Direct Impact & Outcomes

  • High-Frame-Rate Real-Time NPR: All shipping stylized materials and fullscreen post-processing passes sustained between 182 and 226 FPS in the 125-mesh dynamic lighting stress test, staying well within a 14% maximum overhead compared to stock URP rendering.
  • Artist-Friendly Procedural Workflow: Integrating parameterized .sbsar brush-stroke generators and Inspector-exposed HLSL gradients enabled rapid art-style iteration inside Unity without external texturing bottlenecks.