npar07 illustrative rendering in team fortress 2 slides

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


2/57


Motivations and related work

Environments

Characters and interactive shading Future work

OutlineOutline


3/57


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


4/57


Value contrast

Simple forms No unnecessarily off-kilter shapes

Minimize visual noise Texture and geometric

Minimize repetition

Environment Design PrinciplesEnvironment Design Principles


5/57


Contrasting Team PropertiesContrasting Team Properties

Red Warm colors

Natural materials

Angular geometry

Blue Cool colors

Industrial materials Orthogonal forms


6/57

Blue base in 2fort map



7/57

Red base in 2fort map



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



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




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



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



( ) ( ) ( ) ( )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



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



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



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


17/57

J.C. Leyendecker

Arrow collar advertisement, 1929

J.C. Leyendecker

Swimmin Hole, 1935

Rim Highlights

Red Terminator



18/57

J.C. Leyendecker

Thanksgiving 1628-1928

J.C. Leyendecker

Tally-Ho, 1930

Clothing Folds




Engineer ConceptEngineer Concept



Rim Highlighting: BeforeRim Highlighting: Before



Rim Highlighting: AfterRim Highlighting: After



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



Character Lighting EquationCharacter Lighting Equation

( ) ( )( ) +

++

ii

L

i

d lnwcnak 1=

( ) ( )( )[ ] ( ) ( )vakfunrvkfrvfmaxkc rrrimkirrspeckissiL

i

,1=

+

View independentView independent

ViewView--dependentdependent


24/57


( ) ( )( )

++

ii

L

i

d lnwcnak

1=

View Independent TermsView Independent Terms

Spatially-varying directionalambient


25/57


( ) ( )( )

++

ii

L

i

d lnwcnak

1=



Modified Lambertian terms


26/57


( ) ( )( )

++

ii

L

i

d lnwcnak

1=



Modified Lambertian terms Unclamped Lambertian term


27/57


( ) ( )( )

++

ii

L

i

d lnwcnak

1=



Modified Lambertian terms Unclamped Lambertian term Scale, bias and exponent


28/57


( ) ( )( )

++

ii

L

i

d lnwcnak

1=



Modified Lambertian terms Unclamped Lambertian term Scale, bias and exponent Warping function

Albedo ( )2

12

1+ ln


29/57


( ) ( )( )

++

ii

L

i

d lnwcnak

1=



Modified Lambertian terms Unclamped Lambertian term Scale, bias and exponent

Warping function


30/57


( ) ( )( )

++

ii

L

i

d lnwcnak

1=




Albedo


31/57


( ) ( )( )

++

ii

L

i

d lnwcnak

1=




Albedo


32/57


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


33/57



i

,1=

+

ViewView--dependent Termsdependent Terms


34/57



i

,1=

+


Multiple Phong terms per light


35/57



i

,1=

+


Multiple Phong terms per light krim broad, constant exponent


36/57



i

,1=

+



kspec exponent (constant or texture)


37/57



i

,1=

+




fs artist tuned Fresnel term


38/57



i

,1=

+





fr rim Fresnel term, (1-(nv))4


39/57



i

,1=

+


Multiple Phong terms per light krim broad, constant exponent kspec exponent (constant or texture)



kr

rim mask texture


40/57



i

,1=

+






kr rim mask texture ks specular mask texture


41/57



i

,1=

+








42/57



i

,1=

+








43/57



i

,1=

+








44/57



i

,1=

+


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


45/57



i

,1=

+


Multiple Phong terms per light krim broad, constant exponent kspec exponent (constant or texture)



kr

rim mask texture

ks specular mask texture

Dedicated rim lighting a(v) Directional ambient evaluated with v

kr same rim mask


46/57



i

,1=

+



4

kr rim mask texture


a(v) Directional ambient evaluated with v kr same rim mask fr same rim Fresnel


47/57



i

,1=

+



4

kr rim mask texture


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)


48/57



i

,1=

+



4

kr rim mask texture





49/57



i

,1=

+



4

kr rim mask texture





50/57



i

,1=

+



4

kr rim mask texture





51/57


[Heidrich98]

More flexible specular Anisotropic highlights [Heidrich98]

[Gooch98]

Future WorkFuture Work


52/57



[Gooch98]


[Gooch98]


53/57


[Anjyo03]


[Gooch98]

Shaping highlights [Anjyo03]



54/57



[Gooch98]


More reliable rim term



55/57


[Luft06]


[Gooch98]



Image-space contrastenhancement [Luft06]



56/57


[DeCoro07]


[Gooch98]



Image-space contrastenhancement [Luft06]

Abstracted shadows [DeCoro07]



57/57

Motivations and related work

Environments

Characters and interactiveshading

Future work

ConclusionConclusion

npar07 illustrative rendering in team fortress 2 slides

Documents