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 INITIAL Team Fortress 2 Medic! 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 • indicate surface Hue and luminance shifts 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 ⎞⎞ ˆ ˆ ˆ ˆ ⎜n()⋅ l + ⎟()+ kblue α d + k ⎜1 −⎜n( l) ⋅⎟ +⎟() kyellow + β d k ⎝ 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 ⎞⎞⎤ ˆ ˆ ˆ k ad ⎢ n()+ ∑ ci ⎜⎜ w(⋅i ) + n⎟⎟ l⎥ ⎣ =i 1 ⎝⎝ 2 2 ⎠⎠⎦ • Spatially-varying directional ambient ViewView IndependentIndependent TermsTerms ⎡ L ⎛⎛ 1 1 ⎞⎞⎤ ˆ ˆ ˆ k ad ⎢ n()+ ∑ ci ⎜⎜ w(⋅i ) + n⎟⎟ l⎥ ⎣ =i 1 ⎝⎝ 2 2 ⎠⎠⎦ • Spatially-varying directional ambient • Modified Lambertian terms ViewView IndependentIndependent TermsTerms ⎡ L ⎛⎛ 1 1 ⎞⎞⎤ ˆ ˆ ˆ k ad ⎢ n()+ ∑ ci ⎜⎜ w(⋅i ) + n⎟⎟ l⎥ ⎣ =i 1 ⎝⎝ 2 2 ⎠⎠⎦ • Spatially-varying directional ambient • Modified Lambertian terms • Unclamped Lambertian term ViewView IndependentIndependent TermsTerms ⎡ L ⎛⎛ 1 1 ⎞⎞⎤ ˆ ˆ ˆ k ad ⎢ n()+ ∑ ci ⎜⎜ w(⋅i ) + n⎟⎟ l⎥ ⎣ =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 ⎞⎞⎤ ˆ ˆ ˆ k ad ⎢ n()+ ∑ ci ⎜⎜ w(⋅i ) + n⎟⎟ l⎥ ⎣ =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 ⎞⎞⎤ ˆ ˆ ˆ k ad ⎢ n()+ ∑ ci ⎜⎜ w(⋅i ) + n⎟⎟ l⎥ ⎣ =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 ˆ ˆ ˆ c k max∑[]i f s v()s() r⋅ i , fr k r ()⋅ v i r +) ⋅ ()r n r u ( f k a v =i 1 ViewView--dependentdependent TermsTerms L ˆ ˆ kspec ˆ ˆkrim ˆ ˆ ˆ c k max∑[]i f s v()s() r⋅ i , fr k r ()⋅ v i r +) ⋅ ()r n r u ( f k a v =i 1 • Multiple Phong terms per light ViewView--dependentdependent TermsTerms L ˆ ˆ kspec ˆ ˆkrim ˆ ˆ ˆ c k max∑[]i f s v()s() r⋅ i , fr k r ()⋅ v i r +) ⋅ ()r n r u ( f k a v =i 1 • Multiple Phong terms per light • krim broad, constant exponent ViewView--dependentdependent TermsTerms L ˆ ˆ kspec ˆ ˆkrim ˆ ˆ ˆ c k max∑[]i f s v()s() r⋅ i , fr k r ()⋅ v i r +) ⋅ ()r n r u ( f k a v =i 1 • Multiple Phong terms per light • krim broad, constant exponent • kspec exponent (constant or texture) ViewView--dependentdependent TermsTerms L ˆ ˆ kspec ˆ ˆkrim ˆ ˆ ˆ c k max∑[]i f s v()s() r⋅ i , fr k r ()⋅ v i r +) ⋅ ()r n r u ( f k a v =i 1 • Multiple Phong terms per light • krim broad, constant exponent • kspec exponent (constant or texture) • fs artist tuned Fresnel term ViewView--dependentdependent TermsTerms L ˆ ˆ kspec ˆ ˆkrim ˆ ˆ ˆ c k max∑[]i f s v()s() r⋅ i , fr k r ()⋅ v i r +) ⋅ ()r n r u ( f k a v =i 1 • Multiple Phong terms per light • krim broad, constant exponent • kspec exponent (constant or texture) • fs artist tuned Fresnel term 4 • fr m Fresnel term, ri(1-(n·v)) ViewView--dependentdependent TermsTerms L ˆ ˆ kspec ˆ ˆkrim ˆ ˆ ˆ c k max∑[]i f s v()s() r⋅ i , fr k r ()⋅ v i r +) ⋅ ()r n r u ( f k a v =i 1 • Multiple Phong terms per light • krim broad, constant exponent • kspec exponent (constant or texture) • fs artist tuned Fresnel term 4 • fr m Fresnel term, ri(1-(n·v)) • kr rim mask texture ViewView--dependentdependent TermsTerms L ˆ ˆ kspec ˆ ˆkrim ˆ ˆ ˆ c k max∑[]i f s v()s() r⋅ i , fr k r ()⋅ v i r +) ⋅ ()r n r u ( f k a v =i 1 • Multiple Phong terms per light • krim broad, constant exponent • kspec exponent (constant or texture) • fs artist tuned Fresnel term 4 • fr m Fresnel term, ri(1-(n·v)) • kr rim mask texture • ks specular mask texture ViewView--dependentdependent TermsTerms L ˆ ˆ kspec ˆ ˆ krim ˆ ˆ ˆ ∑[]ciksmax()fs ()v ⋅ri , fr kr ()v ⋅ri + ()n ⋅u fr kr a(v) i=1 • Multiple Phong terms per light • krim broad, constant exponent • kspec exponent (constant or texture) • fs artist tuned Fresnel term 4 • fr rim Fresnel term, (1-(n·v)) • kr rim mask texture • ks specular mask texture ViewView--dependentdependent TermsTerms L ˆ ˆ kspec ˆ ˆ krim ˆ ˆ ˆ ∑[]ciksmax()fs ()v ⋅ri , fr kr ()v ⋅ri + ()n ⋅u fr kr a(v) i=1 • Multiple Phong terms per light • krim broad, constant exponent • kspec exponent (constant or texture) • fs artist tuned Fresnel term 4 • fr rim Fresnel term, (1-(n·v)) • kr rim mask texture • ks specular mask texture ViewView--dependentdependent TermsTerms L ˆ ˆ kspec ˆ ˆ krim ˆ ˆ ˆ ∑[]ciksmax()fs ()v ⋅ri , fr kr ()v ⋅ri + ()n ⋅u fr kr a(v) i=1 • Multiple Phong terms per light • krim broad, constant exponent • kspec exponent (constant or texture) • fs artist tuned Fresnel term 4 • fr rim Fresnel term, (1-(n·v)) • kr rim mask texture • ks specular mask texture ViewView--dependentdependent TermsTerms L ˆ ˆ kspec ˆ ˆkrim ˆ ˆ ˆ c k max∑[]i f s v()s()