8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
1/57
2007 Valve Corporation. All Rights Reserved.
IllustrativeIllustrative
Rendering inRendering inTeam Fortress 2Team Fortress 2
Jason MitchellJason Mitchell
Moby FranckeMoby Francke
Dhabih EngDhabih Eng
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
2/57
2007 Valve Corporation. All Rights Reserved.
Motivations and related work
Environments
Characters and interactive shading Future work
OutlineOutline
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
3/57
2007 Valve Corporation. All Rights Reserved.
Team Fortress 2Team Fortress 2
Class-based multiplayercombat game which will bereleased this fall
Unique visual style
Differentiation - multiplayercombat games tend toembrace a contemporaryphotorealistic look
Gameplay -Team Fortress
has always featuredcartoonish, over-the-topsituations
Readability - Classdifferentiation is the core of
Team Fortress 2, hence weneeded to be able to clearlydifferentiate classes visually
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
4/57
2007 Valve Corporation. All Rights Reserved.
Value contrast
Simple forms No unnecessarily off-kilter shapes
Minimize visual noise Texture and geometric
Minimize repetition
Environment Design PrinciplesEnvironment Design Principles
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
5/57
2007 Valve Corporation. All Rights Reserved.
Contrasting Team PropertiesContrasting Team Properties
Red Warm colors
Natural materials
Angular geometry
Blue Cool colors
Industrial materials Orthogonal forms
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
6/57
Blue base in 2fort map
2007 Valve Corporation. All Rights Reserved.
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
7/57
Red base in 2fort map
2007 Valve Corporation. All Rights Reserved.
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
8/57 2007 Valve Corporation. All Rights Reserved.
Photorealistic techniques from our other games Radiosity-generated light maps Special effects such as reflection and refraction
Hand-painted textures with minimal noise,applied directly to 3D geometry Loose details with visible brush strokes Inherent solidity and frame-to-frame coherence Hold up under magnification better than
photoreference
Brush strokes appear in perspective, not in the2D image plane [Miyazaki02]
High frequency detail in photorealistic gamescan overpower design
World RenderingWorld Rendering
Color Palette
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
9/57 2007 Valve Corporation. All Rights Reserved.
MiyazakiMiyazaki Brush Width ForeshortenedBrush Width Foreshortened
Background plates from
Spirited Away
Background plates fromBackground plates from
Spirited AwaySpirited Away
Can easily imagine a 3D cameramove between these 2D views of
the same space
2007 Valve Corporation. All Rights Reserved.
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
10/57 2007 Valve Corporation. All Rights Reserved.
Neutral EntitiesNeutral Entities
Variations in hue and saturation areused to differentiate neutral entitiesin the game world
A hue other than red or blue createsdisassociation from either team color Increased saturation makes these
important entities stand out in the
desaturated environment Equally beneficial or dangerous to
either team Beneficial green / cyan health pickups Dangerous yellow train yard gates
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
11/57 2007 Valve Corporation. All Rights Reserved.
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
12/57 2007 Valve Corporation. All Rights Reserved.
Character Design GoalsCharacter Design Goals
Easily visible against environment
Characters must be readable quickly by other players
Communicate shape via shading and silhouetteunder all lighting conditions
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
13/57 2007 Valve Corporation. All Rights Reserved.
( ) ( ) ( ) ( )dyellowdblue kklnkkln +
+++
+
2
1
2
11
2
1
2
1
Gooch, 1998Gooch, 1998
Hue and luminance shifts indicate surfaceorientation relative to light
Blend between warm and cool based upon
unclamped Lambertian term, underlying albedoand some free parameters
Extreme lights and darks are reserved for edgelines and highlights
ConventionalShading
GoochShading
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
14/57 2007 Valve Corporation. All Rights Reserved.
Lake, 2000Lake, 2000
Lake used a 1D texture lookupbased upon the Lambertian term
to simulate the limited color
palette cartoonists use forpainting cels
Also allows for the inclusion of a
view-independent pseudospecular highlight by including a
small number of bright texels at
the lit end of the 1D texture map
NL
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
15/57 2007 Valve Corporation. All Rights Reserved.
Barla, 2006Barla, 2006
Barla has extended this technique by using a 2D texture lookup toincorporate view-dependent and level-of-detail effects.
Fresnel-like creates a hard virtual backlight which is essentially arim-lighting term, though this term is not designed to correspond to
any particular lighting environment.
NL NL
|NV|r |NV|r
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
16/57 2007 Valve Corporation. All Rights Reserved.
Early 20th Century Commercial IllustrationEarly 20th Century Commercial Illustration
Chose to adopt specific conventions of thecommercial 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 arechosen to echo silhouette shapes
Silhouettes are often emphasized with rim highlights ratherthan dark outlines
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
17/57
J.C. Leyendecker
Arrow collar advertisement, 1929
J.C. Leyendecker
Swimmin Hole, 1935
Rim Highlights
Red Terminator
2007 Valve Corporation. All Rights Reserved.
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
18/57
J.C. Leyendecker
Thanksgiving 1628-1928
J.C. Leyendecker
Tally-Ho, 1930
Clothing Folds
2007 Valve Corporation. All Rights Reserved.
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
19/57 2007 Valve Corporation. All Rights Reserved.
Engineer ConceptEngineer Concept
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
20/57 2007 Valve Corporation. All Rights Reserved.
Rim Highlighting: BeforeRim Highlighting: Before
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
21/57 2007 Valve Corporation. All Rights Reserved.
Rim Highlighting: AfterRim Highlighting: After
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
22/57 2007 Valve Corporation. All Rights Reserved.
Players must be able to quickly identify other players by team, classand selected weapon at a variety of distances and viewpoints
We think of this in terms of a visual read hierarchy Design Goals
Team Friend or Foe? Color
Class Run or Attack? Distinctive silhouettes
Body proportions
Weapons Shoes, hats and clothing folds
Selected weapon Whats he packin?
Highest contrast at chest level, where weapon is held Gradient from dark feet to light chest
Color Palette
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
23/57 2007 Valve Corporation. All Rights Reserved.
Character Lighting EquationCharacter Lighting Equation
( ) ( )( ) +
++
ii
L
i
d lnwcnak 1=
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimkirrspeckissiL
i
,1=
+
View independentView independent
ViewView--dependentdependent
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
24/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )
++
ii
L
i
d lnwcnak
1=
View Independent TermsView Independent Terms
Spatially-varying directionalambient
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
25/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )
++
ii
L
i
d lnwcnak
1=
View Independent TermsView Independent Terms
Spatially-varying directionalambient
Modified Lambertian terms
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
26/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )
++
ii
L
i
d lnwcnak
1=
View Independent TermsView Independent Terms
Spatially-varying directionalambient
Modified Lambertian terms Unclamped Lambertian term
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
27/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )
++
ii
L
i
d lnwcnak
1=
View Independent TermsView Independent Terms
Spatially-varying directionalambient
Modified Lambertian terms Unclamped Lambertian term Scale, bias and exponent
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
28/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )
++
ii
L
i
d lnwcnak
1=
View Independent TermsView Independent Terms
Spatially-varying directionalambient
Modified Lambertian terms Unclamped Lambertian term Scale, bias and exponent Warping function
Albedo ( )2
12
1+ ln
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
29/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )
++
ii
L
i
d lnwcnak
1=
View Independent TermsView Independent Terms
Spatially-varying directionalambient
Modified Lambertian terms Unclamped Lambertian term Scale, bias and exponent
Warping function
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
30/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )
++
ii
L
i
d lnwcnak
1=
View Independent TermsView Independent Terms
Spatially-varying directionalambient
Modified Lambertian terms Unclamped Lambertian term Scale, bias and exponent Warping function
Albedo
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
31/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )
++
ii
L
i
d lnwcnak
1=
View Independent TermsView Independent Terms
Spatially-varying directionalambient
Modified Lambertian terms Unclamped Lambertian term Scale, bias and exponent Warping function
Albedo
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
32/57
2007 Valve Corporation. All Rights Reserved.
Ambient CubeAmbient Cube
Grounds characters in game worlds Pre-compute irradiance samples
throughout the environment
Variable density irradiance volume[Greger98] where each sampledefines an irradiance environmentmap [Ramamoorthi01]
Directional ambient term whichincludes only indirect light
Lights beyond the first four can beadded to the ambient cube
Used in a novel way in rim lighting,which well discuss in a moment
Directional AmbientDirectional Ambient Constant AmbientConstant Ambient
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
33/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimkirrspeckissiL
i
,1=
+
ViewView--dependent Termsdependent Terms
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
34/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimkirrspeckissiL
i
,1=
+
ViewView--dependent Termsdependent Terms
Multiple Phong terms per light
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
35/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimkirrspeckissiL
i
,1=
+
ViewView--dependent Termsdependent Terms
Multiple Phong terms per light krim broad, constant exponent
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
36/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimkirrspeckissiL
i
,1=
+
ViewView--dependent Termsdependent Terms
Multiple Phong terms per light krim broad, constant exponent
kspec exponent (constant or texture)
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
37/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimkirrspeckissiL
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
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
38/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimkirrspeckissiL
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-(nv))4
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
39/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimkirrspeckissiL
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-(nv))4
kr
rim mask texture
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
40/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimkirrspeckissiL
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-(nv))4
kr rim mask texture ks specular mask texture
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
41/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimkirrspeckissiL
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-(nv))4
kr rim mask texture ks specular mask texture
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
42/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimkirrspeckissiL
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-(nv))4
kr rim mask texture ks specular mask texture
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
43/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimkirrspeckissiL
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-(nv))4
kr rim mask texture ks specular mask texture
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
44/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimkirrspeckissiL
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-(nv))
4
kr rim mask texture
ks specular mask texture Dedicated rim lighting
a(v) Directional ambient evaluated with v
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
45/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimkirrspeckissiL
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-(nv))4
kr
rim mask texture
ks specular mask texture
Dedicated rim lighting a(v) Directional ambient evaluated with v
kr same rim mask
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
46/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimkirrspeckissiL
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-(nv))
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
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
47/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimkirrspeckissiL
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-(nv))
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 nu term that makes rim highlights tend to
come from above (u is up vector)
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
48/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimkirrspeckissiL
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-(nv))
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 nu term that makes rim highlights tend to
come from above (u is up vector)
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
49/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimkirrspeckissiL
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-(nv))
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 nu term that makes rim highlights tend to
come from above (u is up vector)
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
50/57
2007 Valve Corporation. All Rights Reserved.
( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimkirrspeckissiL
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-(nv))
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 nu term that makes rim highlights tend to
come from above (u is up vector)
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
51/57
2007 Valve Corporation. All Rights Reserved.
[Heidrich98]
More flexible specular Anisotropic highlights [Heidrich98]
[Gooch98]
Future WorkFuture Work
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
52/57
2007 Valve Corporation. All Rights Reserved.
More flexible specular Anisotropic highlights [Heidrich98]
[Gooch98]
Future WorkFuture Work
[Gooch98]
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
53/57
2007 Valve Corporation. All Rights Reserved.
[Anjyo03]
More flexible specular Anisotropic highlights [Heidrich98]
[Gooch98]
Shaping highlights [Anjyo03]
Future WorkFuture Work
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
54/57
2007 Valve Corporation. All Rights Reserved.
More flexible specular Anisotropic highlights [Heidrich98]
[Gooch98]
Shaping highlights [Anjyo03]
More reliable rim term
Future WorkFuture Work
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
55/57
2007 Valve Corporation. All Rights Reserved.
[Luft06]
More flexible specular Anisotropic highlights [Heidrich98]
[Gooch98]
Shaping highlights [Anjyo03]
More reliable rim term
Image-space contrastenhancement [Luft06]
Future WorkFuture Work
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
56/57
2007 Valve Corporation. All Rights Reserved.
[DeCoro07]
More flexible specular Anisotropic highlights [Heidrich98]
[Gooch98]
Shaping highlights [Anjyo03]
More reliable rim term
Image-space contrastenhancement [Luft06]
Abstracted shadows [DeCoro07]
Future WorkFuture Work
8/9/2019 NPAR07 Illustrative Rendering in Team Fortress 2 Slides
57/57
Motivations and related work
Environments
Characters and interactiveshading
Future work
ConclusionConclusion
Top Related