Video summary

Moebius-style 3D Rendering | Useless Game Dev

Main summary

Key takeaways

Technology

Overview (goal of the tutorial)

The episode demonstrates a real-time 3D shader experiment to replicate Jean “Moebius” Giraud’s comic style—especially:

  • Thin black outlines
  • Flat colors
  • High detail conveyed with line-based shading (crosshatching)

Core shader technique: consistent “comic” outlines in screen space

Problem

Drawing outlines directly as textures on 3D geometry can become uneven/pixelated near the camera due to perspective.

Solution

Compute outlines in screen space at a consistent line width.

Method: edge detection with a Sobel filter

Use edge detection via a Sobel filter (a convolution filter):

  • For each pixel, compute a weighted sum of neighboring pixels using a kernel/weight matrix
  • The Sobel output highlights high-contrast changes (edges):
    • Similar left/right values → dark output
    • Large contrast → bright output

Implementation detail

  • Run Sobel for vertical edges
  • Run a similar Sobel for horizontal edges
  • Take the maximum of both to form a strong edge map

Using scene buffers to detect outlines

Apply Sobel-based edge detection to:

  1. Depth map
    • Outlines objects separating in distance
    • When an object is behind another → sudden depth change → outline
  2. Normal map
    • Improves edges
    • Since edges also correspond to sudden normal changes, filtering the normal buffer yields even better outlines

“Hand drawn” wobble via UV sampling noise

Add slight noise to UV sampling to create wiggly lines.

  • Too much noise looks bad—tuned to a “just right” amount.

Conveying detail and shading with line textures (crosshatching)

Idea

Instead of normal lighting, use line-based shading.

Concern: interaction with Sobel (over-outlining)

Writing single drawn lines into normal textures can make them get over-outlined by the Sobel filter (worse up close).

  • Workaround: don’t zoom in too close / treat it as an intentional limitation.

Crosshatch texture design

Prepare a texture containing three hatch orientations:

  • horizontal
  • vertical
  • sideways

Store each orientation in a separate color channel:

  • R/G/B → effectively three textures in one

Brightness-driven hatch logic

  • Brightness 100%–75%: no crosshatch
  • 75%–50%: horizontal only
  • 50%–25%: horizontal + vertical
  • 25%–0%: all three (horizontal, vertical, sideways)

Crosshatching alignment tradeoff (volume vs quality)

Ideal

Crosshatching would follow the object’s surface volume/shape.

Attempt

Add crosshatch to the normal buffer to follow curvature (similar to texture approach).

Result

When it passes through Sobel filtering, quality becomes “meh”.

Decision

Use screen-space crosshatching instead for shadows/shading.

Specular/reflection highlights as Moebius-style white spots

To simulate Moebius’ distinct white reflective areas:

  • Use a dot product between:
    • the surface normal
    • the main light direction
  • Where the dot product indicates high exposure, write a special color (white highlights) into the normal-map-like data so Sobel-based outlines catch them.

Color and post-processing “comic finish”

Base colors

  • Simple single colors
  • Optional gradients
  • Skybox treated similarly

Because crosshatching handles “brightness,” colors can be kept full brightness (less need for traditional shading).

Post-processing

  • Adjust saturation, contrast, and other color settings
  • Add paper-like grain

Grain approach (criticism of built-in option)

  • Unity’s built-in film grain moves too much / looks like white noise
  • Custom grain changes only about every 10 frames to mimic low-framerate old film

Demo application / evaluation

The shader is tested in a small game: “Montrouge Grand Prix”

  • Tiny racing game: complete laps (3 laps total), fastest wins
  • Link provided: playable on itch.io (mentioned in the video description)

Performance/quality note

  • Linework looks solid and works across 3D scenes
  • It lacks some detail compared to real drawing skill (framed explicitly as an experiment)

Main speakers / sources

  • Leonard — speaker/creator of the shader and the demo game
  • Jean “Moebius” Giraud — artistic reference / style being replicated

Original video