stylization with a purpose - · pdf filestylization with a purpose. outline ... character...
TRANSCRIPT
![Page 1: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/1.jpg)
The Illustrative World The Illustrative World of Team Fortress 2of Team Fortress 2
Jason MitchellJason Mitchell
Stylization with a PurposeStylization with a Purpose
![Page 2: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/2.jpg)
OutlineOutline
• History of Team Fortress• Characters
• Art direction• Shading algorithms
• Environments• Meet the Team• Post-ship• Sneak Peek of the next Meet the Team short!
![Page 3: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/3.jpg)
Team Fortress ModTeam Fortress Mod
![Page 4: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/4.jpg)
INITIAL Team Fortress 2INITIAL Team Fortress 2
![Page 5: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/5.jpg)
INITIAL Team Fortress 2INITIAL Team Fortress 2
Medic!
![Page 6: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/6.jpg)
Team Fortress 2Team Fortress 2
![Page 7: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/7.jpg)
Why The Unique Visual Style?Why The Unique Visual Style?
• Gameplay• Readability• Branding
![Page 8: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/8.jpg)
• Team – Friend or Foe?• Color
• Class – Run or Attack?• Distinctive silhouettes• Body proportions• Weapons• Shoes, hats and clothing folds
• Selected weapon – What’s he packin’?• Highest contrast at chest level, where weapon is held• Gradient from dark feet to light chest
Color Swatch
Read Hierarchy
![Page 9: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/9.jpg)
Early 20th Century Commercial Illustration
Dean Cornwell
J. C. Leyendecker
Norman Rockwell
![Page 10: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/10.jpg)
Early 20th Century Commercial IllustrationEarly 20th Century Commercial Illustration
• Chose to adopt specific conventions of the commercial illustrator J. C. Leyendecker:• Shading obeys a warm-to-cool hue shift. Shadows go to
cool, not black• Saturation increases at the terminator with respect to a given
light source. The terminator is often reddened.• On characters, interior details such as clothing folds are
chosen to echo silhouette shapes• Silhouettes are often emphasized with rim highlights rather
than dark outlines
![Page 11: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/11.jpg)
J.C. LeyendeckerThanksgiving 1628-1928
J.C. LeyendeckerTally-Ho, 1930
Clothing Folds
![Page 12: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/12.jpg)
J.C. LeyendeckerArrow collar advertisement, 1929
J.C. LeyendeckerSwimmin’ Hole, 1935
Rim Highlights
Red Terminator
![Page 13: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/13.jpg)
Rim HighlightingRim Highlighting
![Page 14: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/14.jpg)
Rim HighlightingRim Highlighting
![Page 15: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/15.jpg)
CHARACTER CREATIONCHARACTER CREATION
1. Character silhouette 2. Interior shapes3. Model sheet4. 3D Model5. Character Skin6. Final Character in game
![Page 16: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/16.jpg)
Character SilhouetteCharacter Silhouette• Building block of character design• Identifiable at first read
![Page 17: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/17.jpg)
Interior ShapesInterior Shapes• Solving interior character
design with shadow shapes• Keep it iconic• Work out design in three
quarter pose
![Page 18: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/18.jpg)
Model SheetModel Sheet• Use concept painting as
guide• Solve design problems using
silhouette only• Solve interior design with
shadow shapes
![Page 19: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/19.jpg)
3D Model3D Model• Match silhouette to model
sheet• Solve 3 quarter design with
screenshots / paintovers• Model with character in mind
![Page 20: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/20.jpg)
Base Ambient Occlusion mapBase Ambient Occlusion map
![Page 21: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/21.jpg)
Character SkinCharacter Skin
![Page 22: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/22.jpg)
Final CharacterFinal Character• 3D model with texture and
basic shading
![Page 23: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/23.jpg)
Engineer ConceptEngineer Concept
![Page 24: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/24.jpg)
Engineer modelEngineer model
![Page 25: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/25.jpg)
Pyro ConceptPyro Concept
![Page 26: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/26.jpg)
Pyro modelPyro model
![Page 27: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/27.jpg)
Character Shading AlgorithmCharacter Shading Algorithm• Previous work in Non-Photorealistic Rendering• Character lighting equation in Team Fortress 2
![Page 28: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/28.jpg)
( ) ( ) ( ) ( )dyellowdblue kklnkkln βα +⎟⎟⎠
⎞⎜⎜⎝
⎛⎟⎠⎞
⎜⎝⎛ +⋅−++⎟
⎠⎞
⎜⎝⎛ +⋅
21ˆˆ
211
21ˆˆ
21
Gooch, 1998Gooch, 1998• Hue and luminance shifts indicate surface
orientation relative to light• Blend between warm and cool based upon
unclamped Lambertian term, underlying albedo and some free parameters
• Extreme lights and darks are reserved for edge lines and highlights
Conventional Shading
Gooch Shading
![Page 29: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/29.jpg)
• Typically clamp N·L to zero at the terminator
• Half Lambert scales the -1 to 1 cosine term (red curve) by ½, biases by ½ and squares to pull the light all the way around (blue curve) Lambertian TermLambertian Term Half LambertHalf Lambert
• We have been applying this curve since Half-Life in 1998
• Similar to Exaggerated Shading [Rusinkiewicz06]
Half LambertHalf Lambert
![Page 30: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/30.jpg)
Lake, 2000Lake, 2000• Lake used a 1D texture lookup
based upon the Lambertian term to simulate the limited color palette cartoonists use for painting cels
• Also allows for the inclusion of a view-independent pseudo specular highlight by including a small number of bright texels at the “lit” end of the 1D texture map
N·L
![Page 31: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/31.jpg)
Barla, 2006Barla, 2006• Barla has extended this technique by using a 2D texture lookup to
incorporate view-dependent and level-of-detail effects.• Fresnel-like creates a hard “virtual backlight” which is essentially a
rim-lighting term, though this term is not designed to correspond to any particular lighting environment.
N·L N·L
|N·V|r |N·V|r
![Page 32: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/32.jpg)
Character Lighting EquationCharacter Lighting Equation
( ) ( ) +⎥⎦
⎤⎢⎣
⎡⎟⎟⎠
⎞⎜⎜⎝
⎛⎟⎠⎞
⎜⎝⎛ +⋅+∑ 2
1ˆˆ21ˆ
1=ii
L
id lnwcnak
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimk
irrspeck
issi
L
i
ˆˆˆˆˆ,ˆˆ1=
⋅+⋅⋅∑
View independentView independent
ViewView--dependentdependent
![Page 33: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/33.jpg)
( ) ( ) ⎥⎦
⎤⎢⎣
⎡⎟⎟⎠
⎞⎜⎜⎝
⎛⎟⎠⎞
⎜⎝⎛ +⋅+∑ 2
1ˆˆ21ˆ
1=ii
L
id lnwcnak
View Independent TermsView Independent Terms
• Spatially-varying directional ambient
![Page 34: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/34.jpg)
( ) ( ) ⎥⎦
⎤⎢⎣
⎡⎟⎟⎠
⎞⎜⎜⎝
⎛⎟⎠⎞
⎜⎝⎛ +⋅+∑ 2
1ˆˆ21ˆ
1=ii
L
id lnwcnak
View Independent TermsView Independent Terms
• Spatially-varying directional ambient
• Modified Lambertian terms
![Page 35: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/35.jpg)
( ) ( ) ⎥⎦
⎤⎢⎣
⎡⎟⎟⎠
⎞⎜⎜⎝
⎛⎟⎠⎞
⎜⎝⎛ +⋅+∑ 2
1ˆˆ21ˆ
1=ii
L
id lnwcnak
View Independent TermsView Independent Terms
• Spatially-varying directional ambient
• Modified Lambertian terms• Unclamped Lambertian term
![Page 36: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/36.jpg)
( ) ( ) ⎥⎦
⎤⎢⎣
⎡⎟⎟⎠
⎞⎜⎜⎝
⎛⎟⎠⎞
⎜⎝⎛ +⋅+∑ 2
1ˆˆ21ˆ
1=ii
L
id lnwcnak
View Independent TermsView Independent Terms
• Spatially-varying directional ambient
• Modified Lambertian terms• Unclamped Lambertian term• Scale, bias and exponent
![Page 37: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/37.jpg)
( ) ( ) ⎥⎦
⎤⎢⎣
⎡⎟⎟⎠
⎞⎜⎜⎝
⎛⎟⎠⎞
⎜⎝⎛ +⋅+∑ 2
1ˆˆ21ˆ
1=ii
L
id lnwcnak
View Independent TermsView Independent Terms
• Spatially-varying directional ambient
• Modified Lambertian terms• Unclamped Lambertian term• Scale, bias and exponent• Warping function
• Albedo( )
21ˆˆ
21
+⋅ ln
![Page 38: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/38.jpg)
( ) ( ) ⎥⎦
⎤⎢⎣
⎡⎟⎟⎠
⎞⎜⎜⎝
⎛⎟⎠⎞
⎜⎝⎛ +⋅+∑ 2
1ˆˆ21ˆ
1=ii
L
id lnwcnak
View Independent TermsView Independent Terms
• Spatially-varying directional ambient
• Modified Lambertian terms• Unclamped Lambertian term• Scale, bias and exponent• Warping function
![Page 39: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/39.jpg)
( ) ( ) ⎥⎦
⎤⎢⎣
⎡⎟⎟⎠
⎞⎜⎜⎝
⎛⎟⎠⎞
⎜⎝⎛ +⋅+∑ 2
1ˆˆ21ˆ
1=ii
L
id lnwcnak
View Independent TermsView Independent Terms
• Spatially-varying directional ambient
• Modified Lambertian terms• Unclamped Lambertian term• Scale, bias and exponent• Warping function
• Albedo
![Page 40: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/40.jpg)
( ) ( ) ⎥⎦
⎤⎢⎣
⎡⎟⎟⎠
⎞⎜⎜⎝
⎛⎟⎠⎞
⎜⎝⎛ +⋅+∑ 2
1ˆˆ21ˆ
1=ii
L
id lnwcnak
View Independent TermsView Independent Terms
• Spatially-varying directional ambient
• Modified Lambertian terms• Unclamped Lambertian term• Scale, bias and exponent• Warping function
• Albedo
![Page 41: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/41.jpg)
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimk
irrspeck
issi
L
i
ˆˆˆˆˆ,ˆˆ1=
⋅+⋅⋅∑ViewView--dependent Termsdependent Terms
![Page 42: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/42.jpg)
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimk
irrspeck
issi
L
i
ˆˆˆˆˆ,ˆˆ1=
⋅+⋅⋅∑ViewView--dependent Termsdependent Terms
• Multiple Phong terms per light
![Page 43: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/43.jpg)
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimk
irrspeck
issi
L
i
ˆˆˆˆˆ,ˆˆ1=
⋅+⋅⋅∑ViewView--dependent Termsdependent Terms
• Multiple Phong terms per light• krim broad, constant exponent
![Page 44: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/44.jpg)
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimk
irrspeck
issi
L
i
ˆˆˆˆˆ,ˆˆ1=
⋅+⋅⋅∑ViewView--dependent Termsdependent Terms
• Multiple Phong terms per light• krim broad, constant exponent• kspec exponent (constant or texture)
![Page 45: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/45.jpg)
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimk
irrspeck
issi
L
i
ˆˆˆˆˆ,ˆˆ1=
⋅+⋅⋅∑ViewView--dependent Termsdependent Terms
• Multiple Phong terms per light• krim broad, constant exponent• kspec exponent (constant or texture)• fs artist tuned Fresnel term
![Page 46: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/46.jpg)
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimk
irrspeck
issi
L
i
ˆˆˆˆˆ,ˆˆ1=
⋅+⋅⋅∑ViewView--dependent Termsdependent Terms
• Multiple Phong terms per light• krim broad, constant exponent• kspec exponent (constant or texture)• fs artist tuned Fresnel term• fr rim Fresnel term, (1-(n·v))4
![Page 47: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/47.jpg)
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimk
irrspeck
issi
L
i
ˆˆˆˆˆ,ˆˆ1=
⋅+⋅⋅∑ViewView--dependent Termsdependent Terms
• Multiple Phong terms per light• krim broad, constant exponent• kspec exponent (constant or texture)• fs artist tuned Fresnel term• fr rim Fresnel term, (1-(n·v))4
• kr rim mask texture
![Page 48: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/48.jpg)
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimk
irrspeck
issi
L
i
ˆˆˆˆˆ,ˆˆ1=
⋅+⋅⋅∑ViewView--dependent Termsdependent Terms
• Multiple Phong terms per light• krim broad, constant exponent• kspec exponent (constant or texture)• fs artist tuned Fresnel term• fr rim Fresnel term, (1-(n·v))4
• kr rim mask texture• ks specular mask texture
![Page 49: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/49.jpg)
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimk
irrspeck
issi
L
i
ˆˆˆˆˆ,ˆˆ1=
⋅+⋅⋅∑ViewView--dependent Termsdependent Terms
• Multiple Phong terms per light• krim broad, constant exponent• kspec exponent (constant or texture)• fs artist tuned Fresnel term• fr rim Fresnel term, (1-(n·v))4
• kr rim mask texture• ks specular mask texture
![Page 50: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/50.jpg)
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimk
irrspeck
issi
L
i
ˆˆˆˆˆ,ˆˆ1=
⋅+⋅⋅∑ViewView--dependent Termsdependent Terms
• Multiple Phong terms per light• krim broad, constant exponent• kspec exponent (constant or texture)• fs artist tuned Fresnel term• fr rim Fresnel term, (1-(n·v))4
• kr rim mask texture• ks specular mask texture
![Page 51: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/51.jpg)
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimk
irrspeck
issi
L
i
ˆˆˆˆˆ,ˆˆ1=
⋅+⋅⋅∑ViewView--dependent Termsdependent Terms
• Multiple Phong terms per light• krim broad, constant exponent• kspec exponent (constant or texture)• fs artist tuned Fresnel term• fr rim Fresnel term, (1-(n·v))4
• kr rim mask texture• ks specular mask texture
![Page 52: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/52.jpg)
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimk
irrspeck
issi
L
i
ˆˆˆˆˆ,ˆˆ1=
⋅+⋅⋅∑ViewView--dependent Termsdependent Terms
• Multiple Phong terms per light• krim broad, constant exponent• kspec exponent (constant or texture)• fs artist tuned Fresnel term• fr rim Fresnel term, (1-(n·v))4
• kr rim mask texture• ks specular mask texture
• Dedicated rim lighting• a(v) Directional ambient evaluated with v
![Page 53: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/53.jpg)
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimk
irrspeck
issi
L
i
ˆˆˆˆˆ,ˆˆ1=
⋅+⋅⋅∑ViewView--dependent Termsdependent Terms
• Multiple Phong terms per light• krim broad, constant exponent• kspec exponent (constant or texture)• fs artist tuned Fresnel term• fr rim Fresnel term, (1-(n·v))4
• kr rim mask texture• ks specular mask texture
• Dedicated rim lighting• a(v) Directional ambient evaluated with v• kr same rim mask
![Page 54: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/54.jpg)
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimk
irrspeck
issi
L
i
ˆˆˆˆˆ,ˆˆ1=
⋅+⋅⋅∑ViewView--dependent Termsdependent Terms
• Multiple Phong terms per light• krim broad, constant exponent• kspec exponent (constant or texture)• fs artist tuned Fresnel term• fr rim Fresnel term, (1-(n·v))4
• kr rim mask texture• ks specular mask texture
• Dedicated rim lighting• a(v) Directional ambient evaluated with v• kr same rim mask• fr same rim Fresnel
![Page 55: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/55.jpg)
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimk
irrspeck
issi
L
i
ˆˆˆˆˆ,ˆˆ1=
⋅+⋅⋅∑ViewView--dependent Termsdependent Terms
• Multiple Phong terms per light• krim broad, constant exponent• kspec exponent (constant or texture)• fs artist tuned Fresnel term• fr rim Fresnel term, (1-(n·v))4
• kr rim mask texture• ks specular mask texture
• Dedicated rim lighting• a(v) Directional ambient evaluated with v• kr same rim mask• fr same rim Fresnel• n·u term that makes rim highlights tend to
come from above (u is up vector)
![Page 56: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/56.jpg)
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimk
irrspeck
issi
L
i
ˆˆˆˆˆ,ˆˆ1=
⋅+⋅⋅∑ViewView--dependent Termsdependent Terms
• Multiple Phong terms per light• krim broad, constant exponent• kspec exponent (constant or texture)• fs artist tuned Fresnel term• fr rim Fresnel term, (1-(n·v))4
• kr rim mask texture• ks specular mask texture
• Dedicated rim lighting• a(v) Directional ambient evaluated with v• kr same rim mask• fr same rim Fresnel• n·u term that makes rim highlights tend to
come from above (u is up vector)
![Page 57: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/57.jpg)
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimk
irrspeck
issi
L
i
ˆˆˆˆˆ,ˆˆ1=
⋅+⋅⋅∑ViewView--dependent Termsdependent Terms
• Multiple Phong terms per light• krim broad, constant exponent• kspec exponent (constant or texture)• fs artist tuned Fresnel term• fr rim Fresnel term, (1-(n·v))4
• kr rim mask texture• ks specular mask texture
• Dedicated rim lighting• a(v) Directional ambient evaluated with v• kr same rim mask• fr same rim Fresnel• n·u term that makes rim highlights tend to
come from above (u is up vector)
![Page 58: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/58.jpg)
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimk
irrspeck
issi
L
i
ˆˆˆˆˆ,ˆˆ1=
⋅+⋅⋅∑ViewView--dependent Termsdependent Terms
• Multiple Phong terms per light• krim broad, constant exponent• kspec exponent (constant or texture)• fs artist tuned Fresnel term• fr rim Fresnel term, (1-(n·v))4
• kr rim mask texture• ks specular mask texture
• Dedicated rim lighting• a(v) Directional ambient evaluated with v• kr same rim mask• fr same rim Fresnel• n·u term that makes rim highlights tend to
come from above (u is up vector)
![Page 59: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/59.jpg)
ENVIRONMENT DESIGNENVIRONMENT DESIGN
• Creating a compelling, immersive world
• Team distinction through material hue/value/saturation.
• Impressionistic painterly look
![Page 60: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/60.jpg)
CONTRASTING TEAM PROPERTIESCONTRASTING TEAM PROPERTIES• Red
• Warm colors• Natural materials• Angular geometry
• Blue• Cool colors• Industrial materials• Orthogonal forms
![Page 61: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/61.jpg)
Red base in 2fort mapRed base in 2fort map
![Page 62: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/62.jpg)
![Page 63: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/63.jpg)
Blue Base in 2 fort mapBlue Base in 2 fort map
![Page 64: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/64.jpg)
![Page 65: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/65.jpg)
ROUGH SHELLROUGH SHELL
Early game screenshotEarly game screenshot
![Page 66: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/66.jpg)
CONCEPTCONCEPT
2D 2D PaintoverPaintover
![Page 67: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/67.jpg)
ART PASSART PASS
Final inFinal in--game screenshotgame screenshot
![Page 68: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/68.jpg)
Impressionistic texturesImpressionistic textures
Shot from Shot from Spirited AwaySpirited Away
![Page 69: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/69.jpg)
Miyazaki Miyazaki ––
Brush Width ForeshortenedBrush Width Foreshortened
Background plates from Spirited Away
Background plates from Background plates from Spirited AwaySpirited Away
• Can easily imagine a 3D camera move between these 2D views of the same space
![Page 70: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/70.jpg)
World texturingWorld texturing
Texture mapTexture map InIn--game Screenshotgame Screenshot
![Page 71: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/71.jpg)
World texturingWorld texturing
Texture mapTexture map InIn--game Screenshotgame Screenshot
![Page 72: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/72.jpg)
World texturingWorld texturing
Texture mapTexture map InIn--game Screenshotgame Screenshot
![Page 73: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/73.jpg)
World texturingWorld texturing
Texture mapTexture map InIn--game Screenshotgame Screenshot
![Page 74: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/74.jpg)
Model texturingModel texturing
Texture mapTexture map InIn--game Screenshotgame Screenshot
![Page 75: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/75.jpg)
Class Class ==
CharacterCharacter• Defined personalities and
archetypes up front• Consistent voice casting• In-game taunt animations and
context-sensitive emotes• “So much blood…”
• Meet the Team shorts• Character vignette movies
rendered with game engine• Game assets except:
• Up-rezzed hands• More facial morph targets• More facial wrinkle maps
• We find ourselves mixing the terms “Class” and “Character”
![Page 76: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/76.jpg)
EA LAEA LA
How did fans react?How did fans react?
VolitionVolition
NihilisticNihilistic
NC SoftNC Soft
BlizzardBlizzard
BiowareBioware
![Page 77: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/77.jpg)
Where do we go from here?Where do we go from here?• Successful multiplayer games live for a long time• Regular updates via Steam
• Shipped 28 times since the Beta in September• New features, code optimizations and exploit fixes• This is why we built Steam & Steamworks in the first place
• Steam is not just a digital distribution system• Can ship updates extremely quickly and fully engage the community
• Extend experience for dedicated players• Maps• Game modes• Achievements
• Unlockable weapons in Team Fortress 2• Can ship more quickly than new maps and game modes
New Medigun concept
![Page 78: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/78.jpg)
Meet The ScoutMeet The Scout
• Things to look for…• Distinct character classes
• Shape and Shading
• Analogous color palette• Painterly world texturing
![Page 79: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/79.jpg)
ConclusionConclusion
• History• Characters
• Art direction• Shading algorithms
• Environments• Meet the Team• Post-ship• Meet the Scout
![Page 80: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/80.jpg)
ReferencesReferences
• Barla, P., Thollot, J., & Markosian, L. 2006. “X-Toon: An Extended Toon Shader,” NPAR 2006
• Gooch, A. A., Gooch, B., Shirley, P., and Cohen, E. “A Non- Photorealistic Lighting Model for Automatic Technical Illustration,” SIGGRAPH98.
• Lake, A., Marshall, C., Harris, M., and Blackstein, M. 2000. “Stylized Rendering Techniques for Scalable Real-Time 3D Animation,” ACM Press, New York, J.-D. Fekete and D. Salesin, Eds., 13–20.
• Jason Mitchell, Moby Francke and Dhabih Eng, “Illustrative Rendering in Team Fortress 2,” ACM Symposium on Non-Photorealistic Animation and Rendering, 2007
![Page 81: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/81.jpg)
Reading ListReading List
• Art History, Cinematography & Graphic Design• Painting with Light by John Alton• The Science of Art: Optical Themes in Western Art from
Brunelleschi to Seurat by Martin Kemp• Secret knowledge: Rediscovering the Lost Techniques
of the Old Masters by David Hockney• On Reflection by Jonathan Miller• Anything by Edward Tufte or Marcel Minnaert
![Page 82: Stylization with a Purpose - · PDF fileStylization with a Purpose. Outline ... CHARACTER CREATION 1. ... Character Silhouette • Building block of character design •](https://reader031.vdocuments.us/reader031/viewer/2022022420/5a7f57a47f8b9a9d308b5ba3/html5/thumbnails/82.jpg)
Questions?Questions?