2. Shooting in San Vanelona: the Visuals of EA's Skate

3. Pipeline Tools

4. Pipeline Melrose

5. World Construction

6. Proxy World

7. World Construction Streamer

8. World Construction Memory

9. Lighting

10. Lightmap UV Layout

11. Lighting Lightmaps

12. Lighting Baking

13. Environment Shaders

14. Uber Shader breakdown

15. Environment Shaders Ambient Specular

16. Environment Shaders Macro Overlay

17. Environment Shaders Tangent Light

18. Environment Shaders Specular

19. Environment Shaders Detail Normal

20. Environment Shaders Decals

21. Environment Shaders Debugging tools

22. Exposure & Tonemapping All shaders have an epilogue function Epilogue used for fog, exposure control, tonemapping and SW gamma correction half4 PS_Fog_Bloom_Tone(half4 FinalCol, half4 FogFactor, half exposure) { half4 tonecol= (FinalCol*FogFactor.a+FogFactor.rgba)*exposure; tonecol = tonemap(tonecol); return MoveFromLinearSpace(tonecol); }

23. Filmic Tonemapping half4 PS_Fog_Bloom_Tone(half4 FinalCol, half4 FogFactor, half exposure) { half4 tonecol = (FinalCol*FogFactor.a + FogFactor.rgba) * exposure; tonecol = tonemap(tonecol); return MoveFromLinearSpace(tonecol); } Note the exposure is a simple linear scale on the final fogged colour Exposure is modified per frame to hone in on a desired luminance Current frame luminance read by CPU from low res bloom buffer half4 tonemap (half4 x) { half4 ret; ret = saturate(half4(1,1,1,1) - x); ret *= ret; ret = max((x*0.25)+0.75,half4(1,1,1,1)) - ret; return ret*0.5; } The tonemap used for non-linear film response allows for greater exposure range

24. Filmic Tonemapping Segmented Framebuffer 0.0 to 0.5 is LDR 0.5 to 1.0 is HDR Apply Quadratic tonemap function for LDR Linear function for HDR LDR portion leads to a de-saturation towards the white point HDR portion gives rich coloured bloom

25. Exposure & Filmic Tonemapping Exposure = 0.1

26. Exposure & Filmic Tonemapping Exposure = 0.5

27. Exposure & Filmic Tonemapping Exposure = 1.0

28. Exposure & Filmic Tonemapping Exposure = 2.0

29. Exposure & Filmic Tonemapping Exposure = 3.0

30. PostFX Two Post FX Modes Fast 60Hz mode (~1.8ms) Visual FX Bloom & Lensflare Fisheye Vignette Colour Correction Board AO Slow 30HZ mode (~4.2 ms) As Above + Depth of Field Camera Motion Blur 2D Overlay Noise

31. PostFX - VisualFX Simple 4x3 Matrix multiply per pixel Can be combined on CPU to provide all of Saturate / Desaturate Contrast & Brightness Colourize Negative All for 3 Dot4’s

32. PostFX - Contrast contrast, 0.0f, 0.0f, midpoint - (contrast*midpoint) 0.0f, contrast, 0.0f, midpoint - (contrast*midpoint) 0.0f, 0.0f, contrast, midpoint - (contrast*midpoint) 0.0f, 0.0f, 0.0f, 1.0f

33. PostFX – Saturate / Desaturate float ds; float omds = 1.0f – ds; 0.3f + (0.7f*omds), 0.6f*ds, 0.1f*ds, 0.0f, 0.3f*ds, 0.6f+ (0.4f*omds), 0.1f*ds, 0.0f, 0.3f*ds, 0.6f*ds, 0.1f+ (0.9f*omds),0.0f,

34. PostFX – Negative Identical to contrast of -1

35. PostFX – Combined Desaturate, Colourize, Contrast

36. PostFX – Colour Correction RGB look up into a 32x32x32 volume texture Used in zonal regions for distinct looks CPU blends cubes together over time vOutColor.rgb= vOutColor.grb * float3(31.0/32.0, -31.0/32.0, 31.0/32.0) + float3( 0.5/32.0, 31.5/32.0, 0.5/32.0); vOutColor= tex3D(tint_texture,vOutColor.rgb).xyzw; Note the MAD used to get the colour in range

37. PostFX – Colour Correction Colour Correction Off

38. PostFX – Colour Correction Colour Correction On

39. PostFX - DOF and Camera Motion Blur Unified DOF and Motion Blur Firstly do a ¼ res downsample Alpha used to denote Bluriness First pass is in direction of Motion Blur Magnitude is DOF + Motion blur Second pass is perpendicular to 1 st Magnitude is DOF only Screen space velocity vectors computed using Technique borrowed from Burnout Paradise

40. PostFX - Motion Blur Velocity Vectors Optimal Robust Velocity Vectors Secret is to precompute Current and Previous view, projection and viewports on CPU This leads to terms which are depth independent and linear in clip space Therefore can be compute in VS Final depth dependant term only needs … One interpolant from the VS Two MAD instrcutions in the PS Technique handles camera rotation, translation and FOV changes and works for clipped triangles

41. PostFX - Motion Blur Velocity Vectors So in VS Out.BlurCoeffs.xyzw = BlurMatrixWWW.xyzw + ( BlurMatrixXXX.xyzw * In.UV.x ) + (BlurMatrixYYY.xyzw * (In.UV.y)) Then in PS float2 GetMotionVector(float depth, float2 UV, float3 BlurCoeefs) { float3 lCoeffs = (BlurMatrixZZZ.xyz * depth ) + BlurCoeefs.xyz; return ( UV.xy * lCoeffs.z ) + lCoeffs.xy; } Note that depth is non linear depth read straight from Z Buffer BlurCoeefs is passed from the VS See Matthew Jones’ paper for full details

42. PostFX – Board AO Added in the final days of Skate1 Done in the PostFX stage Render Backfaces of BBOX around board Depth testing off Using depth reproject into board space XZ used as UV coords into texture Y used for attenuation of texture Scalar result used to darken pixel

43. PostFX – Board AO Off On

44. Dynamic Soft Shadows Four Categories of shadows 1)Environment onto Environment Lightmapping 2)Environment onto Objects Shadow Mapping 3)Objects onto Objects Shadow Mapping 4)Objects onto Environment Depth Rejected Gobos

45. Depth Rejected Gobo Shadows Used for all dynamic objects casting shadows onto the environment Shadows pre blurred by 5x5 gaussian Allows for single tap soft shadows Only works because casters and receivers are disjoint, NOT a general solution!

46. Depth Rejected Gobo Shadows Firstly render standard shadow map Orthographic cascade with texel quantisation Also stencil buffer is marked to indicate written pixels Depth Stencil

47. Depth Rejected Gobo Shadows Treat the shadow map as an A8R8B8G8 texture ARG = Depth, B = Stencil Apply a blur pass Standard gaussian on the B Channel Dilation filter on the ARG channel

48. Depth Rejected Gobo Shadows When apply shadow read G16R16 texture with bilinear filtering on Green Shadow is shadow amount Red channel is depth used as normal

49. Vignette and Fisheye Fisheye as UV distortion Pinches the corners Stretches the centre float2 FishEye( float2 UV ) { float2 rescaled; float radial; rescaled = (UV - 0.5); // Can pass in from VS radial = dot(rescaled.xy,rescaled.xy); radial = radial * radial; radial = radial * g_Fisheye_Warp.x + g_Fisheye_Warp.y; rescaled = rescaled * radial +0.5; return rescaled; }

50. Vignette and Fisheye

51. Fisheye leads to pinching in the corners Vignetting used to cover this up Vignette done as radial 1D texture modulated on top

52. Bloom Ghost Simple Lens flare technique One of the many cool bloom effects detailed in Frame Buffer Postprocessing Effects in DOUBLE- S.T.E.A.L (wreckless) [Kawase 03] Implemented as an extra pass on the final Bloom buffer Allows for flare effect of all bright surfaces

53. Bloom Ghost Final Result (exaggerated)

54. Pretty Screenshots

61. Thanks

62. Q&A cpenty@ea.com jwhite@ea.com