advanced rendering techniques with opengl es 1.1+
DESCRIPTION
Advanced Rendering Techniques with OpenGL ES 1.1+. Dan Ginsburg Staff Engineer, ATI Research Inc. Agenda. Imageon 238x Rooms Demo Overview Advanced Rendering Techniques: Lighting Water Postprocessing Particles Reflections. Imageon 238x Rooms Demo. Imageon 238x Rooms Demo. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/1.jpg)
© Copyright Khronos Group, 2006 - Page 1
Advanced Rendering Techniques with Advanced Rendering Techniques with OpenGL ES 1.1+OpenGL ES 1.1+
Dan GinsburgStaff Engineer, ATI Research Inc.
![Page 2: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/2.jpg)
© Copyright Khronos Group, 2006 - Page 2
AgendaAgenda
• Imageon 238x Rooms Demo Overview
• Advanced Rendering Techniques:- Lighting- Water- Postprocessing- Particles- Reflections
![Page 3: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/3.jpg)
© Copyright Khronos Group, 2006 - Page 3
Imageon 238x Rooms DemoImageon 238x Rooms Demo
![Page 4: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/4.jpg)
© Copyright Khronos Group, 2006 - Page 4
• Designed to demonstrate OpenGL ES 1.1+
• Uses nearly all features of API
• Attempts to minimize CPU calculations
• Techniques for your games
Imageon 238x Rooms DemoImageon 238x Rooms Demo
![Page 5: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/5.jpg)
© Copyright Khronos Group, 2006 - Page 5
LightingLighting
DOT3 DOT3 BumpmappingBumpmapping
ProjectiveProjective SpotlightSpotlight
Per-pixel Cubemap Per-pixel Cubemap SpecularSpecular
ShadowsShadows
![Page 6: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/6.jpg)
© Copyright Khronos Group, 2006 - Page 6
Lighting StagesLighting Stages
DOT3 Bump Spotlight Specular Cubemap
Shadows
Basemap
Final
![Page 7: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/7.jpg)
© Copyright Khronos Group, 2006 - Page 7
Stage 1 – DOT3 BumpStage 1 – DOT3 Bump
![Page 8: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/8.jpg)
© Copyright Khronos Group, 2006 - Page 8
DOT3 - Challenges in ES 1.1+DOT3 - Challenges in ES 1.1+
• Goal: minimize CPU calculations
• Tangent-space bumpmapping:- Requires per-vertex matrix multiply on CPU- Requires dynamic vertex data- Far from ideal for handheld
![Page 9: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/9.jpg)
© Copyright Khronos Group, 2006 - Page 9
DOT3 - Tangent vs. World SpaceDOT3 - Tangent vs. World Space• Tangent-space- Matrix multiply per-vertex on CPU- Dynamic vertex data- Object can animate- Potentially less texture data
• World-space- No per-vertex CPU calculations- Larger texture data- Object is static
![Page 10: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/10.jpg)
© Copyright Khronos Group, 2006 - Page 10
DOT3 in Lighting DemoDOT3 in Lighting Demo
• Tangent-space on low-poly surfaces• World-space on high-poly surfaces- Less CPU calculation
Tangent SpaceTangent Space
BumpmapBumpmap
World SpaceWorld Space
BumpmapBumpmap
![Page 11: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/11.jpg)
© Copyright Khronos Group, 2006 - Page 11
Stage 2 – Projective SpotlightStage 2 – Projective Spotlight
![Page 12: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/12.jpg)
© Copyright Khronos Group, 2006 - Page 12
Projective SpotlightProjective Spotlight
• Use 2D spotlight texture image
• Projective texturing for spotlight effect
![Page 13: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/13.jpg)
© Copyright Khronos Group, 2006 - Page 13
Projective SpotlightProjective Spotlight
• Send (x,y,z) position as texcoord
• Compute texture matrix:- M = Bias * LP * LV- LV = Modelview matrix from light- LP = Projection matrix from light- Bias = Bias matrix [-1, 1] -> [0, 1]
![Page 14: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/14.jpg)
© Copyright Khronos Group, 2006 - Page 14
Projective Spotlight ResultsProjective Spotlight Results
• Back projection from negative coordinates
![Page 15: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/15.jpg)
© Copyright Khronos Group, 2006 - Page 15
Resolving Back ProjectionResolving Back Projection
• Need to fetch:- Black behind light near plane- White in front of light near plane
• Solution:- Use texture matrix to compute distance to plane- Use distance as texture coordinate- Texture has black at texel (0,0), white at (1,0)
![Page 16: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/16.jpg)
© Copyright Khronos Group, 2006 - Page 16
Back projection texture matrixBack projection texture matrix• Put plane equation in texture matrix
• Position (x,y,z) in texture coordinate• Combine with spotlight texture
100.
000.
000.
000.
wP
zP
yP
xP
![Page 17: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/17.jpg)
© Copyright Khronos Group, 2006 - Page 17
Final Projective SpotlightFinal Projective Spotlight
Without Back ProjectionFix
With Back ProjectionFix
![Page 18: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/18.jpg)
© Copyright Khronos Group, 2006 - Page 18
Stage 3 – Specular CubemapStage 3 – Specular Cubemap
![Page 19: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/19.jpg)
© Copyright Khronos Group, 2006 - Page 19
Specular Highlight CubemapSpecular Highlight Cubemap
![Page 20: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/20.jpg)
© Copyright Khronos Group, 2006 - Page 20
Applying Specular CubemapApplying Specular Cubemap
• Use REFLECTION_MAP texgen
• Generate texture matrix- Based on light direction- Use to rotate reflection vector
• Apply using texture combine- Optionally, attenuate by gloss channel
![Page 21: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/21.jpg)
© Copyright Khronos Group, 2006 - Page 21
Stage 4 – ShadowsStage 4 – Shadows
![Page 22: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/22.jpg)
© Copyright Khronos Group, 2006 - Page 22
Stencil TechniqueStencil Technique
• OpenGL ES 1.1+ enables true stencil shadows
• However, we used simple technique:- Compute “squash” matrix based on shadow-plane- Squash geometry using matrix- Use stencil buffer to mask shadow region- Also use stencil to write each pixel only once
![Page 23: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/23.jpg)
© Copyright Khronos Group, 2006 - Page 23
WaterWater
Cubemap Fresnel Cubemap Fresnel ReflectionReflection
RefractionRefraction
Planar Reflections Planar Reflections w/ Framebuffer w/ Framebuffer
ObjectsObjects
LightmapsLightmaps
![Page 24: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/24.jpg)
© Copyright Khronos Group, 2006 - Page 24
Stage 1 – Refraction/ReflectionStage 1 – Refraction/Reflection
![Page 25: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/25.jpg)
© Copyright Khronos Group, 2006 - Page 25
Refraction MappingRefraction Mapping
• Water simulation on lattice of vertices- We used simple sin/cos waves- Algorithm is independent of simulation technique
• Dynamically compute refraction on CPU- Generate normal for each vertex in lattice- Use eye-vector and normal to generate refraction texcoords
• See: Game Programming Gems, Refraction Mapping for Liquids in Containers
![Page 26: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/26.jpg)
© Copyright Khronos Group, 2006 - Page 26
Refraction TextureRefraction Texture
• 2D view of closed container:
• Mapped using dynamic refraction coords
![Page 27: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/27.jpg)
© Copyright Khronos Group, 2006 - Page 27
Reflection MappingReflection Mapping
• Prerender reflection cubemap
• FOV: 90 degrees. Aspect: 1.0
![Page 28: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/28.jpg)
© Copyright Khronos Group, 2006 - Page 28
Reflection MappingReflection Mapping
• REFLECTION_MAP texcoord generation- Generates eye-space reflection vector-…but we need reflection vector in world-space!
• Rotate reflection vector into world-space- Load inverse upper 3x3 of MV matrix- This is required to use REFLECTION_MAP with a moving camera!
![Page 29: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/29.jpg)
© Copyright Khronos Group, 2006 - Page 29
Water DetailsWater Details
2D Refraction
+
(Cubemap Reflection * Fresnel)
![Page 30: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/30.jpg)
© Copyright Khronos Group, 2006 - Page 30
Stage 2 – Planar ReflectionsStage 2 – Planar Reflections
![Page 31: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/31.jpg)
© Copyright Khronos Group, 2006 - Page 31
Dynamic Planar ReflectionDynamic Planar Reflection
• Create FBO for render-to-texture
• Flip camera about the ground plane- Also invert cull direction
• Draw scene to reflection texture
![Page 32: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/32.jpg)
© Copyright Khronos Group, 2006 - Page 32
Rendering ReflectionsRendering Reflections
• Use (x, y, z) position as texture coordinate
• Compute texture-matrix to transform into projective-view space- Just like projective spotlight, except use camera matrix instead of light
matrix
![Page 33: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/33.jpg)
© Copyright Khronos Group, 2006 - Page 33
Puddles in a single passPuddles in a single pass
• Bind two textures:- Tex0 – RGBA basemap- RGB = base color- A = puddle opacity
- Tex1 – Reflection texture (FBO)
• Use texture environment to combine in one pass
![Page 34: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/34.jpg)
© Copyright Khronos Group, 2006 - Page 34
PostprocessingPostprocessing
Light Bloom with Light Bloom with Framebuffer Framebuffer
ObjectsObjects
Diffuse Vertex Diffuse Vertex LightingLighting
LightmapsLightmaps
![Page 35: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/35.jpg)
© Copyright Khronos Group, 2006 - Page 35
Light BloomLight Bloom
128x128 64x64 32x32 16x16
10% 15% 34% 60%
+
![Page 36: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/36.jpg)
© Copyright Khronos Group, 2006 - Page 36
PostprocessingPostprocessing
• Render scene to framebuffer object- Clear screen to white- Draw all objects black
• Downsample to multiple sizes
• Blend all FBOs together- Use multitexture and alpha blend
• Blend combined FBO with final scene
![Page 37: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/37.jpg)
© Copyright Khronos Group, 2006 - Page 41
ParticlesParticles
Distance Distance Attenuated Point Attenuated Point
SpritesSprites
Flicker Attenuated Flicker Attenuated LightmapsLightmaps
![Page 38: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/38.jpg)
© Copyright Khronos Group, 2006 - Page 42
Particle System for ESParticle System for ES
• Generic particle emitters
• Modify properties over particle lifetime:- Position- Color- Size
• ES allows per-particle size- Desktop OpenGL did not easily allow this
![Page 39: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/39.jpg)
© Copyright Khronos Group, 2006 - Page 43
Distance AttenuationDistance Attenuation
• Point sprites have some limitations- Texture coordinates are fixed [0,0] -> [1,1]- Size is expressed in screen pixels
• Point parameters must be used- Attenuate particles by distance to camera- Account for resolution change
![Page 40: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/40.jpg)
© Copyright Khronos Group, 2006 - Page 44
• Input (a,b,c) into attenuation equation:
• We compute scale based on resolution- a = (scale * scale)- b = 0- c = scale * 0.15
• This gives proper scaling by resolution change and distance to eye
Point ParametersPoint Parameters
2**
1)(
dcdbadatten
![Page 41: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/41.jpg)
© Copyright Khronos Group, 2006 - Page 45
ReflectReflect
Dynamic Cubemap Dynamic Cubemap with Framebuffer with Framebuffer
ObjectsObjects
Blended ShadowsBlended Shadows
Dynamic Diffuse Dynamic Diffuse Vertex LightingVertex Lighting
![Page 42: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/42.jpg)
© Copyright Khronos Group, 2006 - Page 46
Dynamic CubemapDynamic Cubemap
• Create 6 FBOs, one for each cube face
• Each frame:- Render scene to each cube face- Use proxy geometry for performance- Also use frustum culling
![Page 43: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/43.jpg)
© Copyright Khronos Group, 2006 - Page 47
Applying the CubemapApplying the Cubemap
• As in Water demo:- Use REFLECTION_MAP on globe- Use texture matrix to rotate from eye-space to world-space
• Blend with basemap and vertex lighting
![Page 44: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/44.jpg)
© Copyright Khronos Group, 2006 - Page 48
SummarySummary
• ES 1.1+ enables advanced techniques- Lighting- Water- Postprocessing- Particles- Reflections
![Page 45: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/45.jpg)
© Copyright Khronos Group, 2006 - Page 49
ConclusionConclusion
• Differentiate your game with advanced features
• Think a bit differently…-…do as little as possible on the CPU
• Get creative…- These are just some examples, ES 1.1+ enables much more!
![Page 46: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/46.jpg)
© Copyright Khronos Group, 2006 - Page 50
More info…More info…
• Khronos: www.khronos.org
• ATI: www.ati.com/products/imageon238x/index.html- Imageon 238x Rooms Demo
- Whitepaper- Movies- Screenshots
![Page 47: Advanced Rendering Techniques with OpenGL ES 1.1+](https://reader035.vdocuments.mx/reader035/viewer/2022062314/5681378d550346895d9f2986/html5/thumbnails/47.jpg)
© Copyright Khronos Group, 2006 - Page 51
Questions?