Slide 1

TEKKEN TAG TOURNAMENT 2 KGC 2012 GRAPHIC SESSION SHADER GRAPHICS TECHNIQUES Tsuyoshi Achira Technical Programmer Graphics Programmer Artist Tools Developer NAMCO BANDAI Studios Inc. Slide 2 1. Introduction 1-1. TEKKEN History 2-2. TEKKEN World 2. Shader Techniques 2-1. Hair Shaders 2-2. Skin Shaders 2-3. Costume Shaders 2-4. Shader Tricks 2-5. Wet/Painting Effects 3. Lighting Techniques 3-1. Image Based Lighting 3-2. Studio Lighting 4. Demonstration 5-1. FIGHT LAB 5-2. TAG 5. Questions? TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION Table of Contents This lecture will consist of the following: 1. Introduction. I will introduce TEKKEN briefly. 2. Shader techniques. 5 shader techniques will be covered, with specific focus on hair, skin, costume shaders, and in addition, paint/dirt effects and shader tricks. 3. Lighting techniques consist of 2 lighting techniques. One will be the image based lighting, and the other lighting will be the studio lighting. 4. Demonstration: Learn about the Tekken combatants offensive and defensive techniques, as well as the depth and concept of TAG. 5. Last I will be taking questions. Slide 3 TEKKEN TEKKEN 5 +Upgrade Ver. Arcade, PlayStation 2, PSP 1994 - 1995 1997 1999 2001 2004 2007 2011 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION TEKKEN HISTORY Arcade, PlayStation TEKKEN 2 TEKKEN 3 Arcade, PlayStation TEKKEN TAG TOURNAMENT Arcade, PlayStation 2 TEKKEN 4 Arcade, PlayStation 2 TEKKEN 6 +Upgrade Ver. Arcade, PlayStation 3, Xbox 360 TEKKEN TAG TOURNAMENT 2 Arcade, PlayStation 3, Xbox 360, Wii U (coming soon) The first TEKKEN was released in 1994 in arcades. From there, the TEKKEN series has been running for 17+ years and is continuing as strong as ever. All TEKKEN games are running at 60 fps and that has remained throughout as a staple TEKKEN feature. The latest in the series, TEKKEN TAG TOURNEMENT 2, was released this summer in arcades, and was recently released worldwide on consoles this September. Its available on PlayStation 3 and Xbox 360, but of course you can still play at your local arcade or game center too! Reference: http://eng.tekkenpedia.com/wiki/Tekken_(series) Slide 4 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION TEKKEN FIGHTERS TEKKEN WORLD The TAG feature allows fighters to partner up, allowing them to overcome their weakness and rely on one anothers strengths to victory. The key is the timing and how you utilize your TAG partner. The TEKKEN series consists of two categories: 1-on-1 battle and TAG battle. In addition, starting from TEKKEN TAG TOURNEMENT 2, two separate players can join forces and control one fighter each on the tag combo. This is known as PAIR PLAY. The number of available TEKKEN fighters is increasing with every new iteration. Since the original TEKKEN over 40 unique fighters have been added to the roster. In addition, from the comfort of your own home, TEKKEN can connect with players worldwide in Asia, Europe, and North America. Lets ONLINE BATTLE! Slide 5 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION TEKKEN WORLD Above: My favorite characterswith their customized costumes in an online battle. Exciting ! COSTUMES You can customize your favorite fighters costumes, and even edit their colors. The number of available TEKKEN fighters is increasing with every new iteration. Since the original TEKKEN over 40 unique fighters have been added to the roster. In addition, from the comfort of your own home, TEKKEN can connect with players worldwide in Asia, Europe, and North America. Lets ONLINE BATTLE! Slide 6 1. 2. 3. 4. 5. Hair Shaders Skin Shaders Costume Shaders Shader Tricks Wet/Painting Effects TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION SHADER TECHNIQUE I want to get started now with shader techniques but before I do, I just want to let you all know that the current TEKKEN shaders are developed using the DirectX 9 architecture (shader model 3), and not using the DirectX 11 architectures (shadermodel 5) yet! Slide 7 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION HAIR SHADER TEKKENs hair shaders use bth Alpha Blending and Alpha Testing techniques. Alpha Blending is a techniqe where each pixel making up the image can hold a different level of transparency. However the rendering speed is very low. Alpha Testing is where each pixel is tested against a certain alpha value to choose if it is written to the frame buffer or not. Just using this however can cause images to look jagged and sparse. HW ALPHA BLENDING / TESTING Slide 8 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION HAIR SHADERS The left image displays a hair structure consisting of complex polygonal planes. The right image displays the hair composition of hair layers. Each hair polygons flow is controlled from within the TEKKEN physics engine or Havok Simulation. The center image shows the rendered results of the hair using a pseudo transmission of light and a texture based anisotropic reflection (In this case, the cuticle ring). The transmission function is calculated like a Fresnel by using the vertex normal vector, and the transparency. The TEKKEN hair shaders are drawn and rendered in two passes. The first pass draws with Alpha testing and the second draws with Alpha Blending. The other ensures edges to be drawn smoothly and prevents drawing problems. Lets discuss why this is the case HAIR MATERIAL/COMPOSITION PSEUDO TRANSMISSION LIGHTING: Vertex Normal Vector + Simple Mask Texture Map CUTICLE RING: Texture based Anisotropic Reflection HAIR EDGE SMOOTHING: ALPHA BLENDING + ALPHA TESTING Slide 9 Figure 2: The hair shader: The above hairs are rendered by using the pseudo transmission of light without a shadow map. Hair tails looks more transmissive by using the texture map and the vertex normal vector. In addition, the anisotropic texture mapping is used as cuticle ring. TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION HAIR SHADERS ALPHA BLENDING OBJECT SORTING: ON (DEPTH OFF) RENDERING: SLOWER (than ALPHA TESTING) Rendering with Alpha Blending requires you to sort objects with a depth buffer to decide which is drawn. Figure 3 is the results without sorting. The z-fighting phenomenon can be observed here. As it turns out, complete structures such as layered hair polygons can not be rendered well using sort algorithms or solved manually drawn by an artist. Figure 3: Alpha blending. The result of rendering with the alpha-blending function. Slide 10 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION HAIR SHADERS ALPHA TESTING OBJECT SORTING: OFF (DEPTH ON) RENDERING: FASTER (than ALPHA BLENDING) Fig. 4 shows the result of rendering with the alpha-testing function. Of cause z-fighting is resolved however the edge of each hair looks like a jaggy. Most games are using the alpha-testing function because the function does not need to sort objects, and faster than the alpha-blending function. However TEKKEN artists dont accept those looks. Figure 4: Alpha testing. The result of rendering with the alpha-testing function. Figure 2: The hair shader: The above hairs are rendered by using the pseudo transmission of light without a shadow map. Hair tails looks more transmissive by using the texture map and the vertex normal vector. In addition, the anisotropic texture mapping is used as cuticle ring. Slide 11 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION HAIR SHADERS OUR RESULT PASS 1: ALPHA TESTING with DEPTH BUFFER PASS 2: ALPHA BLENDING without SORTING Fig. 5 is the rendering result of our idea. The z-fighting problem and the jagged edge problem are both resolved. It needs two passes, At pass 1, it renders with the alpha-testing function, and on pass 2, it needs to render with the alpha-blending function without sorting the hair objects. Figure 5: Alpha double. The result of rendering with the combination of the alpha-testing and alpha- blending functions. Figure 2: The hair shader: The above hairs are rendered by using the pseudo transmission of light without a shadow map. Hair tails looks more transmissive by using the texture map and the vertex normal vector. In addition, the anisotropic texture mapping is used as cuticle ring. Slide 12 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION HAIR SHADERS PASS 1: ALPHA TESTING Figure 6. The first pass: The white circle represents the border of a hair polygon. The pink color represents scraped pixels using alpha testing. Each pink pixel is drawn on the frame buffer. The dark areas are not drawn. So far, this is a very common technique. BLENDING TRICK ALPHA TESTING with DEPTH BUFFER ALPHA BLENDING without SORTING Fig. 5 is the rendering result of our idea. The z-fighting problem and the jagged edge problem are both resolved. It needs two passes, At pass 1, it renders with the alpha-testing function, and on pass 2, it needs to render with the alpha-blending function without sorting the hair objects. PASS 2: ALPHA BLENDING Figure 7. The second pass. By using the reverse value of the alpha-testing threshold, hallow pixels in the circle are drawn on the frame buffer. Even though there are still pixels in the pink region which remain untested by using the depth buffer, the pixels are hard to spot since we are using a very transparent and thin line. This is our method. Lets see this in movie form! Figure 2: The hair shader: The above hairs are rendered by using the pseudo transmission of light without a shadow map. Hair tails looks more transmissive by using the texture map and the vertex normal vector. In addition, the anisotropic texture mapping is used as cuticle ring. Slide 13 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION HAIR SHADERS HAIR VARIATIONS Hair style variations. In TEKKEN TAG TOURNEMENT 2, you can customize hair styles with color, attaching accessories and so on, just like a stylist. The hair sections are broken up into three types: front, side and back. Figure 8: Hair style variations. In TEKKEN TAG TOURNEMENT 2, you can customize hair styles with color, attaching accessories and so on, just like a stylist. The hair sections are broken up into three types: front, side and back. Slide 14 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION SKIN SHADERS Two skin shaders are used in TEKKEN. One is for men and the other is for women. Generally speaking, the male shaders are using a stronger reflection and subsurface scattering technique than their women counterpart. With women skin shading, a more general flatten approach is taken. FOR MEN, FOR WOMEN Slide 15 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION SKIN SHADERS REFLECTION FACTOR 1: ENVIRONMENT CUBE MAP FACTOR 2: SPECULAR SAMPLER CUBE MAP Figure 1: Reflection: The two figures show the front and backside of a males skin. The key of the mens shader is reflection we believe. The TEKKEN skin shader features two reflection types: environment cube map which is reflected on the body, and specular sampler cube map. Both cube maps are blended with each other before being drawn on both surfaces. This look achieves a strong yet sweat drenched look. Slide 16 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION SKIN SHADERS REFLECTION FACTOR 1: ENVIRONMENT CUBE MAP FACTOR 2: SPECULAR SAMPLER CUBE MAP Figure 2. Composition. Each figure above shows a separate constituent element of skin materials. UpperThree: Thethree figures of the lower column show the reflection blending process. From the left fig 2a. The specular sampler cube map (Fig 2a), the environment cube map (Fig 2b), and the result of blending the two types of reflection (Fig. 2a and 2b). Lower three: The decal texture (Fig. 2d), the sub-surface scattering (Fig. 2e), and the final composited image of all elements (Fig. 2f). Figure 2c. Reflection Figure 2f. Final Figure 2b. Environment Map Figure 2e. SSS (Sub-Surface Scattering) Figure 2a. Specular Sampler Figure 2d. Decal Texture + + = = + Slide 17 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION SKIN SHADERS Figure 3: Gamma lighting: The three figures are shown with different scattering factors which is done by adjusting the dot production with LnN (the light vector and normal vector) by the power coefficient. Left: It looks sharp, shaded by pow( LnN, 4 ). Center: It looks natural, shaded by pow( LnN, 2 ). Right: It looks soft, shaded by pow( LnN, 1 ). The light transmission and scattering materials used on womens skin require a softer shader than the harder materials used on mens. However, too soft of a shade can cause the character to lose their three dimensional appearance. WOMENS SHADING TECHNIQUE FACTOR 1: GAMMA LIGHTING (HARD/SOFT DIFFUSION) Dot( Light, Normal ) Pow(LnN, 4)Pow(LnN, 1) Pow(LnN, 2) Slide 18 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION SKIN SHADERS SCATTERING FACTOR 2: SUB-SURFACE Figure 4e. Final. Figure 4: The Sub-surface Scattering: Decal textures have just a flat color (Fig. 4a). Rim lighting controls the behavior of scattering (Fig. 4b). Occlusion textures are used for the lighting masks. In the case of womens occlusion, it looks especially flat (Fig. 4c). SSS mask textures are important, but subtly, scattered white which can be observed at the tip of the nose and ears. However, because of the number of huge cost of using this technique with more all of TEKKENs characters, only the characters faces are taking advantage of this.(Fig. 4c). The final image of compositing each texture (Fig. 4e). There are two reasons womens shading is not exactly real life authentic. One is that we believe players want to play a character who looks a little more fantasy and a little less photograph real life-like. Also two, because in order to run TEKKEN at a constant 60fps, light weight shaders must be in place. Figure 4a. Decal Texture. Figure 4c. Occlusion Texture. Figure 4b. Rim lighting. Figure 4d. SSS Mask Texture. Slide 19 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION SKIN SHADERS EYE LENS ONE SHADER: LAYERED The eye shader is derived from skin shaders sub-surface scattering. The shader consists of two layers: inner material and outer coating. The following figure represents the eye layer. Figure 5: The eye structure: The above figure represents the layered structure of the eye shader. The shape of the white inner circle represents that the eye object features the sub- surface scattering function, and the shape of the light blue outer circle represents the glass of the eye object with a transparency function (reflection). INNER NORMAL MAP: DIFFUSE OUTER NORMAL MAP: TRANSPARENCY Figure 6: The eye reflection: The two figures represent the appearance of lighting and reflection on the eyes surface. The eye shader has two normal maps, one for the inner surface and another one for the outer surface. The material of the inner surface implements the diffuse lighting, the reflection function, and the sub-surface scattering function. The material of the outer surface implements just the transparency function (reflection). Both materials are blended in a single pixel shader (hardware blending is not used). You can note the differences when you compare each eye of both different lighting situations above. Slide 20 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION SKIN SHADERS INNER : REFLECTION (Cube Map + Specular Sampler #1) OUTER : TRANSPARENCY REFLECTION (Specular Sampler #2) Figure 6: The eye reflection: The two figures represent the appearance of lighting and reflection on the eyes surface. The eye shader has two normal maps, one for the inner surface and another one for the outer surface. The material of the inner surface implements the diffuse lighting, the reflection function, and the sub-surface scattering function. The material of the outer surface implements just the transparency function (reflection). Both materials are blended in a single pixel shader (hardware blending is not used). You can note the differences when you compare each eye of both different lighting situations above. EYE LENS ONE SHADER: LAYERED The following figure shows the rendered results of the layered two reflections. One is the reflection of the inner surface by using the environment Cube Map and the specular sampler texture 2D map, and the other one is the transparency reflection of the outer surface by using the specular sampler texture 2D map. (Note that both specular samplers are different texture maps.) Figure 5: The eye structure: The above figure represents the layered structure of the eye shader. The shape of the white inner circle represents that the eye object features the sub- surface scattering function, and the shape of the light blue outer circle represents the glass of the eye object with a transparency function (reflection). Slide 21 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION WRINKLE SYSTEM The wrinkle system features a normal map blending function for creating facial expressions. NORMAL MAPS BLENDING Slide 22 Figure 1: Wrinkle appearance. The above three figures shows wrinkle behavior with normal map blending. Left: His face looks like a usual expression. Center: It looks like a smile expression. Right: It looks like a surprised/angry expression. Now compare the three expressions and see if you can notice how each wrinkle, indicated by arrows, is changing from shallow to deep. The wrinkle system is constructed simply. First, the CPU sends the blending weight data to the GPU through the vertex color when the control point is driven by facial animation data. Then the GPU blends two normal maps by referencing the vertex color as the blending weight data, so each wrinkle is displayed appropriately. TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION WRINKLE SYSTEM WRINKLE NORMAL MAP BLENDING : NORMAL MAP x2 (Shallow Wrinkle and Deep Wrinkle) TEKKEN TAG TOURNAMENT 2 also implemented the use of a wrinkle system for the first time by using two normal maps. One for the natural face with shallow wrinkles, and another for emotional expressions using deep wrinkles. Wrinkles becomes deep when an animator moves some of key control points. DEEP SHALLOW DEEP SHALLOW DEEP SHALLOW SHALLOW Slide 23 Figure 2: Left: The shallow normal map for the natural face. Right: The deep normal map. Look at both normal maps and you can distinguish the wrinkles between the eyebrows. TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION WRINKLE SYSTEM WRINKLE NORMAL MAP BLENDING : NORMAL MAP x2 (Shallow Wrinkle and Deep Wrinkle) TEKKEN TAG TOURNAMENT 2 also implemented the use of a wrinkle system for the first time by using two normal maps. One for the natural face with shallow wrinkles, and another for emotional expressions using deep wrinkles. Wrinkles becomes deep when an animator moves some of key control points. SHALLOW NORMAL MAPDEEP NORMAL MAP Facial Animation Data Wrinkle Driven Data Blending 2 Normal Maps Normal Vector For Lighting WRINKLE DATA FLOW Slide 24 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION COSTUME SHADERS The fighters costumes of the TEKKEN series have always been increasing with each new iteration. One fighter has an average of 10 to 20 costumes, and the number of possible combinations could be endless PALETTE SYSTEM Slide 25 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION COSTUME SHADERS COSTUME CUSTOMIZING Each fighter has their very own costumes, unique to that character and the sheer amount of costumes within TEKKEN can be almost overwhelming due to the number of characters in TEKKEN. The TEKKEN designers and artists are always working hard with work included modeling, animating, effects, and so on. One costume has two palette colors. TEKKEN users can edit costume with your favorite color. The above down jacket is edited with yellow and blue colors. You can change the down jacket with your favorite color. The palette color editor in the above shot represents the parameter editor for shaders. The editor can control a variety of shader parameters such as specular color, intensity, reflection and refraction. Artists use these parameters when modeling costumes. COLORING Slide 26 (See Fig.2) The mask texture for two color palettes is used to decide which color palette is available. Pixels with black color pixels refer palette to number one. White color pixels refer to palette number two. The above shot shows the color edit mode in the customize room. Game players can edit his fighters costumes with color. Because the editor is so deep, Ive caught myself customizing my characters for over two hours on some instances! TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION COSTUME SHADERS COSTUME CUSTOMIZING Each fighter has their very own costumes, unique to that character and the sheer amount of costumes within TEKKEN can be almost overwhelming due to the number of characters in TEKKEN. The TEKKEN designers and artists are always working hard with work included modeling, animating, effects, and so on. COLORING PALETTE SYSTEM The TEKKEN color palette system features two color palettes by referring the right two texture masks. (See Fig.1) The mask texture for the palette mode is used for the decal texture to switch the palette mode and the color mode. Pixels with white color can change color by palettes and pixels with black color are kept as their original picture. Figure 1: The mask texture for the palette mode. Figure 2: The mask texture for switching two palettes. Slide 27 The above edit window represents the adjust parameters of the decal position. Editable are the decals translate, rotate and scale parameter, as well as the placement spot. TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION COSTUME SHADERS COSTUME DECAL SYSTEM In the customize room, You can paste all sorts of decals on the costume. The Figure 3: Projection mapping. Both shots show a decal position being adjusted by projection mapping. The decals are assembled by five separate layers of random images of the users liking, including color, size, rotating, etc (very similar to the actual placement shown above). The aim is to make a design/image that is pleasing for the user. When this is done the assembled decal is merged and baked as one texture in the printing system by the CPU. Four of these sorts of user made decals can be equipped by the user on each character. Again the possibilities here are nearing endless Slide 28 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION SHADER TRICKS Next, Ill introduce two simple shader tricks. One is processed by the vertex shader and another is processed by the pixel shader. VERTEX SHADER / PIXEL SHADER Slide 29 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION SHADER TRICKS DEFORM VERTEX SHADER The simple geometry deformation can easily process in the vertex shader. This technique was developed during TEKKEN 6 era. (DirectX 9 shader model 3 without geometry shaders) The women above in purple is an android. Her head is detachable and can detonate like a bomb. The older fighter holder holds her head in his head and in an instant, the head exploded and he will receive massive damage. DeformCenter.xyz Figure 1. Deformation. The slides shows that her head is recovering after blowing up. The mechanism of geometry deformation is very simply. float3 DeformVector = ( WorldPos.xyz DeformCenter.xyz ) * DeformTime; WorldPos.xyz += DeformVector.xyz; The vector WorldPosition is multiplied by the world matrix of the head. I introduced this technique because it looks humorous and is simple. Slide 30 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION SHADER TRICKS UV ANIM PIXEL SHADER This simple texture animation can also easily run in the pixel shader. Her swimwear gleams with yellow light. (it runs on DirectX 9 shader model 3) Figure 2. Texture animation. The slides show that her swimwear gleams by the texture animation. UV anim (as we say for short,) is the term used for texture animation. Two decal textures are used. One is for the decal texture, and the other is for UV anim. The texture coordinate for UV anim is determined by uv values. UV anim can be controlled with the scroll direction and its speed. float2 TexCoord = TexCoord2.xy + UVAnimOffset.xy + UVAnimDirection.xy * UVAnimSpeed.xy; Note that the above code runs in the vertex shader. Blending both textures occurs in the pixel shader where both textures are composited. Slide 31 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION WET/DIRT EFFECTS PAINTING FEATURE NEW FEATURE Next, I give the wet / dirt effect and the painting feature which two features are implemented for the first time in the TEKKEN series. Both features are my idea and asked the director of planning to adopt two ideas, it would be able to play with exciting game like a mud play and pieing I guess. Then finally the director had permitted the adoption. Slide 32 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION WET EFFECT WET SPECULAR LIGHT As a battle rages on, its exciting to see the fighters clothing be affected by the surrounding environment around them. In this case the water causes them to be drenched. Applying Water Applying Water SPECULAR LIGHT 1.WATER FILM >HARD REFLECTION +n% 2.FIBER MATERIAL >DIFFUSION n% 100% = WATER SPC.+FIBER SPC. (assumption: without scattering) Figure 1. The above two shots shows the condition of wet clothing (pantyhose). The down arrow shows the stocking becoming more wet gradually by the water. The difference on the leg where it is wet and still dry can be seen clearly. The specular light is computed in the pixel shader reflected by two different material surfaces. One is the water film surface, and the other is the fiber material surface. The water film is made by using a smooth texture coated by the water so the specular light would become more solid of a reflection. The other one is specular light reflected by the pantyhose surface. The total of the specular light intensity will always be equal to the water spc plus the fiber spc. Slide 33 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION DIRT EFFECT DIRT VERTEX COLOR Figure 2. These shots show the condition of getting dirty gradually during a fight. As contrasted with the wet effect which is processed in the pixel shader, the dirt effect is processed in the vertex shader because pixel shaders are slower than vertex shaders. The TEKKEN series always aims to run at 60 fps so we had to decide to move the dirt processing from the pixel shader to the vertex shader to improve GPU performance. Look at their jeans, skin and hair. Not bad, right!? The dirt placement is calculated by the CPU or SPU and this data is sent to the GPU in the vertex shader as vertex colors. Of course fighting on dirt and dust should allow for plays to get real dirty and gritty. This sort of visual is exciting and TEKKEN TAG TOURNEMENT 2 features four types of dirty effects. DIRT EFFECT 1.CPU CREATES DATA WHERE DIRT FALLS 2.GPU BLENDING WITH VERTEX COLOR Slide 34 You can equip a great number of items like swords, shields and hats. Besides these however you can also equip meaningless but fun and silly items for fighting such as an ice cream cone, sushi, and pizza. However this time the ice cream is not for eatingIt is a weapon !!! Figure 3. The upper shot shows her getting a shot in at the opponent. The lower shot shows that the opponent has been damaged by her ice cream. Look at his arm, painted with the ice cream color of her delicious snack. The paint effect used here is also the same process as wet/dirt effects, run through the vertex shader. TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION PAINTING EFFECT PAINTING ICE CREAM (TRIPPLE SCOOP) MORE THAN FIGHT Slide 35 You earn prize money prize (not real bill) if you win against your opponent in a match. Then with enough money, you can buy and equip these items in the TEKKEN customize room. Figure 4. The above two shots show the scene of a vicious fight using soft serve ice cream. TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION PAINTING EFFECT PAINTING GO WIN. BEFORE IT MELTS! How and where to buy these wonderful items? SOFT SERVE ICE CREAM (CHOCO&VANILLA) Slide 36 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION 1. IMAGE BASED LIGHTING 2. STUDIO LIGHTING LIGHTING TECHNIQUE Next, lighting technique is from here. STUDIO LIGHTING which lighting technique I gave a lecture at KGC 2011 in Taegu last year. This year, I will give the lecture of the Image Based Lighting technique in more detail. Slide 37 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION IMAGE BASED Next is, IBL LIGHTING by extracting Spherical Harmonics. The term, Spherical Harmonics (aka SH) is a 4x4 matrix which is compressed of light data. In TEKKEN, four IBL Directional Lights and four IBL Point Lights are compressed into one SH matrix. SH Matrices are well suited to pack a number of lights into. Ambient like soft lighting is better adapted to the SH matrix while sharper lights should be avoided with this technique. POINT LIGHT DIRECTIONAL LIGHT Slide 38 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION IMAGE BASED AMBIENT LIGHTING AMBIENT SH MATRIX COMPRESS / EXTRACT TEKKEN uses the SH (Spherical Harmonics) function for the image based lighting as ambient light to fall on ground. The above shot shows IBL in the form of an ambient light. Look at the old mans clothing which looks to be reflecting the grounds orange color. (For this picture, the IBL intensity has been increased a little to see clearly the effects) SH 4x4 MATRIX Cube Map EXTRACT VERTEX SHADER IBL AMBIENT IBL Field Figure 1: Like the above ground, some of IBL fields are embedded. Each IBL field is captured as an environment map (Cube Map) and then each Cube Map is compressed as a SH matrix. In the CPU, several of SH matrices, located near by the fighter, are blended and sent to the GPU via the vertex shader. The number of IBL fields are different with each stage. COMPRESS (OFFLINE) IBL Field Slide 39 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION IMAGE BASED POINT LIGHTING POINT LIGHT SH MATRIX generated by CPU Another method for SH matrix utilization is point light. The image based point lights are generated in the CPU. Figure 2: Three image based point lights are setup on the upper right stage. The colored wireframes represent the region of the point light. The speed of the image based point light extraction in the vertex shader is constant because these lights are packed into one matrix. In this instance, these point lights are used as a lamp, camp fire and neon light. Also the lights animate with a blinking effect. However a down side to this is with a 4x4 matrix, the shading precision is reduced. In the CPU, a maximum of four image based point lights can be generated per frame. In theory however, the CPU could generate the lights without limitation if the CPU would have such a leeway. SH 4x4 MATRIX COMPRESS (ONLINE) EXTRACT VERTEX SHADER GREEN BLUE RED CPU POINT LIGHTS Slide 40 CPU DIR LIGHTS (ONLINE) TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION IMAGE BASED DIRECTIONAL LIGHTING SH 4x4 MATRIX EXTRACT VERTEX SHADER RED DIRECTIONAL LIGHT SH MATRIX generated by CPU In the same way, the CPU also generates the image based directional COMPRESS light too. BLUE GREEN In the CPU, a maximum of four image based point lights can be generated per frame. In theory however, the CPU could generate the lights without limitation if the CPU would have Figure 3: The image based directional lights with red and blue colors have been casted behind the panda and the green directional light have been casted on the front such a leeway. matrixs capacity limits. Slide 41 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION IMAGE BASED DIRECTIONAL LIGHTING DIRECTIONAL LIGHT DIRECTIONAL LIGHTS PIXEL SHADER In the below three shots, fighters are cast with red, green and blue lights, and all with different directions. IMAGE BASED DIRECTIONAL LIGHTS VERTEX SHADER The below three shots are also the same setting as the above lighting, however both appearances are different because the image based lighting reduces precision. Figure 4: Comparing both rightmost shots, the lower picture looks like a warm atmosphere when compared against the upper picture. The image based directional and point lights are useful for indirectly lighting the area, much light like a torch, wavering and blinking, the cloudy sky or a forest tree cover, etc Slide 42 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION STUDIO LIGHTING The term of STUDIO LIGHTING taking a picture using a reflector, diffuser and sub-lights for creating a dramatic and impressive shot. SUB LIGHTING SYSTEM Slide 43 REFLECTED SUN LIGHT TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION STUDIO LIGHTING ALWAYS BEST SHOT MAIN LIGHT x3 Always Best Shot. This term is the concept of STUDIO LIGHTING. MAIN LIGHT #1 = Shadow Direction MAIN LIGHT #2 MAIN LIGHT #3 SUB LIGHT x4 Figure 1: REFLECTED SUN LIGHT: used under the strong sun light. Figure 3: DARKFORCE: used powerfully as a backlight. Figure 2: RIM LIGHTS: used in backlight scenes / stages. Figure 4: HIGHLIGHTS: used at midnight to illuminates fighters. Five sub lights are used for STUDIO LIGHTING. The following lights are the STUDIO LIGHT functions. HIGHLIGHT RIM LIGHT DARKFORCE NEW FRONT SPECULAR Up to four lights of the above five STUDIO LIGHTs can be used in one stage. REFLECTED SUN LIGHT was developed in TEKKEN TAG TOURNAMENT 2. Each feature is shown in the right four shots. (In this showing, FRONT SPECULAR is skipped.) Slide 44 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION STUDIO LIGHTING FRONT/BACK SIDE NEEDS EASY THAN REAL About front and back side. It needs playable easily than realistic graphics. One of TEKKENs rules is dont disturb the fight by any interruption. For example, at times, realistic graphics could possibly disturb the fight. Figure 6: The result of using the reflector of STUDIO LIGHT is that both fighters can be seen clearly. Figure 5: The above two shots show the front and back side of bodies against sun light. Both fighters are shaded similarly in shadow and light. (In the fact, both fighters are within their own self shadow.) Slide 45 Figure 8: This stage uses a set of STUDIO LIGHTs. 1. Reflected Sun Light, 2. DARKFORCE, 3. RIM LIGHT, 4.FRONT SPECULAR. The combination of 4 lights would be well-suited to the resort spot in summer. Figure 7: This stage uses a set of STUDIO LIGHTs. 1. HIGHLIGHT, 2. DARKFORCE, 3. RIM LIGHT, 4.FRONT SPECULAR. The combination of 4 lights would be well-suited to neon-glittering stage in the mid-night. STUDIO LIGHT (ps) TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION STUDIO LIGHTING TEKKEN LIGHTING SYSTEM MAIN LIGHT (ps) DIRECTINAL LIGHTS x3 HIGHLIGHT RIM LIGHT DARKFORCE REFLECTED SUN LIGHT FRONT SPECULAR (4 lights of 5 are available) IBL SH matrix #1 (vs) AMBIENT LIGHT x1 IBL SH matrix #2 (vs) DIRECTIONAL LIGHTS x4 POINT LIGHTS x4 EFFECT LIGHT (ps) POINT LIGHTS x2 Total 18 Lights Available Slide 46 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION FIGHT LAB FIGHT LAB where fighting lessons are given, you can learn a variety of basic techniques for fighting. In addition, you can also develop your skills with playing the FIGHT LAB game. PRACTICE ROOM for Beginner Slide 47 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION TAG In the game TEKKEN TAG TOURNAMENT 2, you can control two players with making up a team. In fighting, you can get out of a pinch by your partner if you get in a clutch situation. You can also crossfire with your partner against your opponent. ADVANCED FIGHTING Slide 48 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION GAME BATTLE BY PROFESSIONAL PLAYERS The players, who are the TEKKEN staff. Slide 49 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION TEKKEN DEVELOPERS TEKKEN TAG TOURNAMENT 2 PROJECT STAFF INTRODUCTION HARADA KATSUHIRO TEKKEN PRODUCER VISUAL SECTION ART DIRECTOR VISUAL SECTION GENERAL MANAGER PROGRAM SECTION LEADER Slide 50 TEKKEN TAG TOURNAMENT 2 SHADER GRAPHICS TECHNIQUE SESSION QUESTIONS THANK YOU ALL Windows, DirectX and "Xbox" are either registered trademarks or trademarks of Microsoft Corporation. All rights reserved. "PlayStation" are trademarks or registered trademarks of Sony Computer Entertainment Inc. Wii U" is trademark or registered trademark of Nintendo Inc. TEKKEN, TEKKEN TAG TOURNAMENT 2, are either registered trademarks or trademarks of NAMCO BANDAI Games Inc. All rights reserved. All material Copyright 2012 NAMCO BANDAI Games Inc. All rights reserved.