Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential...
Transcript of Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential...
![Page 1: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/1.jpg)
These are confidential sessions—please refrain from streaming, blogging, or taking pictures
Session 505
Advances in OpenGL ES
Dan OmachiGPU Software
![Page 2: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/2.jpg)
Introduction
•OpenGL ES offers the most direct access to graphics hardware on iOS■ Allows lots of flexibility and power
■ Flexibility can be challenging to master
•Utilizing the API to its fullest can set your app apart■ Make the difference between shipping something good or great
![Page 3: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/3.jpg)
What you will learnAgenda
•New in iOS 7■ Instancing■ Vertex texture sampling■ sRGB texture formats
• Tuning and performance■ Understand the GPU pipeline■ Insight into feedback from GPU tools
![Page 4: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/4.jpg)
Rendering, but not…A Note About Power Efficiency
![Page 5: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/5.jpg)
Rendering Requires Power
•All GPUs used by iOS are power efficient■ Still require considerable power to render
![Page 6: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/6.jpg)
Rendering Requires Power
•Manage frame rate■ Use CADisplayLink to sync to display■ Target 30 fps
•All GPUs used by iOS are power efficient■ Still require considerable power to render
![Page 7: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/7.jpg)
Rendering Requires Power
•Manage frame rate■ Use CADisplayLink to sync to display■ Target 30 fps
•Often unnecessary to render at all■ Do not re-render a frame if it looks the same as the previous frame
■ No animation or movement
•All GPUs used by iOS are power efficient■ Still require considerable power to render
![Page 8: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/8.jpg)
Rendering Requires Power
•Manage frame rate■ Use CADisplayLink to sync to display■ Target 30 fps
•Often unnecessary to render at all■ Do not re-render a frame if it looks the same as the previous frame
■ No animation or movement
• Particularly important with the multilayered iOS 7 UI■ UI can skip compositing if nothing has changed in a layer
•All GPUs used by iOS are power efficient■ Still require considerable power to render
![Page 9: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/9.jpg)
From one, come many…Instancing
![Page 10: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/10.jpg)
Drawing Many Models
![Page 11: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/11.jpg)
Without instancingDrawing Many Models
for(x = 0; x < 10; x++){
for(y = 0; y < 10; y++){
// Set uniform to position the gearglUniform4fv(mygearPosition[x][y]);
// Draw the gearglDrawArrays(GL_TRIANGLES, 0, numGearVertices);
}}
![Page 12: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/12.jpg)
Without instancingDrawing Many Models
for(x = 0; x < 10; x++){
for(y = 0; y < 10; y++){
// Set uniform to position the gearglUniform4fv(mygearPosition[x][y]);
// Draw the gearglDrawArrays(GL_TRIANGLES, 0, numGearVertices);
}}
![Page 13: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/13.jpg)
Without instancingDrawing Many Models
for(x = 0; x < 10; x++){
for(y = 0; y < 10; y++){
// Set uniform to position the gearglUniform4fv(mygearPosition[x][y]);
// Draw the gearglDrawArrays(GL_TRIANGLES, 0, numGearVertices);
}}
![Page 14: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/14.jpg)
Without instancingDrawing Many Models
for(x = 0; x < 10; x++){
for(y = 0; y < 10; y++){
// Set uniform to position the gearglUniform4fv(mygearPosition[x][y]);
// Draw the gearglDrawArrays(GL_TRIANGLES, 0, numGearVertices);
}}
![Page 15: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/15.jpg)
Without instancingDrawing Many Models
for(x = 0; x < 10; x++){
for(y = 0; y < 10; y++){
// Set uniform to position the gearglUniform4fv(mygearPosition[x][y]);
// Draw the gearglDrawArrays(GL_TRIANGLES, 0, numGearVertices);
}}
![Page 16: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/16.jpg)
What Instancing Does
•Draw the same model many times■ Different parameter for each instance■ Single draw call
• Each instance can have different:■ Position■ Matrices■ Texture coordinates
![Page 17: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/17.jpg)
Two formsInstancing
• Instanced arrays■ GL_APPLE_instanced_arrays ■ Instance parameters in a vertex array
• Shader instance ID■ GL_APPLE_draw_instanced ■ ID variable for instance drawn in vertex shader
![Page 18: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/18.jpg)
Method 1: Instanced arraysInstancing
• glVertexAttribDivisorAPPLE indicates■ Attribute array supplying instance data■ Number of instances to draw before advancing to the next element in this array
•Draw with glDrawArraysInstancedAPPLE or glDrawElementsInstancedAPPLE■ Same as glDrawArrays and glDrawElements, but extra parameter indicates number of instances to draw
![Page 19: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/19.jpg)
Method 1: Instanced arraysInstancing
Vertex Arrays
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
I1Attribute 3: Instance Positions
Attribute 2: Vertex Colors
I2...In
...
...
...
P1P2P3P4Pk
N1N2N3N4Nk
C1C2C3C4Ck
![Page 20: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/20.jpg)
Method 1: Instanced arraysInstancing
Vertex Arrays
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
I1Attribute 3: Instance Positions
Attribute 2: Vertex Colors
I2...In
...
...
...
glVertexAttribPointer(0, ... , positionOffset);
P1P2P3P4Pk
N1N2N3N4Nk
C1C2C3C4Ck
![Page 21: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/21.jpg)
Method 1: Instanced arraysInstancing
Vertex Arrays
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
I1Attribute 3: Instance Positions
Attribute 2: Vertex Colors
I2...In
...
...
...
P1P2P3P4Pk
N1N2N3N4Nk
C1C2C3C4Ck
![Page 22: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/22.jpg)
Instancing
Vertex Arrays
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
...
P1P2P3P4Pk
N1N2N3N4Nk
C1C2C3C4Ck
I1I2...In
Method 1: Instanced arrays
![Page 23: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/23.jpg)
Instancing
Vertex Arrays
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
...
glVertexAttribPointer(1, ... , normalOffset);
P1P2P3P4Pk
N1N2N3N4Nk
C1C2C3C4Ck
I1I2...In
Method 1: Instanced arrays
![Page 24: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/24.jpg)
Instancing
Vertex Arrays
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
...
P1P2P3P4Pk
N1N2N3N4Nk
C1C2C3C4Ck
I1I2...In
Method 1: Instanced arrays
![Page 25: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/25.jpg)
Instancing
Vertex Arrays
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
...
P1P2P3P4Pk
N1N2N3N4Nk
C1C2C3C4Ck
I1I2...In
Method 1: Instanced arrays
![Page 26: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/26.jpg)
Instancing
glVertexAttribPointer(2, ... , colorOffset);
Vertex Arrays
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
...
P1P2P3P4Pk
N1N2N3N4Nk
C1C2C3C4Ck
I1I2...In
Method 1: Instanced arrays
![Page 27: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/27.jpg)
Instancing
Vertex Arrays
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
...
P1P2P3P4Pk
N1N2N3N4Nk
C1C2C3C4Ck
I1I2...In
Method 1: Instanced arrays
![Page 28: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/28.jpg)
Instancing
Vertex Arrays
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
...
P1P2P3P4Pk
N1N2N3N4Nk
C1C2C3C4Ck
I1I2...In
Method 1: Instanced arrays
![Page 29: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/29.jpg)
Instancing
Vertex Arrays
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
...
glVertexAttribPointer(3, ..., instancePositionOffset);
P1P2P3P4Pk
N1N2N3N4Nk
C1C2C3C4Ck
I1I2...In
Method 1: Instanced arrays
![Page 30: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/30.jpg)
Instancing
Vertex Arrays
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
...
glVertexAttribPointer(3, ..., instancePositionOffset);
P1P2P3P4Pk
N1N2N3N4Nk
C1C2C3C4Ck
I1I2...In
Method 1: Instanced arrays
![Page 31: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/31.jpg)
Instancing
Vertex Arrays
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
...
P1P2P3P4Pk
N1N2N3N4Nk
C1C2C3C4Ck
I1I2...In
Method 1: Instanced arraysglVertexAttribPointer(3, ..., instancePositionOffset);
![Page 32: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/32.jpg)
Instancing
Vertex Arrays
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
...
glVertexAttribDivisorAPPLE(3, 1);
P1P2P3P4Pk
N1N2N3N4Nk
C1C2C3C4Ck
I1I2...In
Method 1: Instanced arraysglVertexAttribPointer(3, ..., instancePositionOffset);
![Page 33: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/33.jpg)
Instancing
Vertex Arrays
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
...
glVertexAttribDivisorAPPLE(3, 1);3
Attribute 3
P1P2P3P4Pk
N1N2N3N4Nk
C1C2C3C4Ck
I1I2...In
Method 1: Instanced arraysglVertexAttribPointer(3, ..., instancePositionOffset);
![Page 34: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/34.jpg)
Instancing
Vertex Arrays
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
...
glVertexAttribDivisorAPPLE(3, 1);1
P1P2P3P4Pk
N1N2N3N4Nk
C1C2C3C4Ck
I1I2...In
Method 1: Instanced arraysglVertexAttribPointer(3, ..., instancePositionOffset);
![Page 35: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/35.jpg)
Instancing
Vertex Arrays
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
...
glVertexAttribDivisorAPPLE(3, 1);1
P1P2P3P4Pk
N1N2N3N4Nk
C1C2C3C4Ck
I1I2...In
Method 1: Instanced arraysglVertexAttribPointer(3, ..., instancePositionOffset);
![Page 36: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/36.jpg)
Instancing
Vertex Arrays
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
...
P1P2P3P4Pk
N1N2N3N4Nk
C1C2C3C4Ck
I1I2...In
Method 1: Instanced arrays
![Page 37: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/37.jpg)
C1C2C3C4Ck
P1P2P3P4Pk
Instancing
Vertex Arrays
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
...
glDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, k, n);
N1N2N3N4Nk
I1I2...In
Method 1: Instanced arrays
![Page 38: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/38.jpg)
C1C2C3C4Ck
P1P2P3P4Pk
Instancing
Vertex Arrays
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
...
glDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, k, n);k
k
k
N1N2N3N4Nkk
I1I2...In
Method 1: Instanced arrays
![Page 39: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/39.jpg)
C1C2C3C4Ck
P1P2P3P4Pk
Instancing
Vertex Arrays
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
...
glDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, k, n);n
N1N2N3N4Nk
I1I2...Inn
Method 1: Instanced arrays
![Page 40: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/40.jpg)
Instancing
Vertex Arrays
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
...
P1P2P3P4Pk
N1N2N3N4Nk
C1C2C3C4Ck
I1I2...In
Method 1: Instanced arrays
glDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, k, n);
![Page 41: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/41.jpg)
Vertex Shader
Instancing
Vertex Arrays
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
...
P1P2P3P4Pk
N1N2N3N4Nk
C1C2C3C4Ck
I1I2...In
Method 1: Instanced arrays
glDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, k, n);
![Page 42: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/42.jpg)
N1N2N3N4Nk ...
P1P2P3P4Pk ...
C1C2C3C4Ck ...
Instancing
Vertex Arrays Vertex Shader
I1
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
... C1
N1
P1
C2
N2
P2
C3
N3
P3
C4
N4
P4
Ck
Nk
Pk
I2...In
Method 1: Instanced arrays
glDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, k, n);
![Page 43: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/43.jpg)
N1N2N3N4Nk ...
P1P2P3P4Pk ...
C1C2C3C4Ck ...
Instancing
Vertex Arrays Vertex Shader
I1
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
... C1
N1
P1
C2
N2
P2
C3
N3
P3
C4
N4
P4
Ck
Nk
Pk
I2...In
Method 1: Instanced arrays
glDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, k, n);
![Page 44: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/44.jpg)
N1N2N3N4Nk ...
P1P2P3P4Pk ...
C1C2C3C4Ck ...
Instancing
Vertex Arrays Vertex Shader
I1
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
I2...In
Method 1: Instanced arrays
glDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, k, n);
![Page 45: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/45.jpg)
N1N2N3N4Nk ...
P1P2P3P4Pk ...
C1C2C3C4Ck ...
Instancing
Vertex Arrays Vertex Shader
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
I2...In
Method 1: Instanced arrays
glDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, k, n);
![Page 46: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/46.jpg)
N1N2N3N4Nk ...
P1P2P3P4Pk ...
C1C2C3C4Ck ...
Instancing
Vertex Arrays Vertex Shader
I2
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
In
...
...
... C1
N1
P1
C2
N2
P2
C3
N3
P3
C4
N4
P4
Ck
Nk
Pk
...
Method 1: Instanced arrays
glDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, k, n);
![Page 47: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/47.jpg)
N1N2N3N4Nk ...
P1P2P3P4Pk ...
C1C2C3C4Ck ...
Instancing
Vertex Arrays Vertex Shader
I2
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
In
...
...
... C1
N1
P1
C2
N2
P2
C3
N3
P3
C4
N4
P4
Ck
Nk
Pk
...
Method 1: Instanced arrays
glDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, k, n);
![Page 48: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/48.jpg)
N1N2N3N4Nk ...
P1P2P3P4Pk ...
C1C2C3C4Ck ...
Instancing
Vertex Arrays Vertex Shader
I2
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
In ...
Method 1: Instanced arrays
glDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, k, n);
![Page 49: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/49.jpg)
N1N2N3N4Nk ...
P1P2P3P4Pk ...
C1C2C3C4Ck ...
Instancing
Vertex Arrays Vertex Shader
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
In ...
Method 1: Instanced arrays
glDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, k, n);
![Page 50: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/50.jpg)
N1N2N3N4Nk ...
P1P2P3P4Pk ...
C1C2C3C4Ck ......
Instancing
Vertex Arrays Vertex Shader
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
C1
N1
P1
C2
N2
P2
C3
N3
P3
C4
N4
P4
Ck
Nk
Pk
...In
Method 1: Instanced arrays
glDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, k, n);
![Page 51: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/51.jpg)
N1N2N3N4Nk ...
P1P2P3P4Pk ...
C1C2C3C4Ck ......
Instancing
Vertex Arrays Vertex Shader
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
...
...
C1
N1
P1
C2
N2
P2
C3
N3
P3
C4
N4
P4
Ck
Nk
Pk
In
Method 1: Instanced arrays
glDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, k, n);
![Page 52: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/52.jpg)
Instancing
Vertex Arrays Vertex Shader
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex ColorsIn
Method 1: Instanced arrays
glDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, k, n);
![Page 53: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/53.jpg)
Instancing
Vertex Arrays Vertex Shader
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 3: Instance Positions
Attribute 2: Vertex Colors
Method 1: Instanced arrays
glDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, k, n);
![Page 54: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/54.jpg)
API setupInstanced Arrays
// Setup per vertex position, normal, and color arrays on// indices 0, 1, and 2 for gear model same as usually
...
// Setup vertex array index 3 to contain per object positionsglVertexAttribPointer(3, ..., instancePositionOffset);
// Indicate that attribute 3 should increment 1 element each instanceglVertexAttribDivisorAPPLE(3, 1);
// Draw gear model 100 timesglDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, NUM_GEAR_VERTS, 100);
![Page 55: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/55.jpg)
API setupInstanced Arrays
// Setup per vertex position, normal, and color arrays on// indices 0, 1, and 2 for gear model same as usually
...
// Setup vertex array index 3 to contain per object positionsglVertexAttribPointer(3, ..., instancePositionOffset);
// Indicate that attribute 3 should increment 1 element each instanceglVertexAttribDivisorAPPLE(3, 1);
// Draw gear model 100 timesglDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, NUM_GEAR_VERTS, 100);
![Page 56: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/56.jpg)
API setupInstanced Arrays
// Setup per vertex position, normal, and color arrays on// indices 0, 1, and 2 for gear model same as usually
...
// Setup vertex array index 3 to contain per object positionsglVertexAttribPointer(3, ..., instancePositionOffset);
// Indicate that attribute 3 should increment 1 element each instanceglVertexAttribDivisorAPPLE(3, 1);
// Draw gear model 100 timesglDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, NUM_GEAR_VERTS, 100);
![Page 57: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/57.jpg)
API setupInstanced Arrays
// Setup per vertex position, normal, and color arrays on// indices 0, 1, and 2 for gear model same as usually
...
// Setup vertex array index 3 to contain per object positionsglVertexAttribPointer(3, ..., instancePositionOffset);
// Indicate that attribute 3 should increment 1 element each instanceglVertexAttribDivisorAPPLE(3, 1);
// Draw gear model 100 timesglDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, NUM_GEAR_VERTS, 100);
![Page 58: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/58.jpg)
API setupInstanced Arrays
// Setup per vertex position, normal, and color arrays on// indices 0, 1, and 2 for gear model same as usually
...
// Setup vertex array index 3 to contain per object positionsglVertexAttribPointer(3, ..., instancePositionOffset);
// Indicate that attribute 3 should increment 1 element each instanceglVertexAttribDivisorAPPLE(3, 1);
// Draw gear model 100 timesglDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, NUM_GEAR_VERTS, 100);100
![Page 59: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/59.jpg)
API setupInstanced Arrays
// Setup per vertex position, normal, and color arrays on// indices 0, 1, and 2 for gear model same as usually
...
// Setup vertex array index 3 to contain per object positionsglVertexAttribPointer(3, ..., instancePositionOffset);
// Indicate that attribute 3 should increment 1 element each instanceglVertexAttribDivisorAPPLE(3, 1);
// Draw gear model 100 timesglDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, NUM_GEAR_VERTS, 100);100
![Page 60: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/60.jpg)
Vertex shaderInstance Arrays
// Per vertex and normal positionattribute vec4 pos;attribute vec3 normal;// Per instance position (maps to attribute index 3)attribute vec4 instancePos;
...
void main(){
// Add vertex position to instance positionvec4 tempPos = instancePos + pos;// Transform position to clip space and output to gl_Position
...
gl_Position = tempPos;}
![Page 61: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/61.jpg)
Vertex shaderInstance Arrays
// Per vertex and normal positionattribute vec4 pos;attribute vec3 normal;// Per instance position (maps to attribute index 3)attribute vec4 instancePos;
...
void main(){
// Add vertex position to instance positionvec4 tempPos = instancePos + pos;// Transform position to clip space and output to gl_Position
...
gl_Position = tempPos;}
![Page 62: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/62.jpg)
Vertex shaderInstance Arrays
// Per vertex and normal positionattribute vec4 pos;attribute vec3 normal;// Per instance position (maps to attribute index 3)attribute vec4 instancePos;
...
void main(){
// Add vertex position to instance positionvec4 tempPos = instancePos + pos;// Transform position to clip space and output to gl_Position
...
gl_Position = tempPos;}
![Page 63: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/63.jpg)
Vertex shaderInstance Arrays
// Per vertex and normal positionattribute vec4 pos;attribute vec3 normal;// Per instance position (maps to attribute index 3)attribute vec4 instancePos;
...
void main(){
// Add vertex position to instance positionvec4 tempPos = instancePos + pos;// Transform position to clip space and output to gl_Position
...
gl_Position = tempPos;}
![Page 64: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/64.jpg)
Vertex shaderInstance Arrays
// Per vertex and normal positionattribute vec4 pos;attribute vec3 normal;// Per instance position (maps to attribute index 3)attribute vec4 instancePos;
...
void main(){
// Add vertex position to instance positionvec4 tempPos = instancePos + pos;// Transform position to clip space and output to gl_Position
...
gl_Position = tempPos;}
![Page 65: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/65.jpg)
Vertex shaderInstance Arrays
// Per vertex and normal positionattribute vec4 pos;attribute vec3 normal;// Per instance position (maps to attribute index 3)attribute vec4 instancePos;
...
void main(){
// Add vertex position to instance positionvec4 tempPos = instancePos + pos;// Transform position to clip space and output to gl_Position
...
gl_Position = tempPos;}
![Page 66: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/66.jpg)
Method 2: Instance IDInstancing
• Built-in gl_InstanceIDAPPLE variable in vertex shader• ID incremented for each instance• Can use ID to calculate unique info for instance
■ Calculate texture or position■ Location of instance parameter in uniform array or texture
•Also uses glDrawArraysInstancedAPPLE or glDrawElementsInstancedAPPLE
![Page 67: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/67.jpg)
N1N2N3N4Nk ...
P1P2P3P4Pk ...
C1C2C3C4Ck ......
Instancing
Vertex Arrays Vertex Shader
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 2: Vertex Colors
...
...
C1
N1
P1
C2
N2
P2
C3
N3
P3
C4
N4
P4
Ck
Nk
Pkgl_InstanceID
Method 2: Instance ID
glDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, k, n);
![Page 68: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/68.jpg)
N1N2N3N4Nk ...
P1P2P3P4Pk ...
C1C2C3C4Ck ...
Instancing
Vertex Arrays Vertex Shader
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 2: Vertex Colors
gl_InstanceID0
Method 2: Instance ID
glDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, k, n);
![Page 69: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/69.jpg)
N1N2N3N4Nk ...
P1P2P3P4Pk ...
C1C2C3C4Ck ......
Instancing
Vertex Arrays Vertex Shader
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 2: Vertex Colors
...
...
C1
N1
P1
C2
N2
P2
C3
N3
P3
C4
N4
P4
Ck
Nk
Pkgl_InstanceID
Method 2: Instance ID
glDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, k, n);
![Page 70: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/70.jpg)
N1N2N3N4Nk ...
P1P2P3P4Pk ...
C1C2C3C4Ck ...
Instancing
Vertex Arrays Vertex Shader
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 2: Vertex Colors
gl_InstanceID1
Method 2: Instance ID
glDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, k, n);
![Page 71: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/71.jpg)
N1N2N3N4Nk ...
P1P2P3P4Pk ...
C1C2C3C4Ck ......
Instancing
Vertex Arrays Vertex Shader
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 2: Vertex Colors
...
...
C1
N1
P1
C2
N2
P2
C3
N3
P3
C4
N4
P4
Ck
Nk
Pkgl_InstanceID
Method 2: Instance ID
glDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, k, n);
![Page 72: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/72.jpg)
Instancing
Vertex Arrays Vertex Shader
Attribute 1: Vertex Normals
Attribute 0: Vertex Positions
Attribute 2: Vertex Colors
gl_InstanceIDn
Method 2: Instance ID
glDrawArraysInstancedAPPLE(GL_TRIANGLES, 0, k, n);
![Page 73: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/73.jpg)
Shader Instance IDVertex shader
uniform float gearSize; attribute vec2 vertexPosition;
...
void main() {float instanceID = float(gl_InstanceIDAPPLE);instancePosition.x = mod(instanceID, 10) * gearSize;instancePosition.y = (floor(instanceID)/ 10) * gearSize;vec4 tempPos = vertexPosition.xy + instancePosition.xy;
// Transform tempPos to clip space and output to gl_Position
...
gl_Position = tempPos; }
![Page 74: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/74.jpg)
Shader Instance IDVertex shader
uniform float gearSize; attribute vec2 vertexPosition;
...
void main() {float instanceID = float(gl_InstanceIDAPPLE);instancePosition.x = mod(instanceID, 10) * gearSize;instancePosition.y = (floor(instanceID)/ 10) * gearSize;vec4 tempPos = vertexPosition.xy + instancePosition.xy;
// Transform tempPos to clip space and output to gl_Position
...
gl_Position = tempPos; }
gl_InstanceIDAPPLE
![Page 75: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/75.jpg)
Shader Instance IDVertex shader
uniform float gearSize; attribute vec2 vertexPosition;
...
void main() {float instanceID = float(gl_InstanceIDAPPLE);instancePosition.x = mod(instanceID, 10) * gearSize;instancePosition.y = (floor(instanceID)/ 10) * gearSize;vec4 tempPos = vertexPosition.xy + instancePosition.xy;
// Transform tempPos to clip space and output to gl_Position
...
gl_Position = tempPos; }
![Page 76: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/76.jpg)
Shader Instance IDVertex shader
uniform float gearSize; attribute vec2 vertexPosition;
...
void main() {float instanceID = float(gl_InstanceIDAPPLE);instancePosition.x = mod(instanceID, 10) * gearSize;instancePosition.y = (floor(instanceID)/ 10) * gearSize;vec4 tempPos = vertexPosition.xy + instancePosition.xy;
// Transform tempPos to clip space and output to gl_Position
...
gl_Position = tempPos; }
![Page 77: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/77.jpg)
Shader Instance IDVertex shader
uniform float gearSize; attribute vec2 vertexPosition;
...
void main() {float instanceID = float(gl_InstanceIDAPPLE);instancePosition.x = mod(instanceID, 10) * gearSize;instancePosition.y = (floor(instanceID)/ 10) * gearSize;vec4 tempPos = vertexPosition.xy + instancePosition.xy;
// Transform tempPos to clip space and output to gl_Position
...
gl_Position = tempPos; }
![Page 78: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/78.jpg)
Shader Instance IDVertex shader
uniform float gearSize; attribute vec2 vertexPosition;
...
void main() {float instanceID = float(gl_InstanceIDAPPLE);instancePosition.x = mod(instanceID, 10) * gearSize;instancePosition.y = (floor(instanceID)/ 10) * gearSize;vec4 tempPos = vertexPosition.xy + instancePosition.xy;
// Transform tempPos to clip space and output to gl_Position
...
gl_Position = tempPos; }
![Page 79: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/79.jpg)
Shader Instance IDVertex shader
uniform float gearSize; attribute vec2 vertexPosition;
...
void main() {float instanceID = float(gl_InstanceIDAPPLE);instancePosition.x = mod(instanceID, 10) * gearSize;instancePosition.y = (floor(instanceID)/ 10) * gearSize;vec4 tempPos = vertexPosition.xy + instancePosition.xy;
// Transform tempPos to clip space and output to gl_Position
...
gl_Position = tempPos; }
![Page 80: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/80.jpg)
A texture in the vertex stage?Vertex Texture Sampling
![Page 81: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/81.jpg)
Vertex Texture Sampling
• Texture access in the vertex shader•Many uses
■ Displacement mapping■ Alternative to uniforms
•Generic data store with random access
![Page 82: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/82.jpg)
Height mappingA Simple Vertex Texture Sampling Example
![Page 83: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/83.jpg)
A Simple Vertex Texture Sampling Example
uniform sampler2D heightMap;attribute vec2 xzPos;
...
main(){
vec4 tempPos = texture2D(heightMap, xzPos);tempPos.xz = xzPos;
// Transform tempPos to from model space to// clip space with modelviewProjection matrix
...
// output to gl_Positiongl_Position = tempPos;
}
![Page 84: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/84.jpg)
A Simple Vertex Texture Sampling Example
uniform sampler2D heightMap;attribute vec2 xzPos;
...
main(){
vec4 tempPos = texture2D(heightMap, xzPos);tempPos.xz = xzPos;
// Transform tempPos to from model space to// clip space with modelviewProjection matrix
...
// output to gl_Positiongl_Position = tempPos;
}
![Page 85: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/85.jpg)
A Simple Vertex Texture Sampling Example
uniform sampler2D heightMap;attribute vec2 xzPos;
...
main(){
vec4 tempPos = texture2D(heightMap, xzPos);tempPos.xz = xzPos;
// Transform tempPos to from model space to// clip space with modelviewProjection matrix
...
// output to gl_Positiongl_Position = tempPos;
}
![Page 86: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/86.jpg)
A Simple Vertex Texture Sampling Example
uniform sampler2D heightMap;attribute vec2 xzPos;
...
main(){
vec4 tempPos = texture2D(heightMap, xzPos);tempPos.xz = xzPos;
// Transform tempPos to from model space to// clip space with modelviewProjection matrix
...
// output to gl_Positiongl_Position = tempPos;
}
texture2D
![Page 87: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/87.jpg)
A Simple Vertex Texture Sampling Example
uniform sampler2D heightMap;attribute vec2 xzPos;
...
main(){
vec4 tempPos = texture2D(heightMap, xzPos);tempPos.xz = xzPos;
// Transform tempPos to from model space to// clip space with modelviewProjection matrix
...
// output to gl_Positiongl_Position = tempPos;
}
![Page 88: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/88.jpg)
A Simple Vertex Texture Sampling Example
uniform sampler2D heightMap;attribute vec2 xzPos;
...
main(){
vec4 tempPos = texture2D(heightMap, xzPos);tempPos.xz = xzPos;
// Transform tempPos to from model space to// clip space with modelviewProjection matrix
...
// output to gl_Positiongl_Position = tempPos;
}
![Page 89: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/89.jpg)
A Simple Vertex Texture Sampling Example
uniform sampler2D heightMap;attribute vec2 xzPos;
...
main(){
vec4 tempPos = texture2D(heightMap, xzPos);tempPos.xz = xzPos;
// Transform tempPos to from model space to// clip space with modelviewProjection matrix
...
// output to gl_Positiongl_Position = tempPos;
}
![Page 90: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/90.jpg)
Vertex Texture Sampling for Generic Data
• Can store any kind of data in a texture for shader access■ Large store of random access memory■ Data normally passed via glUniform, passed via texture
![Page 91: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/91.jpg)
Texture Sampling vs. Uniforms
• Larger storage than a uniform array• Potentially less API calls to set data
■ Bind large number of uniforms as group
•A variety of types■ GL_UNSIGNED_BYTE, GL_HALF_FLOAT, and GL_FLOAT
•Use with filtering and wrapping■ Averages sequential values
• Render to texture■ GPU can produce data
![Page 92: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/92.jpg)
DemoInstanced Asteroids
![Page 93: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/93.jpg)
Instancing with shader instance IDInstanced Asteroids
• Calculates transformation matrix in vertex shader■ gl_InstanceIDAPPLE modded by a constant gives a spin value
■ cos and sin used to generate rotation matrix■ gl_InstanceIDAPPLE also used to calculate position
■ Translation applied to rotation matrix
•Matrix calculations are done per vertex
![Page 94: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/94.jpg)
Instancing with instanced arraysInstanced Asteroids
• Two vertex arrays store positions and rotations■ Calculated once at app startup
•Attribute divisor passes parameters for each asteroid■ Not passed per vertex
![Page 95: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/95.jpg)
Instance ID with texture sampling vs. instanced arraysInstanced Asteroids
•Advantages of instance ID■ Little memory or bandwidth required■ Use GPU for computation
![Page 96: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/96.jpg)
Instance ID with texture sampling vs. instanced arraysInstanced Asteroids
•Advantages of instance ID■ Little memory or bandwidth required■ Use GPU for computation
•Advantages of instanced arrays■ Generally faster than computing on GPU■ Lots of flexibility in types
![Page 97: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/97.jpg)
Instance ID with texture sampling vs. instanced arraysInstanced Asteroids
•Advantages of instance ID■ Little memory or bandwidth required■ Use GPU for computation
•Advantages of instanced arrays■ Generally faster than computing on GPU■ Lots of flexibility in types
•Advantages of using instance ID with vertex texture sampling■ Random access■ Often logically simplest to store data
■ Look up tables, bone matrices
![Page 98: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/98.jpg)
SummaryInstancing and Vertex Texture Sampling
• Instancing■ Many models, single draw■ Different parameters each instance■ Performance gains
• Vertex texture sampling■ Texture data access in vertex shader■ Use with instance ID for per-instance parameters
•Available on all iOS 7 devices
![Page 99: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/99.jpg)
The other colorspacesRGB
![Page 100: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/100.jpg)
Gamma encoded texture formatssRGB Texture Formats
• sRGB is an alternate colorspace•More perceptually correct
■ Matches gamma curve of displays
• Perceptually linear color mixing■ Mixing with RGB weighs brighter colors more than darker ones
sRGB
Linear
![Page 101: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/101.jpg)
In the APIsRGB Texture Formats
•New formats■ GL_SRGB_EXT // External Format■ GL_SRGB_ALPHA_EXT // External Format■ GL_SRGB8_ALPHA8_EXT // Internal Format■ GL_COMPRESSED_SRGB_PVRTC_..._APPLE // Compressed Formats
•Noncompressed sRGB textures are renderable■ Linear blending■ Color calculations in shaders
• Check for GL_EXT_sRGB in the extension string■ Not supported on iPhone 4
![Page 102: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/102.jpg)
When they should be usedsRGB Texture Formats
• The perceptually “correct” colorspace to use for mixing•Author texture images with sRGB colorspace in mind
■ Otherwise may look different than intended
•Only use for color data
![Page 103: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/103.jpg)
Building a solid foundationGPU Tools
![Page 104: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/104.jpg)
OpenGL ES Frame Debugger
![Page 105: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/105.jpg)
OpenGL ES Frame DebuggerScrubber bar and Framebuffer view
![Page 106: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/106.jpg)
OpenGL ES Frame DebuggerScrubber bar and Framebuffer view
![Page 107: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/107.jpg)
OpenGL ES Frame DebuggerScrubber bar and Framebuffer view
![Page 108: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/108.jpg)
OpenGL ES Frame DebuggerScrubber bar and Framebuffer view
![Page 109: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/109.jpg)
OpenGL ES Frame DebuggerGL context state and auto context view
![Page 110: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/110.jpg)
`
OpenGL ES Frame DebuggerGL context state and auto context view
![Page 111: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/111.jpg)
`
OpenGL ES Frame DebuggerGL context state and auto context view
![Page 112: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/112.jpg)
`
OpenGL ES Frame DebuggerGL context state and auto context view
![Page 113: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/113.jpg)
OpenGL ES Frame DebuggerGL context state and auto context view
![Page 114: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/114.jpg)
OpenGL ES Frame DebuggerObject view and Shader editor
![Page 115: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/115.jpg)
OpenGL ES Frame DebuggerObject view and Shader editor
![Page 116: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/116.jpg)
OpenGL ES Frame DebuggerObject view and Shader editor
![Page 117: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/117.jpg)
OpenGL ES Frame DebuggerObject view and Shader editor
![Page 118: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/118.jpg)
OpenGL ES Frame DebuggerGL issues navigator
![Page 119: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/119.jpg)
OpenGL ES Frame DebuggerGL issues navigator
![Page 120: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/120.jpg)
OpenGL ES Frame DebuggerGL issues navigator
![Page 121: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/121.jpg)
OpenGL ES Frame DebuggerOpenGL ES performance analysis
![Page 122: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/122.jpg)
OpenGL ES Frame DebuggerOpenGL ES performance analysis
![Page 123: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/123.jpg)
Break on OpenGL ES errorXcode Breakpoints
![Page 124: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/124.jpg)
OpenGL ES Analyzer Instrument
![Page 125: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/125.jpg)
OpenGL ES expertOpenGL ES Analyzer Instrument
![Page 126: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/126.jpg)
Understanding the GPU architectureMaximizing GPU Performance
![Page 127: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/127.jpg)
High performance, low powerTile-Based Deferred Renderer
• TBDR Pipeline different than traditional streaming GPUs•Optimizations to reduce processing load
■ Increases performance■ Saves power
•Depends heavily on caches■ Large transfers to unified memory costly
• Certain operations prevent optimizations or cause cache misses■ Operations avoidable
![Page 128: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/128.jpg)
The Tile-Based Deferred Rendering Pipeline
Tile Store
Fragment Processor
Rasterization
Raster Setup
Tile Processor
Vertex Processor
GPU
![Page 129: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/129.jpg)
The Tile-Based Deferred Rendering Pipeline
Vertex Processor
GPU
![Page 130: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/130.jpg)
Vertex Shading•Draw call submits vertices to GPU’s vertex processor
Vertex Processor
GPUUnified MemoryVertex Arrays
V1V2V3V4V5V6
V7V8V9V10V11V12V13V14V15
V16V17V18
![Page 131: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/131.jpg)
Vertex Shading•Draw call submits vertices to GPU’s vertex processor
Vertex Processor
V1 V2 V3 V4 V5 V6
GPUUnified MemoryVertex Arrays
Window Coordinate Vertices
V1V2V3V4V5V6
V7V8V9V10V11V12V13V14V15
V16V17V18
![Page 132: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/132.jpg)
Vertex Processor
• Vertices shaded and transformed to window coords • Shaded, transform vertices, stored out to unified memory
GPUUnified MemoryVertex Arrays
Window Coordinate Vertices
V7V8V9V10V11V12V13V14V15
V16V17V18
V1 V2 V3 V4 V5 V6
![Page 133: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/133.jpg)
Vertex Processor
V7 V8 V9
V10 V11 V12 V13 V14 V15 V16 V18V17
• Vertices shaded and transformed to window coords • Shaded, transform vertices, stored out to unified memory
GPUUnified MemoryVertex Arrays
Window Coordinate Vertices
V7V8V9V10V11V12V13V14V15V16V17V18
V1 V2 V3 V4 V5 V6
![Page 134: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/134.jpg)
Vertex Processor
GPUUnified Memory
V10 V11 V12 V13 V14 V15 V16 V17 V18
V1 V2 V3 V4 V5 V6 V7 V8 V9
Window Coordinate Vertices
•A frames’ worth of vertices stored• Rasterization deferred until presentRenderbuffer or renderbuffer changed
![Page 135: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/135.jpg)
Vertex Processor
GPUUnified Memory
Tiling Processor
V10 V11 V12 V13 V14 V15 V16 V17 V18
V1 V2 V3 V4 V5 V6 V7 V8 V9
Window Coordinate Vertices
Tiling Processor
![Page 136: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/136.jpg)
Vertex Processor
GPUUnified Memory
Tiling Processor
V10 V11 V12 V13 V14 V15 V16 V17 V18
V1 V2 V3 V4 V5 V6 V7 V8 V9
Window Coordinate Vertices
Tiling Processor
![Page 137: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/137.jpg)
V18V10 V11 V12 V13 V14 V15 V16 V17 V18
V1 V2 V3 V4 V5 V6 V7 V8 V9
Window Coordinate Vertices
GPUUnified Memory
Tiling Processor
• Render buffers split into tiles•Allows rasterization and fragment shading on embedded GPU memory
![Page 138: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/138.jpg)
V18V10 V11 V12 V13 V14 V15 V16 V17 V18
V1 V2 V3 V4 V5 V6 V7 V8 V9
Window Coordinate Vertices
GPUUnified Memory
Tiling Processor
• Render buffers split into tiles•Allows rasterization and fragment shading on embedded GPU memory
![Page 139: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/139.jpg)
V18V10 V11 V12 V13 V14 V15 V16 V17 V18
V1 V2 V3 V4 V5 V6 V7 V8 V9
Window Coordinate Vertices
GPUUnified Memory
Tiling Processor
• Render buffers split into tiles•Allows rasterization and fragment shading on embedded GPU memory
![Page 140: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/140.jpg)
GPUUnified Memory
Tiling Processor
V10 V11 V12 V13 V14 V15 V16 V17 V18
V1 V2 V3 V4 V5 V6 V7 V8 V9
Window Coordinate Vertices
• Vertices processed in groups of triangles• Tiling processor bins triangles into tiles in which they are located
![Page 141: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/141.jpg)
GPUUnified Memory
Tiling Processor
V10 V11 V12 V13 V14 V15 V16 V17 V18
V1 V2 V3 V4 V5 V6 V7 V8 V9
Window Coordinate Vertices
• Vertices processed in groups of triangles• Tiling processor bins triangles into tiles in which they are located
![Page 142: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/142.jpg)
GPUUnified Memory
Tiling Processor
V10 V11 V12 V13 V14 V15 V16 V17 V18
V1 V2 V3
V4 V5 V6
V7 V8 V9
Window Coordinate Vertices
• Vertices processed in groups of triangles• Tiling processor bins triangles into tiles in which they are located
![Page 143: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/143.jpg)
Tiling Processor
GPUUnified Memory
V10 V11 V12
V1 V2 V3
Window Coordinate Vertices
V16 V17 V18V13 V14 V15
•GPU may bin a larger triangle into multiple tiles
![Page 144: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/144.jpg)
Tiling Processor
V1 V2 V3
V16 V17 V18
V16 V17 V18
V13 V14 V15
V13 V14 V15
V13 V14 V15
V13 V14 V15
V13 V14 V15
GPUUnified Memory
V10 V11 V12V1 V2 V3
V16 V17 V18
V13 V14 V15
•GPU may bin a larger triangle into multiple tiles
![Page 145: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/145.jpg)
Tiling Processor
Unified Memory GPU
Raster Setup
Raster Setup
![Page 146: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/146.jpg)
Tiling Processor
Unified Memory GPU
Raster Setup
Raster Setup
![Page 147: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/147.jpg)
Raster Setup
Raster Setup
GPUUnified Memory
![Page 148: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/148.jpg)
Raster Setup
Raster Setup
GPUUnified Memory
![Page 149: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/149.jpg)
• Rasterizer uses tile-sized embedded memory
GPUUnified Memory
Raster Setup
![Page 150: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/150.jpg)
• Rasterizer uses tile-sized embedded memory
GPUUnified Memory
• If data is in render buffer, GPU must perform a costly load
Raster Setup
![Page 151: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/151.jpg)
• Rasterizer uses tile-sized embedded memory
GPUUnified Memory
• If data is in render buffer, GPU must perform a costly load
Raster Setup
![Page 152: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/152.jpg)
GPUUnified Memory
• If there is data in the depth buffer, GPU must load it also
Raster Setup
![Page 153: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/153.jpg)
GPUUnified Memory
• If there is data in the depth buffer, GPU must load it also
Raster Setup
![Page 154: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/154.jpg)
GPUUnified Memory
• If there is data in the depth buffer, GPU must load it also
Raster Setup
![Page 155: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/155.jpg)
GPUUnified Memory
• Loading a tile is called a Logical Buffer Load■ Developers can avoid these
Raster Setup
![Page 156: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/156.jpg)
• Calling glClear before rendering skips Logical Buffer Load
GPUUnified Memory
Raster Setup
![Page 157: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/157.jpg)
• Calling glClear before rendering skips Logical Buffer Load■ Can immediately rasterize to embedded memory
GPUUnified Memory
Raster Setup
![Page 158: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/158.jpg)
• Logical Buffer Loads also happen when switching render buffer
GPUUnified Memory
Raster Setup
![Page 159: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/159.jpg)
• Logical Buffer Loads also happen when switching render buffer■ Render to texture, render to new buffer, render to texture again
GPUUnified Memory
Raster Setup
![Page 160: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/160.jpg)
• Logical Buffer Loads also happen when switching render buffer■ Render to texture, render to new buffer, render to texture again
GPUUnified Memory
Raster Setup
![Page 161: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/161.jpg)
• Logical Buffer Loads also happen when switching render buffer■ Render to texture, render to new buffer, render to texture again
GPUUnified Memory
Raster Setup
![Page 162: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/162.jpg)
• Logical Buffer Loads also happen when switching render buffer■ Render to texture, render to new buffer, render to texture again
GPUUnified Memory
Raster Setup
![Page 163: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/163.jpg)
• Logical Buffer Loads also happen when switching render buffer■ Render to texture, render to new buffer, render to texture again
GPUUnified Memory
Raster Setup
![Page 164: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/164.jpg)
•Developers should avoid frequent switching of renderbuffers■ Complete rendering to one buffer before switching to another
GPUUnified Memory
Raster Setup
![Page 165: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/165.jpg)
Raster Setup
GPUUnified Memory
Rasterization
Rasterizer
![Page 166: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/166.jpg)
Raster Setup
GPUUnified Memory
V13 V14 V15
V16 V17 V18
V4 V5 V6
Rasterization
Rasterizer
![Page 167: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/167.jpg)
GPUUnified Memory
RasterizerV13 V14 V15
V16 V17 V18
V4 V5 V6
•GPU reads triangles assigned to tile■ XY pixel coordinates and Z values generated
![Page 168: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/168.jpg)
GPUUnified Memory
RasterizerV13 V14 V15
V16 V17 V18
•GPU reads triangles assigned to tile■ XY pixel coordinates and Z values generated
![Page 169: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/169.jpg)
GPUUnified Memory
RasterizerV13 V14 V15
V16 V17 V18
• Fragment shader not run yet■ Positions and depth calculated only
![Page 170: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/170.jpg)
GPUUnified Memory
RasterizerV13 V14 V15
V16 V17 V18
•Hidden Surface Removal performed■ GPU can reject fragments before shading them
![Page 171: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/171.jpg)
GPUUnified Memory
RasterizerV13 V14 V15
•Hidden Surface Removal performed■ GPU can reject fragments before shading them
![Page 172: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/172.jpg)
• Triangles of entire frame are present■ Allows many fragments to be rejected
GPUUnified Memory
RasterizerV13 V14 V15
![Page 173: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/173.jpg)
• Triangles of entire frame are present■ Allows many fragments to be rejected
GPUUnified Memory
RasterizerV13 V14 V15
![Page 174: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/174.jpg)
GPUUnified Memory
RasterizerV13 V14 V15
• Costly to enable blending or use discard in shader■ Defeats the Hidden Surface Removal optimization
![Page 175: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/175.jpg)
GPUUnified Memory
Rasterizer
• Costly to enable blending or use discard in shader■ Defeats the Hidden Surface Removal optimization
![Page 176: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/176.jpg)
GPUUnified Memory
Rasterizer
• Fragments behind other triangle could be visible■ Shader must run for all triangles
![Page 177: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/177.jpg)
GPUUnified Memory
Rasterizer
•No fragment shader savings without Hidden Surface Removal■ Cost to performance and power
![Page 178: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/178.jpg)
GPUUnified Memory
Rasterizer
•Developers must be judicious of their use of discard and blending■ Allow GPU to reject as many fragments as possible
![Page 179: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/179.jpg)
Unified Memory
Rasterizer
FragmentProcessor
GPU
Fragment Shading
![Page 180: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/180.jpg)
Unified Memory
Rasterizer
FragmentProcessor
GPU
Fragment Shading
![Page 181: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/181.jpg)
Unified Memory
FragmentProcessor
•With Hidden Surface Removal algorithm■ Only need to run fragment shader on each pixel once
GPU
![Page 182: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/182.jpg)
Unified Memory
FragmentProcessor
• Fragment processor shades and produces colored pixels• Colors written to embedded tile memory on GPU
GPU
![Page 183: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/183.jpg)
Unified Memory
FragmentProcessor
• Fragment processor shades and produces colored pixels• Colors written to embedded tile memory on GPU
GPU
![Page 184: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/184.jpg)
FragmentProcessor
GPUUnified Memory
Tile Storage
Tile Store
![Page 185: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/185.jpg)
FragmentProcessor
GPUUnified Memory
Tile Storage
Tile Store
![Page 186: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/186.jpg)
FragmentProcessor
GPUUnified Memory
Tile Storage
Tile Store
![Page 187: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/187.jpg)
GPU
Tile Store
Unified Memory
• Tile stored in unified memory
•Once all tiles processed, renderbuffer is ready for use
![Page 188: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/188.jpg)
GPUUnified Memory
• Storing tile to unified memory called Logical Buffer Store• Each frame needs at least one
Tile Store
![Page 189: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/189.jpg)
GPUUnified Memory
• Storing tile to unified memory called Logical Buffer Store• Each frame needs at least one
Tile Store
![Page 190: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/190.jpg)
Tile Store
GPUUnified Memory
•Depth only needs to be stored for depth texture effects■ Such as shadowing or Screen Space Ambient Occlusion
![Page 191: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/191.jpg)
Tile Store
GPUUnified Memory
•Depth only needs to be stored for depth texture effects■ Such as shadowing or Screen Space Ambient Occlusion
![Page 192: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/192.jpg)
GPUUnified Memory
•Unless using such effect■ Depth buffer storage unnecessary
Tile Store
![Page 193: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/193.jpg)
GPUUnified Memory
•Unless using such effect■ Depth buffer storage unnecessary
Tile Store
![Page 194: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/194.jpg)
GPUUnified Memory
•Developers can call glDiscardFramebufferEXT to skip Logical Buffer Store
•Depth buffer tile discarded after rendering complete
Tile Store
![Page 195: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/195.jpg)
GPUUnified Memory
•Developers can call glDiscardFramebufferEXT to skip Logical Buffer Store
•Depth buffer tile discarded after rendering complete
Tile Store
![Page 196: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/196.jpg)
GPUUnified Memory
•Multisample anti-aliased renderbuffers have many more tiles■ Developers do not need to store preresolved MSAA renderbuffer
Tile Store
![Page 197: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/197.jpg)
GPUUnified Memory
•Only need color buffer MSAA buffer has been resolved to
Tile Store
![Page 198: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/198.jpg)
GPUUnified Memory
•Only need color buffer MSAA buffer has been resolved to
Tile Store
![Page 199: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/199.jpg)
GPUUnified Memory
•Only need color buffer MSAA buffer has been resolved to
Tile Store
![Page 200: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/200.jpg)
GPUUnified Memory
•Only need color buffer MSAA buffer has been resolved to■ Call glDiscardFramebufferEXT on MSAA color buffer
Tile Store
![Page 201: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/201.jpg)
GPUUnified Memory
•Only need color buffer MSAA buffer has been resolved to■ Call glDiscardFramebufferEXT on MSAA color buffer
Tile Store
![Page 202: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/202.jpg)
GPUUnified Memory
•Developers do not need MSAA depth buffer
Tile Store
![Page 203: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/203.jpg)
GPUUnified Memory
•Developers do not need MSAA depth buffer■ Also call glDiscardFramebufferEXT on MSAA depth buffer
Tile Store
![Page 204: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/204.jpg)
GPUUnified Memory
•Developers do not need MSAA depth buffer■ Also call glDiscardFramebufferEXT on MSAA depth buffer
Tile Store
![Page 205: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/205.jpg)
Hidden Surface RemovalTaking TBDR into Consideration
•Hidden Surface Removal a unique strength■ Greatly reduces workload■ Certain operation defeat HSR process
■ Enabling blending■ Using discard in shader
![Page 206: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/206.jpg)
•Draw all triangles using discard after drawing triangles that do not■ Hidden Surface Removal used for triangles in opaque group
Taking TBDR into ConsiderationUsing fragment discard and blending
![Page 207: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/207.jpg)
•Draw all triangles using discard after drawing triangles that do not■ Hidden Surface Removal used for triangles in opaque group
Taking TBDR into ConsiderationUsing fragment discard and blending
• Trim geometry needing these operations■ Worth adding more vertices to reduce fragments
![Page 208: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/208.jpg)
Logical Buffer Loads and StoresTaking TBDR into Consideration
• Transfers buffer between memory and GPU are expensive•Avoid Logical Buffer Loads
■ Use glClear so GPU can skip them■ Frequent renderbuffer switches cause tile thrashing
•Avoid Logical Buffer Stores■ Use glDiscardFramebufferEXT■ Especially for multisample anti-aliased buffers
![Page 209: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/209.jpg)
• Calculate texture coordinate in shader■ Sample with texture* function
uniform sampler2D tex;varying vec2 texCoord;varying vec2 offset;...
main(){
vec2 offsetCoord = texCoord + offset;vec4 color = texture(tex, offsetCoord);
...
}
Dependent Texture Sampling
![Page 210: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/210.jpg)
• Calculate texture coordinate in shader■ Sample with texture* function
uniform sampler2D tex;varying vec2 texCoord;varying vec2 offset;...
main(){
vec2 offsetCoord = texCoord + offset;vec4 color = texture(tex, offsetCoord);
...
}
Dependent Texture Sampling
![Page 211: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/211.jpg)
• Calculate texture coordinate in shader■ Sample with texture* function
uniform sampler2D tex;varying vec2 texCoord;varying vec2 offset;...
main(){
vec2 offsetCoord = texCoord + offset;vec4 color = texture(tex, offsetCoord);
...
}
Dependent Texture Sampling
![Page 212: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/212.jpg)
• Calculate texture coordinate in shader■ Sample with texture* function
uniform sampler2D tex;varying vec2 texCoord;varying vec2 offset;...
main(){
vec2 offsetCoord = texCoord + offset;vec4 color = texture(tex, offsetCoord);
...
}
Dependent Texture Sampling
![Page 213: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/213.jpg)
• Calculate texture coordinate in shader■ Sample with texture* function
uniform sampler2D tex;varying vec2 texCoord;varying vec2 offset;...
main(){
vec2 offsetCoord = texCoord + offset;vec4 color = texture(tex, offsetCoord);
...
}
Dependent Texture Sampling
![Page 214: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/214.jpg)
• Calculate texture coordinate in shader■ Sample with texture* function
uniform sampler2D tex;varying vec2 texCoord;varying vec2 offset;...
main(){
vec2 offsetCoord = texCoord + offset;vec4 color = texture(tex, offsetCoord);
...
}
Dependent Texture Sampling
![Page 215: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/215.jpg)
Dependent Texture Sampling
uniform sampler2D tex;varying vec4 packedTexCoords;
...
main(){
vec4 color1 = texture2D(tex, packedTexCoords.xy);vec4 color2 = texture2D(tex, packedTexCoords.zw);
...
}
![Page 216: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/216.jpg)
Dependent Texture Sampling
uniform sampler2D tex;varying vec4 packedTexCoords;
...
main(){
vec4 color1 = texture2D(tex, packedTexCoords.xy);vec4 color2 = texture2D(tex, packedTexCoords.zw);
...
}
![Page 217: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/217.jpg)
Dependent Texture Sampling
uniform sampler2D tex;varying vec4 packedTexCoords;
...
main(){
vec4 color1 = texture2D(tex, packedTexCoords.xy);vec4 color2 = texture2D(tex, packedTexCoords.zw);
...
}
![Page 218: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/218.jpg)
Dependent Texture Sampling
uniform sampler2D tex;varying vec4 packedTexCoords;
...
main(){
vec4 color1 = texture2D(tex, packedTexCoords.xy);vec4 color2 = texture2D(tex, packedTexCoords.zw);
...
}
![Page 219: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/219.jpg)
Dependent Texture Sampling
uniform sampler2D tex;varying vec4 packedTexCoords;
...
main(){
vec4 color1 = texture2D(tex, packedTexCoords.xy);vec4 color2 = texture2D(tex, packedTexCoords.zw);
...
}
![Page 220: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/220.jpg)
Dependent Texture Sampling
•High latency to sample texture in unified memory■ GPU prefetches texture data for nondependent reads
■ Done in rasterization before shader executed■ Cannot prefetch if coordinate calculated in shader
■ Shader stalls, waiting for texture data
•Minimize dependent texture samples■ Hoist calculation
■ Perform coordinate calculation in vertex shader ■ Calculate in app and put in uniform
![Page 221: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/221.jpg)
Dependent Texture Sampling
uniform sampler2D tex;varying vec2 texCoord0;varying vec2 texCoord1;
...
main(){
vec4 color1 = texture2D(tex, texCoord0);vec4 color2 = texture2D(tex, texCoord1);
...
}
![Page 222: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/222.jpg)
Dependent Texture Sampling
uniform sampler2D tex;varying vec2 texCoord0;varying vec2 texCoord1;
...
main(){
vec4 color1 = texture2D(tex, texCoord0);vec4 color2 = texture2D(tex, texCoord1);
...
}
![Page 223: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/223.jpg)
Dependent Texture Sampling
uniform sampler2D tex;varying vec2 texCoord0;varying vec2 texCoord1;
...
main(){
vec4 color1 = texture2D(tex, texCoord0);vec4 color2 = texture2D(tex, texCoord1);
...
}
![Page 224: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/224.jpg)
Dependent Texture Sampling
uniform sampler2D tex;varying vec2 texCoord0;varying vec2 texCoord1;
...
main(){
vec4 color1 = texture2D(tex, texCoord0);vec4 color2 = texture2D(tex, texCoord1);
...
}
![Page 225: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/225.jpg)
A simple example
attribute float testVal;varying float outVal;
...
main(){
if(testVal > 1.0){
outVal = 1.0;}else{
outVal = 0.0;}
...
}
Dynamic Branching
![Page 226: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/226.jpg)
A simple example
attribute float testVal;varying float outVal;
...
main(){
if(testVal > 1.0){
outVal = 1.0;}else{
outVal = 0.0;}
...
}
Dynamic Branching
![Page 227: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/227.jpg)
A simple example
attribute float testVal;varying float outVal;
...
main(){
if(testVal > 1.0){
outVal = 1.0;}else{
outVal = 0.0;}
...
}
Dynamic Branching
![Page 228: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/228.jpg)
A simple example
attribute float testVal;varying float outVal;
...
main(){
if(testVal > 1.0){
outVal = 1.0;}else{
outVal = 0.0;}
...
}
Dynamic Branching
![Page 229: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/229.jpg)
A simple example
attribute float testVal;varying float outVal;
...
main(){
if(testVal > 1.0){
outVal = 1.0;}else{
outVal = 0.0;}
...
}
Dynamic Branching
![Page 230: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/230.jpg)
A simple example
attribute float testVal;varying float outVal;
...
main(){
if(testVal > 1.0){
outVal = 1.0;}else{
outVal = 0.0;}
...
}
Dynamic Branching
![Page 231: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/231.jpg)
Dynamic Branching
•GPUs are highly parallel devices■ Process multiple vertices and fragments simultaneously
• Special branch mode for execution■ More latency to stay in sync
• If possible, calculate predicate outside of shader■ Branches on uniforms do not incur same overhead
![Page 232: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/232.jpg)
Dynamic Branching
•GPUs are highly parallel devices■ Process multiple vertices and fragments simultaneously
• Special branch mode for execution■ More latency to stay in sync
• If possible, calculate predicate outside of shader■ Branches on uniforms do not incur same overhead
• Shaders using both Dependent Texture Sampling and Dynamic Branching are particularly costly
![Page 233: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/233.jpg)
Managing draw callsMinimizing CPU Overhead
![Page 234: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/234.jpg)
•Most CPU overhead in draw calls•More state set for draw, more expensive draw
■ State setting looks inexpensive ■ Work for state set deferred until draw
Optimizing Draw Call Performance
![Page 235: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/235.jpg)
•Most CPU overhead in draw calls•More state set for draw, more expensive draw
■ State setting looks inexpensive ■ Work for state set deferred until draw
Optimizing Draw Call Performance
•Maximize efficiency of each draw
![Page 236: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/236.jpg)
•Maximize efficiency of each draw
•Most CPU overhead in draw calls•More state set for draw, more expensive draw
■ State setting looks inexpensive ■ Work for state set deferred until draw
Optimizing Draw Call Performance
![Page 237: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/237.jpg)
•Maximize efficiency of each draw
•Most CPU overhead in draw calls•More state set for draw, more expensive draw
■ State setting looks inexpensive ■ Work for state set deferred until draw
Optimizing Draw Call Performance
![Page 238: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/238.jpg)
• Reduce inefficient state setting■ Shadow state■ Sort state
•Maximize efficiency of each draw
•Most CPU overhead in draw calls•More state set for draw, more expensive draw
■ State setting looks inexpensive ■ Work for state set deferred until draw
Optimizing Draw Call Performance
![Page 239: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/239.jpg)
Optimizing Draw Call Performance
• Some fixed overhead for draw■ State validation■ Call to driver
![Page 240: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/240.jpg)
Optimizing Draw Call Performance
• Some fixed overhead for draw■ State validation■ Call to driver
•Minimize number of draw calls made■ Object culling■ Coalesce calls
■ Instancing■ Vertex batching■ Texture atlases
![Page 241: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/241.jpg)
Texture AtlasesBind and draw
![Page 242: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/242.jpg)
Texture AtlasesBind and draw
![Page 243: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/243.jpg)
Texture AtlasesBind and draw
![Page 244: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/244.jpg)
Texture AtlasesBind and draw
![Page 245: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/245.jpg)
Texture AtlasesBind and draw
![Page 246: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/246.jpg)
Texture AtlasesBind and draw
![Page 247: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/247.jpg)
Texture AtlasesBind and draw
![Page 248: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/248.jpg)
Texture AtlasesBind and draw
![Page 249: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/249.jpg)
Texture AtlasesBind and draw
![Page 250: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/250.jpg)
Texture AtlasesBind and draw
![Page 251: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/251.jpg)
Texture AtlasesReducing binds
![Page 252: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/252.jpg)
Texture AtlasesReducing binds
![Page 253: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/253.jpg)
Texture AtlasesReducing binds
![Page 254: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/254.jpg)
Texture AtlasesReducing binds
![Page 255: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/255.jpg)
Texture AtlasesReducing binds
![Page 256: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/256.jpg)
Texture AtlasesReducing binds
![Page 257: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/257.jpg)
Texture AtlasesCombining draws
![Page 258: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/258.jpg)
Texture AtlasesCombining draws
![Page 259: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/259.jpg)
Texture AtlasesCombining draws
![Page 260: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/260.jpg)
Sprite Kit texture atlas toolTexture Atlases
• Combines images efficiently• Produces property list denoting sub-images
■ Scale texture coordinates based on plist
• ‘TextureAtlas’ command line tool in Xcode
![Page 261: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/261.jpg)
More Information
Allan SchafferGraphics and Game Technologies [email protected]
DocumentationOpenGL ES Programming Guide for iOShttps://developer.apple.com/opengles
Apple Developer Forumshttp://devforums.apple.com
![Page 262: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/262.jpg)
What’s New in OpenGL for OS X MarinaThursday 2:00PM
Related Sessions
Introduction to Sprite Kit PresidioWednesday 11:30AM
![Page 263: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/263.jpg)
Labs
Sprite Kit Lab Graphics and Games Lab BThursday 9:00AM
OpenGL and OpenGL ES Lab Graphics and Games Lab AThursday 10:15AM
![Page 264: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/264.jpg)
Summary
• Reduce draw call overhead■ Use techniques including instancing and texture atlases
• Consider GPU’s operation when architecting your renderer and in performance investigations■ GPU tools help greatly■ Tile-Based Deferred Rendering has some special consideration
![Page 265: Advances in OpenGL ES - IT168topic.it168.com/factory/WWDC2013/47.pdfThese are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 505 Advances](https://reader030.fdocuments.in/reader030/viewer/2022011817/5e8116ba9e34d90052504921/html5/thumbnails/265.jpg)