The document discusses techniques for post-processing effects in games, including a depth-based transparency technique that uses depth and tag information to determine object visibility and apply opacity based on distance, as well as discussions of implementing conservative morphological anti-aliasing to improve edge detection and stability under movement. It also covers using tone mapping and edge detection results to combine color, adjusted luminance, and overlay textures to generate stylized cel-shaded or comic-book style effects.

1. Presentation
Sponsored By:

2. CMAAOutline Sketch

4. • Diablo3
• Heroes of the Storm
• + Many others

5. Render
Geo
Blur
Use Original
Image as Mask

6. • Visible through Walls/Bushes
-> Need occlusion
• Sword Tip / Armpit
-> Distance rather than Blur
• Floating Objects
-> Depth Based Opacity
-> Disable for small objects
• Looks Brighter in distance
-> Distance based fade
• Need Movement/Less “Gamey”
-> Magic Scroll Texture

7. Main Render:
• Fill Pass: After Transparency
Post Processing:
• Horizontal / Vertical passes
• Final Apply Pass

8. • Gameplay assigns one of
31 tags
• Flag: Disable Depth Fade
• Uses Shadow Geometry
• Alpha Tested & Depth
Tested

9. • Read 9 Samples
• Scan for first non-zero
sample
• Pack tag, flag &
xDist into 16-bit unorm

10. • Read 9 Vertical Samples
• Unpack sample
• Choose sample with
smallest distance2
• Pack nearest Sample
into16-unorm

11. • For Given Pixel Fetch:
• Original Tag
• Vertical Results (Flags, Tag, xDist (Dx), yDist (Dy))
• Current Depth (Cz)
• Magic Scroll (texture matrix * screen coord) (S)
• If No Tag or Tags match (i.e. inside) -> Reject.
• Unpack Data
• Use xDist/yDist to get original depth (Oz)
• Lookup Color and Opacity (Ta) for tag
• Calculate Final Opacity
• Apply to frame buffer with alpha blend.

12. sat 2𝑇𝑎 𝑆 sat 𝐶𝑧 − 𝑂𝑧 1 −
𝐷 𝑥
5
2
+
𝐷 𝑦
5
2
𝑃 𝑛+ 𝑃 𝑓−𝑃 𝑛 sat
1
𝐹 𝑓−𝐹 𝑛
𝑂 𝑧−
𝐹 𝑛
𝐹 𝑓−𝐹 𝑛
Tuneables:
Pn: Fade power when near
Pf: Fade power at distance
Fn: Close distance
Ff: Far distance
Gameplay
Fade Magic
Scroll
Texture
Depth
Based
Opacity
Distance Falloff
Camera Distance
Adjustment
0
0.2
0.4
0.6
0 0.2 0.4 0.6 0.8 1
Falloff Near
Falloff Far

14. • Interaction between objects:
– Need to take depth into account when choosing closest.
• Small Objects
• Special Geo to handle transparency
• Performance Optimization on Low-Sku’s/Older Hardware
• SSAA Interaction (Reduces pixel width)
• Colorblind Support (6.1)

16. • Wanted to extend AA Options
• Wanted to bring AA to more players
• Imaged based
• Low Memory Overhead
• Performant
• Minimal Code Impact

17. • Developed by Filip Strugar at Intel.
• Details, Paper and Example:
https://software.intel.com/en-us/articles/conservative-morphological-anti-aliasing-cmaa-update
• 3 Passes at ½ Render Size + Final full-size pass
• Input: Color Buffer.
• Output: Partially updated Color Buffer.

18. • Edge Buffers: 2 Render Size R8_UNORM UAV’s
(Ping/Pong)
• Working Color: 1 Render Size UAV in target format
(RGBA8)
• Mini Edge: ½ Render Size RGBA8_UINT render target
• ½ Render Size D16 depth buffer
• with read-write and read-only views

20. • Extended with additional texture formats:
• R8_UNORM
• RGBA8888_UINT.
• Added ImageBuffer(UAV) Support:
• Added ImageBuffer Object like FrameBuffer Object
-> Want to combine
• Added uint texture clear support (For edge buffers).
• CMAA requires read-only depth buffer view
• Added Read-Only flag to Texture Object and FrameBuffer Object
• Both views created and stored on Texture Object

21. • CMAA depth optimization requires different
depth values per pass:
• Set in vertex shader constant.
• CMAA Shaders were taken from example code
• Minor modification to Varying Structure.
• CMAA is not AFR Friendly!
• Currently brute-force solved with extra clears

23. Boardwalk
Venture Bay
Grizzly Hills
(Missing Edges &
Swimming)
Stairs
Lower City
Shattrath
(Swimming)
Stairs
The Unbound Thicket
Crystalsong Forest
(Missing Edges)

25. Improve Edge Detection
• Use of depth & normal
information
• Look at diagonal pixels
instead of neighbors
• Use angle information
as well as magnitude
Improve Stability Under Movement
• Decay edge strength
over n frames
• Edge detect normal buffers
• Use camera speed
to adjust edge thresholds
• Use velocity
to widen kernel/blur strength.
Patch 6.1 Adds 2x Super Sampling + CMAA Mode

27. Diablo 3 Open Cinematic

29. • 3 passes
• Input: Color + Linear Depth
• Resources:
• Luminance Buffer: R16_UNORM (Full Res)
• Edge Buffer: RG16F (Full Res)
• Tone Map: RGBA8_UNORM (1/4 height/width)

30. • Read 9 bilinear
color & depth samples
• Convert color to luminance
• Box filter applied to first 4 luminance
samples and store in luminance (L)

31. • Calculate 𝐺 𝑥, 𝐺 𝑦 for each group of 4 samples
• Calculate G, cos 𝜃 using averages.
• Apply Boost to Gradient: 𝐺′ = 𝑘𝐺 𝑝
• 𝐷𝑒𝑝𝑡ℎ𝐸𝑑𝑔𝑒 = sat 0.25 cos 𝜃 + 𝐺 𝑘
• Store (G(Luminance), DepthEdge(De)) in Edge buffer
𝐺 𝑥 =
+1 0
0 −1
𝐺 𝑦 =
0 +1
−1 0
𝐺 = 𝐺 𝑥
2
+ 𝐺 𝑦
2
tan 𝜃 =
𝐺 𝑦
𝐺 𝑥

32. Luminance Edges Depth Edges

33. • Blur Luminance Buffer (2x2 Box Filter)
• Apply Gamma Curve (Art Derived Value)
• Convert adjusted luminance to RGB
• 3rd degree polynomial per channel
• Artist defined 3 points of desired color
• Used Excel to fit polynomial curve.
• Store (color (T), adjusted luminance(L’))

34. Color Tone Map Adjusted Luminance

35. • Sample tonemap, edge results, overlay texture (O) &
original color buffer (C) (transitions)
• Look created from successive lerps:
• Stain Effect: Fill Color
• Outline ink: Heavier edges between objects
• Detail ink: Smaller edges made from lighter pen strokes picking up
internals of object
• Overlay Mask: To create border
• Transition: Time based linear fade in/out

36. 𝑆𝑡𝑎𝑖𝑛 𝐸𝑓𝑓𝑒𝑐𝑡 =
2𝑂𝑇 𝐿′ < 0.5
1 − 2 1 − 𝑂 1 − 𝑇 𝐿′ ≥ 0.5
𝐷𝑒𝑡𝑎𝑖𝑙 = lerp 𝑆𝑡𝑎𝑖𝑛 𝐸𝑓𝑓𝑒𝑐𝑡, 𝐷𝑒𝑡𝑎𝑖𝑙 𝐼𝑛𝑘 𝐶𝑜𝑙𝑜𝑟, 𝐺(𝐿𝑢𝑚𝑖𝑛𝑎𝑛𝑐𝑒)
𝑂𝑢𝑡𝑙𝑖𝑛𝑒 = lerp 𝐷𝑒𝑡𝑎𝑖𝑙, 𝑂𝑢𝑡𝑙𝑖𝑛𝑒 𝐼𝑛𝑘 𝐶𝑜𝑙𝑜𝑟, 𝐷𝑒 𝑘 𝑟𝑔𝑏
𝑂𝑣𝑒𝑟𝑙𝑎𝑦 = lerp 𝑂𝑢𝑡𝑙𝑖𝑛𝑒, 𝑂 𝑟𝑔𝑏, 𝑂𝑎
𝐹𝑖𝑛𝑎𝑙 = lerp 𝐶, 𝑂𝑣𝑒𝑟𝑙𝑎𝑦, 𝑡

43. http://carrers.blizzard.com/
http://www.intel.com/jobs