Edge detection-based post-processing in Warlords of Draenor
4 likes1,707 views
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.
Edge detection-based post-processing in Warlords of Draenor
- 4. Diablo3 Heroes of the Storm + Many others
- 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-Skus/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 UAVs (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 , ｐ,