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

2. Gundam

3. 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…

4. Captain Marvel, June 1947 Outlines Cel Shading Self-Shadowing
 Marvel Comics 1947

5. Heart of Empire
Published by Dark Horse Comics 1999

6. SuperMan/Batman #16

7. Teenage Mutant Ninja Turtles Cartoon (2004)

8. Worms 4 (Game 2005) Pre-rendered flat billboards Excessive detail
No self-shadowing

9. Algorithm

10. Simulation Particle system Forces: Size = smoke density
— Buoyancy — Wind
— Drag — Gravity
— Vortices — Turbulence
Size = smoke density
ODE physics engine at 30 Hz
— Compressible: 100,000 particles
— Incompressible: 1,000 particles

11. Simulation
Use Particles from the game “Avalanche”

12. Simulation
Instead of smoke and clouds, cartoon effect applied on the avalanche of the game

13. Rendering steps
Precomputed Nailboards
Outlines
Cel Shading
Shadows

14. Steps
Elements of Style
Outlines Shading Self-Shadowing

15. Nailboards

16. Normal-mapped Nailboards
Precompute extended billboard textures
Several puff orientations for variety
Each particle is assigned one variation
Normal Depth Color Opacity

17. 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.

18. Outlines Edges of puff are deep and black Black Nailboard Depth Shaded
Color
Viewer
Actual Billboard
Depth

19. Depth and Outline Pass
Add d from the texture to the depth at the pixel and the depth buffer test automatically produces correct intersections.

20. Outlines
Edges of puff are deep and black
Viewer
1 Nailboard
Image

21. Outlines Edges of puff are deep and black
Depth test suppresses excessive internal contours
No internal contour
Viewer
2 Nailboards
Image

22. Outlines Edges of puff are deep and black
Depth test suppresses excessive internal contours
Large depth discrepancy restores external contours
External contour distinguishing clouds
Viewer
3 Nailboards
Image

23. 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.

24. Cel Shading Ambient: Gradient as function of y
Diffuse:Arbitrary function, q(N · L)
Pack both into a 2D texture, like X-Toon y
N · L
Lambertian Selle Two-Tone Three-Tone
q =
Example

25. Explosion B & W
Ambient
q =

26. Explosion Color
Ambient
q =

27. Cel-Shading Pass
Get N, C and alpha from the textures.

28. 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: y
N · L

29. Shadow Volumes Compute the silhouette of the caster
Extrude this to form a polyhedron bounding the volume of shadowed space
Shadows are intersection between the volume and the scene

30. 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

31. Nailboard Shadows
Apply the depth displacement to the shadow volume as well as the billboard
Shadow volume visualization

32. Shadow Volume Visualization

33. Shadowing
Only ~300 polygons in this scene, including shadows

34. Results

35. Train

36. Magic Lamp

37. Purple Cloud

38. Explosion

39. Varying Puff Shape

40. Varying Puff Shape

41. Varying Puff Shape

42. Video

43. Video

44. Mimicking Artists

45. Lichtenstein Algorithm Artist  Estate of Roy Lichtenstein 1963

46. Context

47. Published by Dark Horse Comics 1999
Comparison
Algorithm
Artist

48. 50,000 particles
50,000 Particles on GeForce6800
50,000 particles on GeForce6800; bus limited (factor of four is possible from clever encodings)

50. 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