Presentation Sponsored By:

CMAA Outline Sketch

• Diablo3

• Heroes of the Storm

• + Many others

Render Geo

Blur Use Original

Image as Mask

• 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

Main Render:

• Fill Pass: After Transparency

Post Processing:

• Horizontal / Vertical passes

• Final Apply Pass

• Gameplay assigns one of 31 tags

• Flag: Disable Depth Fade

• Uses Shadow Geometry

• Alpha Tested & Depth Tested

• Read 9 Samples

• Scan for first non-zero sample

• Pack tag, flag & xDist into 16-bit unorm

• Read 9 Vertical Samples

• Unpack sample

• Choose sample with smallest distance2

• Pack nearest Sample into16-unorm

• 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.

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

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

• Wanted to extend AA Options

• Wanted to bring AA to more players

• Imaged based

• Low Memory Overhead

• Performant

• Minimal Code Impact

• 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.

• 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

• 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

• 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

Boardwalk Venture Bay Grizzly Hills

(Missing Edges & Swimming)

Stairs Lower City Shattrath

(Swimming)

Stairs The Unbound Thicket

Crystalsong Forest (Missing Edges)

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

Diablo 3 Open Cinematic

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

• Read 9 bilinear color & depth samples

• Convert color to luminance

• Box filter applied to first 4 luminance samples and store in luminance (L)

• 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 00 −1

𝐺𝑦 =0 +1−1 0

𝐺 = 𝐺𝑥2 + 𝐺𝑦

2 tan 𝜃 =𝐺𝑦

𝐺𝑥

Luminance Edges Depth Edges

• 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’))

Color Tone Map Adjusted Luminance

• 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

𝑆𝑡𝑎𝑖𝑛 𝐸𝑓𝑓𝑒𝑐𝑡 = 2𝑂𝑇 𝐿′ < 0.5

1 − 2 1 − 𝑂 1 − 𝑇 𝐿′ ≥ 0.5

𝐷𝑒𝑡𝑎𝑖𝑙 = lerp 𝑆𝑡𝑎𝑖𝑛 𝐸𝑓𝑓𝑒𝑐𝑡, 𝐷𝑒𝑡𝑎𝑖𝑙 𝐼𝑛𝑘 𝐶𝑜𝑙𝑜𝑟, 𝐺(𝐿𝑢𝑚𝑖𝑛𝑎𝑛𝑐𝑒)

𝑂𝑢𝑡𝑙𝑖𝑛𝑒 = lerp 𝐷𝑒𝑡𝑎𝑖𝑙, 𝑂𝑢𝑡𝑙𝑖𝑛𝑒 𝐼𝑛𝑘 𝐶𝑜𝑙𝑜𝑟, 𝐷𝑒 𝑘𝑟𝑔𝑏

𝑂𝑣𝑒𝑟𝑙𝑎𝑦 = lerp 𝑂𝑢𝑡𝑙𝑖𝑛𝑒, 𝑂𝑟𝑔𝑏, 𝑂𝑎

𝐹𝑖𝑛𝑎𝑙 = lerp 𝐶, 𝑂𝑣𝑒𝑟𝑙𝑎𝑦, 𝑡

http://carrers.blizzard.com/

http://www.intel.com/jobs