Team Fortress 2

StylizationStylization withwith aa PurposePurpose TheThe IllustrativeIllustrative WorldWorld ofof TeamTeam FortressFortress 22

Jason Mitchell 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! TeamTeam FortressFortress ModMod INITIALINITIAL TeamTeam FortressFortress 22 INITIALINITIAL TeamTeam FortressFortress 22

dic! Me TeamTeam FortressFortress 22 WhyWhy TheThe UniqueUnique VisualVisual Style?Style? • Gameplay • Readability • Branding Read Hierarchy • Team – Friend or Foe? • Color • Class – Run or Attack? • Distinctive silhouettes • Body proportions • Weapons Color Swatch • 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 Early 20th Century Commercial Illustration

J. C. Leyendecker

Dean Cornwell Norman Rockwell Early 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 Clothing Folds

J.C. Leyendecker J.C. Leyendecker Thanksgiving 1628-1928 Tally-Ho, 1930 Rim Highlights

Red Terminator

J.C. Leyendecker J.C. Leyendecker Arrow collar advertisement, 1929 Swimmin’ Hole, 1935 RimRim HighlightingHighlighting RimRim HighlightingHighlighting CHARACTERCHARACTER CREATIONCREATION 1. Character silhouette 2. Interior shapes 3. Model sheet 4. 3D Model 5. Character Skin 6. Final Character in game CharacterCharacter SilhouetteSilhouette • Building block of character design • Identifiable at first read InteriorInterior ShapesShapes • Solving interior character design with shadow shapes • Keep it iconic • Work out design in three quarter pose ModelModel SheetSheet • Use concept painting as guide • Solve design problems using silhouette only • Solve interior design with shadow shapes 3D3D ModelModel • Match silhouette to model sheet • Solve 3 quarter design with screenshots / paintovers • Model with character in mind BaseBase AmbientAmbient OcclusionOcclusion mapmap CharacterCharacter SkinSkin FinalFinal CharacterCharacter • 3D model with texture and basic shading EngineerEngineer ConceptConcept EngineerEngineer modelmodel PyroPyro ConceptConcept PyroPyro modelmodel CharacterCharacter ShadingShading AlgorithmAlgorithm • Previous work in Non-Photorealistic Rendering • Character lighting equation in Team Fortress 2 Gooch,Gooch, 19981998 • Hue and luminance shifts indicate surface Conventional Gooch Shading Shading 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

⎛ 1 1 ⎞ ⎛ ⎛ 1 1 ⎞⎞ ˆ ˆ ˆ ˆ ⎜ ()+⋅ ⎟()blue αkkln d ⎜1 ⎜ ( )+⋅−++ ⎟⎟()yellow + βkkln d ⎝ 2 2 ⎠ ⎝ ⎝ 2 2 ⎠⎠ HalfHalf LambertLambert • 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) LambertianLambertian TermTerm HalfHalf LambertLambert • We have been applying this curve since Half-Life in 1998 • Similar to Exaggerated Shading [Rusinkiewicz06] Lake,Lake, 20002000 • 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 N·L the “lit” end of the 1D texture map Barla,Barla, 20062006 • 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·V|r |N·V|r

N·L N·L CharacterCharacter LightingLighting EquationEquation ViewView independentindependent ⎡ L ⎛⎛ 1 1 ⎞⎞⎤ ˆ ˆ ˆ kd ⎢a()n + ∑ci w⎜⎜ (n⋅li )+ ⎟⎟⎥ + ⎣ i=1 ⎝⎝ 2 2 ⎠⎠⎦

L ˆ ˆ kspec ˆ ˆ krim ˆ ˆ ˆ ∑[]ciksmax()fs ()v ⋅ri , fr kr ()v ⋅ri + ()n ⋅u fr kr a(v) i=1 ViewView--dependentdependent ViewView IndependentIndependent TermsTerms ⎡ L ⎛⎛ 1 1 ⎞⎞⎤ ˆ ˆ ˆ d ⎢ ()+ ∑ i ⎜⎜ ( lnwcnak i )+⋅ ⎟⎟⎥ ⎣ i 1= ⎝⎝ 2 2 ⎠⎠⎦ • Spatially-varying directional ambient ViewView IndependentIndependent TermsTerms ⎡ L ⎛⎛ 1 1 ⎞⎞⎤ ˆ ˆ ˆ d ⎢ ()+ ∑ i ⎜⎜ ( lnwcnak i )+⋅ ⎟⎟⎥ ⎣ i 1= ⎝⎝ 2 2 ⎠⎠⎦ • Spatially-varying directional ambient • Modified Lambertian terms ViewView IndependentIndependent TermsTerms ⎡ L ⎛⎛ 1 1 ⎞⎞⎤ ˆ ˆ ˆ d ⎢ ()+ ∑ i ⎜⎜ ( lnwcnak i )+⋅ ⎟⎟⎥ ⎣ i 1= ⎝⎝ 2 2 ⎠⎠⎦ • Spatially-varying directional ambient • Modified Lambertian terms • Unclamped Lambertian term ViewView IndependentIndependent TermsTerms ⎡ L ⎛⎛ 1 1 ⎞⎞⎤ ˆ ˆ ˆ d ⎢ ()+ ∑ i ⎜⎜ ( lnwcnak i )+⋅ ⎟⎟⎥ ⎣ i 1= ⎝⎝ 2 2 ⎠⎠⎦ • Spatially-varying directional ambient • Modified Lambertian terms • Unclamped Lambertian term • Scale, bias and exponent ViewView IndependentIndependent TermsTerms ⎡ L ⎛⎛ 1 1 ⎞⎞⎤ ˆ ˆ ˆ kd ⎢a()n + ∑ci w⎜⎜ (n⋅li )+ ⎟⎟⎥ ⎣ i=1 ⎝⎝ 2 2 ⎠⎠⎦ • Spatially-varying directional ambient • Modified Lambertian terms • Unclamped Lambertian term • Scale, bias and exponent • Warping function • Albedo 1 1 ()nˆ ⋅lˆ + 2 2 ViewView IndependentIndependent TermsTerms ⎡ L ⎛⎛ 1 1 ⎞⎞⎤ ˆ ˆ ˆ kd ⎢a()n + ∑ci w⎜⎜ (n⋅li )+ ⎟⎟⎥ ⎣ i=1 ⎝⎝ 2 2 ⎠⎠⎦ • Spatially-varying directional ambient • Modified Lambertian terms • Unclamped Lambertian term • Scale, bias and exponent • Warping function ViewView IndependentIndependent TermsTerms ⎡ L ⎛⎛ 1 1 ⎞⎞⎤ ˆ ˆ ˆ d ⎢ ()+ ∑ i ⎜⎜ ( lnwcnak i )+⋅ ⎟⎟⎥ ⎣ i 1= ⎝⎝ 2 2 ⎠⎠⎦ • Spatially-varying directional ambient • Modified Lambertian terms • Unclamped Lambertian term • Scale, bias and exponent • Warping function • Albedo ViewView IndependentIndependent TermsTerms ⎡ L ⎛⎛ 1 1 ⎞⎞⎤ ˆ ˆ ˆ d ⎢ ()+ ∑ i ⎜⎜ ( lnwcnak i )+⋅ ⎟⎟⎥ ⎣ i 1= ⎝⎝ 2 2 ⎠⎠⎦ • Spatially-varying directional ambient • Modified Lambertian terms • Unclamped Lambertian term • Scale, bias and exponent • Warping function • Albedo ViewView--dependentdependent TermsTerms L ˆˆ kspec krim ˆˆˆˆˆ ∑[]si ()()⋅ is , irr ()()⋅+⋅ rr vakfunrvkfrvfmaxkc () i 1= ViewView--dependentdependent TermsTerms L ˆˆ kspec krim ˆˆˆˆˆ ∑[]si ()()⋅ is , irr ()()⋅+⋅ rr vakfunrvkfrvfmaxkc () i 1= • Multiple Phong terms per light ViewView--dependentdependent TermsTerms L ˆˆ kspec krim ˆˆˆˆˆ ∑[]si ()()⋅ is , irr ()()⋅+⋅ rr vakfunrvkfrvfmaxkc () i 1= • Multiple Phong terms per light

• krim broad, constant exponent ViewView--dependentdependent TermsTerms L ˆˆ kspec krim ˆˆˆˆˆ ∑[]si ()()⋅ is , irr ()()⋅+⋅ rr vakfunrvkfrvfmaxkc () i 1= • Multiple Phong terms per light