Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira.

Real-Time Rendering of Cartoon Smoke and Clouds

Real-Time Rendering of Cartoon Smoke and Clouds

Morgan McGuireAndi Fein

Paulo Ferreira

Gundam

Motivation

Real-time cartoon rendering for:

• NPR Video Games• Production Animation Preview• Visualization• Simulation and Training

These often contain smoke, fluids, and other amorphous shapes…

Captain Marvel, June 1947

Marvel Comics 1947

Outlines

Self-Shadowing

Cel Shading

Heart of Empire

Published by Dark Horse Comics 1999

SuperMan/Batman #16

Teenage Mutant Ninja Turtles Cartoon (2004)

Worms 4 (Game 2005)

Algorithm

Simulation• Particle system

• Forces:— Buoyancy — Wind

— Drag — Gravity

— Vortices — Turbulence

• Size = smoke density

• ODE physics engine at 30 Hz— Compressible: 100,000 particles

— Incompressible: 1,000 particles

Simulation• Use Particles from the game “Avalanche”

Simulation• Instead of smoke and clouds, cartoon effect

applied on the avalanche of the game

Rendering steps

1. Precomputed Nailboards

2. Outlines

3. Cel Shading

4. Shadows

Elements of Style

Outlines Shading Self-Shadowing

Steps

Nailboards

Normal-mapped Nailboards

• Precompute extended billboard textures

• Several puff orientations for variety

• Each particle is assigned one variation

Normal Depth Color Opacity

Preprocessing step: Nailboard• Create two textures to store data such as:

unit camera-space surface normal N, signed camera space depth d, diffuse color C, and coverage mask alpha.

Outlines

• Edges of puff are deep and black

Viewer Actual BillboardNailboard DepthDepth

Color

Black

Shaded

Depth and Outline Pass

• Add d from the texture to the depth at the pixel and the depth buffer test automatically produces correct intersections.

Outlines

• Edges of puff are deep and black

Viewer Image1 Nailboard

Outlines

• Edges of puff are deep and black• Depth test suppresses excessive internal contours

Viewer Image2 Nailboards

No internal contour

Outlines

• Edges of puff are deep and black• Depth test suppresses excessive internal contours• Large depth discrepancy restores external contours

Viewer Image3 Nailboards

External contour distinguishing clouds

Outlines

• Use the alpha-shapes, which are slightly larger than the normal shapes, to create the outline, a flange of dark pixels slightly behind the billboard.

• The outline of these flange pixels is opaque because alpha is one, colored black because the C is black, and farther from the camera than the particle itself because d is zero.

Cel Shading

• Ambient: Gradient as function of y

• Diffuse:Arbitrary function, q(N · L)

• Pack both into a 2D texture, like X-Toon

q =

Example

Lambertian Selle04 Two-Tone Three-Tone

N · L

y

Explosion B & W

q =

Ambient

Explosion Color

q =

Ambient

Cel-Shading Pass

• Get N, C and alpha from the textures.

Cel-Shading Pass

• With ambient light color Ka, light color Kl, camera-space direction L to the light source, and diffuse color C from the texture map, the pixel at (x, y) is colored by a pixel shader using the following equation:

N · L

y

Shadow Volumes

1. Compute the silhouette of the caster

2. Extrude this to form a polyhedron bounding the volume of shadowed space

3. Shadows are intersection between the volume and the scene

Billboard Shadows• Caster is perpendicular to viewer and light• Volume is a rectangular prism• Four sides are parallel to the view vector

• Only 3 polygons to be rendered: one billboard and two shadow faces

Nailboard Shadows

• Apply the depth displacement to the shadow volume as well as the billboard

Shadow volume visualization

Shadow Volume Visualization

Shadowing

Results

Train

Magic Lamp

Purple Cloud

Explosion

Varying Puff Shape

Varying Puff Shape

Varying Puff Shape

Video

Video

Mimicking Artists

Lichtenstein

Estate of Roy Lichtenstein 1963

Estate of Roy Lichtenstein 1963

ArtistAlgorithm

Context

ComparisonPublished by Dark Horse Comics 1999

Algorithm Artist

50,000 particles

50,000 Particles on GeForce6800

Depth Differences

• Image space outlining method [Saito and Takahasi]• Benefits:

– Rendering time independent of the scene

– Handles intersecting surfaces

• Drawbacks:– Can stall graphics pipeline

– Assumes one style for the entire scene