Title 44pt Title Case Advanced Rendering Techniques Used ......Intended to share the experience of...
Transcript of Title 44pt Title Case Advanced Rendering Techniques Used ......Intended to share the experience of...
Title 44pt Title Case
Affiliations 24pt sentence case
20pt sentence case
Advanced Rendering Techniques Used in the Ice Cave
Sylwester Bala
GDC 2016
Staff Software Engineer, ARM
© ARM2016 2
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Agenda
About Ice Cave project (video)
Composition overview of a single frame
Optimized techniques
Q&A
Ice Cave
© ARM2016 4
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
What’s in the Ice Cave?
Triple Level Reflections Plane Reflections
Local Environment Reflections
Global Reflections
Dual Level Refractions Local Environment Refraction
Global Environment
Dual Level Shadows Local Cubemap Shadows
ShadowMap For Dynamic Objects
Procedural Skybox
Uniform Mist
Particles Mist
Fireflies With Trails
Dirty Lens Effect
Glowing Zodiacs
Bloom/Glare
Frost
Crystals
Enlighten
Light Shafts
Ice Parallax Effect
Dripping Water
Fresnel + Light Diffraction
Snow Leopard Ghost + Glow
Glints
Subsurface Scattering
GUI
How is This Frame put Together?
© ARM2016 6
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Generate Shadowmap Pass
© ARM2016 7
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Planar Reflections Pass (Dynamic Objects Only)
© ARM2016 8
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Clear Framebuffer
Color Depth
© ARM2016 9
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Plinths
Color Depth
© ARM2016 10
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Platform
Color Depth
© ARM2016 11
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Phoenix
Color Depth
© ARM2016 12
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Zodiac Animals
Color Depth
© ARM2016 13
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Phoenix Base
Color Depth
© ARM2016 14
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Cave – Depth Only
Color Depth
© ARM2016 15
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Cave
Color Depth
© ARM2016 16
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Crystals
Color Depth
© ARM2016 17
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Water Drops
Color Depth
© ARM2016 18
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Procedural Skybox (Last Opaque Object)
Color Depth
© ARM2016 19
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Fireflies
Color Depth
© ARM2016 20
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Bloom
Color Depth
© ARM2016 21
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Glints
Color Depth
© ARM2016 22
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Particles Mist
Color Depth
© ARM2016 23
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Dirty Lens Effect
Color Depth
Optimized Techniques
Skybox, Cave, Phoenix & Crystals,
Platform, Bloom, Light shafts, Particles
mist, Dirty lens effect, Glints.
© ARM2016 26
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Procedural Skybox
© ARM2016 27
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Skybox DIY
Blend two cubemaps at a time
according to the sun position
LERP
© ARM2016 28
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Skybox DIY
© ARM2016 29
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Skybox DIY Given the sun position in world space, we check if the fragment is “inside” the sun area by checking the dot
product of the view vector against the sun direction.
© ARM2016 30
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Cave
© ARM2016 31
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Cave – Depth Pass
© ARM2016 32
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Cave – Only Render What’s Visible!
World space normal map.
2-3 cycles faster
(6% perf. uplift for the Cave)
Diffuse texture map
Environment map for reflections
Local cubemap shadows
Procedural skybox
Global illumination
Icy parallax effect
Procedural mist
Shadowmap for dynamic objects
Animated projective textures
We’ve managed to combine all these effects in one
shader and still maintain high performance.
Phoenix
© ARM2016 34
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Phoenix & Crystals in One Shader & One Pass
Reflection & refraction pre-baked environment
Mipmaps are also pre-generated!
Procedural skybox
Normalmap used for lighting, specular, reflections and
refractions
Diffuse color
Roughness map - this is what makes the Phoenix look icy!
Determines mipmap level of the pre-baked environment
Global illumination
Platform
© ARM2016 36
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Platform
Tangent space normal map
Diffuse texture map
Environment map for reflections
Local cubemap shadows
Procedural skybox
Global illumination
Procedural mist
Shadowmap for dynamic objects
Planar reflections
Light Shafts
© ARM2016 38
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Light Shafts
Upper cross section is fixed
Adjustable cone angle
Light shaft orientation follows the light
Maximum angle to follow the light
© ARM2016 39
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Light Shafts
Behaviour
Fading at cone borders to avoid sharp edges.
Fades when the camera gets closer (Min & Max
distance).
Texture
Animated texture coordinates for RGB
Still Alpha channel mask to fade the
light shaft top-bottom
Tiny shader
Very simple fragment shader
Additive alpha blending (Blend One One)
Culling Off
ZWrite Off
© ARM2016 40
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Bloom
© ARM2016 41
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Bloom Effect Based on Sprite
Behaviour
Fades when the camera moves closer (Min & Max distance)
More intense when the camera moves away
Can rotate in any axis. It is oriented to camera in the free
axes
Coupled with the light source. Bloom intensity depends upon
light to sprite.
Final intensity combined with different intensity maps.
Textures
Texture rotates depending on camera position to add a
parallax like effect
Minimalistic shader
Very simple fragment shader
Additive alpha blending (Blend One One)
Culling Off
ZWrite Off
N * L
© ARM2016 42
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Bloom at the Entrance to the Cave
Sunset Daylight
© ARM2016 43
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Dirty Lens Effect
© ARM2016 44
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Dirty Lens Effect
Full screen quad
mesh.vertices = new Vector3[] {
new Vector3(-1, -1, 0), new Vector3(1, -1, 0), new Vector3(1, 1, 0),
new Vector3(-1, 1, 0)};
mesh.uv = new Vector2[] {
new Vector2(0, 0), new Vector2(1, 0), new Vector2(1, 1),
new Vector2(0, 1)};
Intensity depends on sun and camera vector alignment + bloom
vec plane alignment.
Minimalistic shader
Very simple fragment and vertex shaders
Additive alpha blending (Blend One One)
Culling Off
ZWrite Off
ZTest Always
© ARM2016 45
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Particles Mist
© ARM2016 46
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Particles Mist
Render a few big particles with different
orientation and rotation
Not too many as you want to keep the
overdraw factor low
Fade a single particle in and out
according to the camera view vector
Apply additive blending
Finally apply a mist texture
© ARM2016 47
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Particles Mist
© ARM2016 48
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Glints
© ARM2016 49
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Glints
Remove vertices from the original mesh and leave minimum number
The reduced cave contains 200 vertices
For each vertex spawn a particle
Assign a glint texture:
Use local cubemap shadow to fade the particle in and out
© ARM2016 50
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Glints – Final Result
© ARM2016 51
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
First released at Unite Seattle 2014
Intended to share the experience of learning Unity from scratch
Available for free at MaliDeveloper.arm.com
V1.0:
Optimizing Applications and quality settings in Unity (Chapter 2)
Profiling Applications with the Unity Profiler(Chapter 3)
Optimizations: Application, GPU and Assets (Chapter 4)
V2.0:
Enlighten (Chapter 5) and advanced graphics techniques (Chapter 6)
V3.0:
More advanced graphics techniques (Chapter 6)
ARM Guide For Unity Developers: Optimizing Mobile Gaming
Graphics
Download the ARM Guide for Unity Developers
at MaliDeveloper.arm.com
Optimizations Wrap Up
© ARM2016 53
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
ALU (Arthmetic Logic Unit)
Vectorise
Use appropriate precision of
variables
Use standard functions – do
not reinvent the wheel
Move calculations to vertex
if fragment bound
Transform normal map to
world space
LS
(Load Store)
Keep number of uniforms
and varying in the physical
registers
Select the right precision –
the lower the better
performance, but check it is
not causing artifacts
Using too many or high
precision will trigger loading
and storing data from / to
main memory
Texture
Use Mipmaps
Compress
We didn’t hit the limit of
textures in the Ice Cave
demo.
Mali is very good at handling
multiple textures
Bilinear – 1 cycle
Trilinear – 2 cycles
Optimized cubemap fetch
GPU Tri-Pipe Optimization Hints
Use Mali Offline Shader compiler to find out more about your shaders and bottlenecks!
The trademarks featured in this presentation are registered and/or unregistered trademarks of ARM Limited (or its
subsidiaries) in the EU and/or elsewhere. All rights reserved. All other marks featured may be trademarks of their
respective owners.
Copyright © 2016 ARM Limited
Thank you!
Confidential © ARM 2016 55
Text 54pt Sentence Case
ARM Booth #1624 on Expo Floor: Live demos of the techniques shown in this session
In-depth Q&A with ARM engineers
More tech talks at the ARM Lecture Theatre
http://malideveloper.arm.com/gdc2016: Revisit this talk in PDF and video format post GDC
Download the tools and resources
To Find Out More….
© ARM2016 56
Title 40pt Title Case
Bullets 24pt sentence case
Sub-bullets 20pt sentence case
Vulkan on Mobile with Unreal Engine 4 Case Study Weds. 9:30am, West Hall 3022
Making Light Work of Dynamic Large Worlds Weds. 2pm, West Hall 2000
Achieving High Quality Mobile VR Games Thurs. 10am, West Hall 3022
Optimize Your Mobile Games With Practical Case Studies Thurs. 11:30am, West Hall 2404
An End-to-End Approach to Physically Based Rendering Fri. 10am, West Hall 2020
More Talks From ARM at GDC 2016 Available post-show at the Mali Developer Center: malideveloper.arm.com/