real-time rendering of cartoon smoke and clouds morgan mcguire andi fein paulo ferreira
TRANSCRIPT
![Page 1: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/1.jpg)
Real-Time Rendering of Cartoon Smoke and Clouds
Real-Time Rendering of Cartoon Smoke and Clouds
Morgan McGuireAndi Fein
Paulo Ferreira
![Page 2: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/2.jpg)
Gundam
![Page 3: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/3.jpg)
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…
![Page 4: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/4.jpg)
Captain Marvel, June 1947
Marvel Comics 1947
Outlines
Self-Shadowing
Cel Shading
![Page 5: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/5.jpg)
Heart of Empire
Published by Dark Horse Comics 1999
![Page 6: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/6.jpg)
SuperMan/Batman #16
![Page 7: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/7.jpg)
Teenage Mutant Ninja Turtles Cartoon (2004)
![Page 8: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/8.jpg)
Worms 4 (Game 2005)
![Page 9: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/9.jpg)
Algorithm
![Page 10: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/10.jpg)
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
![Page 11: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/11.jpg)
Simulation• Use Particles from the game “Avalanche”
![Page 12: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/12.jpg)
Simulation• Instead of smoke and clouds, cartoon effect
applied on the avalanche of the game
![Page 13: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/13.jpg)
Rendering steps
1. Precomputed Nailboards
2. Outlines
3. Cel Shading
4. Shadows
![Page 14: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/14.jpg)
Elements of Style
Outlines Shading Self-Shadowing
Steps
![Page 15: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/15.jpg)
Nailboards
![Page 16: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/16.jpg)
Normal-mapped Nailboards
• Precompute extended billboard textures
• Several puff orientations for variety
• Each particle is assigned one variation
Normal Depth Color Opacity
![Page 17: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/17.jpg)
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.
![Page 18: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/18.jpg)
Outlines
• Edges of puff are deep and black
Viewer Actual BillboardNailboard DepthDepth
Color
Black
Shaded
![Page 19: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/19.jpg)
Depth and Outline Pass
• Add d from the texture to the depth at the pixel and the depth buffer test automatically produces correct intersections.
![Page 20: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/20.jpg)
Outlines
• Edges of puff are deep and black
Viewer Image1 Nailboard
![Page 21: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/21.jpg)
Outlines
• Edges of puff are deep and black• Depth test suppresses excessive internal contours
Viewer Image2 Nailboards
No internal contour
![Page 22: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/22.jpg)
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
![Page 23: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/23.jpg)
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.
![Page 24: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/24.jpg)
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
![Page 25: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/25.jpg)
Explosion B & W
q =
Ambient
![Page 26: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/26.jpg)
Explosion Color
q =
Ambient
![Page 27: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/27.jpg)
Cel-Shading Pass
• Get N, C and alpha from the textures.
![Page 28: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/28.jpg)
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
![Page 29: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/29.jpg)
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
![Page 30: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/30.jpg)
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
![Page 31: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/31.jpg)
Nailboard Shadows
• Apply the depth displacement to the shadow volume as well as the billboard
Shadow volume visualization
![Page 32: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/32.jpg)
Shadow Volume Visualization
![Page 33: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/33.jpg)
Shadowing
![Page 34: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/34.jpg)
Results
![Page 35: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/35.jpg)
Train
![Page 36: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/36.jpg)
Magic Lamp
![Page 37: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/37.jpg)
Purple Cloud
![Page 38: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/38.jpg)
Explosion
![Page 39: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/39.jpg)
Varying Puff Shape
![Page 40: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/40.jpg)
Varying Puff Shape
![Page 41: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/41.jpg)
Varying Puff Shape
![Page 42: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/42.jpg)
Video
![Page 43: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/43.jpg)
Video
![Page 44: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/44.jpg)
Mimicking Artists
![Page 45: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/45.jpg)
Lichtenstein
Estate of Roy Lichtenstein 1963
Estate of Roy Lichtenstein 1963
ArtistAlgorithm
![Page 46: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/46.jpg)
Context
![Page 47: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/47.jpg)
ComparisonPublished by Dark Horse Comics 1999
Algorithm Artist
![Page 48: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/48.jpg)
50,000 particles
50,000 Particles on GeForce6800
![Page 49: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/49.jpg)
![Page 50: Real-Time Rendering of Cartoon Smoke and Clouds Morgan McGuire Andi Fein Paulo Ferreira](https://reader036.vdocuments.site/reader036/viewer/2022062618/5513bf7e5503464b298b48d4/html5/thumbnails/50.jpg)
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