Embed Size (px)
Citation preview
OpenGL-ES 3.0 And Beyond Boston 20141 Photo credit :Johnson Cameraface
OpenGL Basics
OpenGL-ES 3.0 And Beyond Boston 20142
OpenGL-ES Basics
How to draw stuffHow to draw stuff• Use the OS to create the display
How to draw stuff• Use the OS to create the display
• Connect the display to OpenGL
How to draw stuff• Use the OS to create the display
• Connect the display to OpenGL
• Initialization Steps– Load resources
– Models, images, shaders, etc.
How to draw stuff• Use the OS to create the display
• Connect the display to OpenGL
• Initialization Steps– Load resources
– Models, images, shaders, etc.
• Rendering Steps– Iterate through each visible object, making OpenGL
state and rendering calls as needed
How to draw stuff• Use the OS to create the display
• Connect the display to OpenGL
• Initialization Steps– Load resources
– Models, images, shaders, etc.
• Rendering Steps– Iterate through each visible object, making OpenGL
state and rendering calls as needed
• Process Any Input
How to draw stuff• Use the OS to create the display
• Connect the display to OpenGL
• Initialization Steps– Load resources
– Models, images, shaders, etc.
• Rendering Steps– Iterate through each visible object, making OpenGL
state and rendering calls as needed
• Process Any Input
• Update object state based upon input or elapsed time
How to draw stuff• Use the OS to create the display
• Connect the display to OpenGL
• Initialization Steps– Load resources
– Models, images, shaders, etc.
• Rendering Steps– Iterate through each visible object, making OpenGL
state and rendering calls as needed
• Process Any Input
• Update object state based upon input or elapsed time
• Cleanup - release resources, disconnect OpenGL
OpenGL-ES 3.0 And Beyond Boston 20143
OpenGL-ES Basics
OpenGL is a State Machine
OpenGL is a state machine – in other words, it takes direct action by the user to change state.
State changes are serial.
The state is stored in the OpenGL context.
State is: Active textures, active shaders, current vertex and index data, active render targets, shader uniforms, culling settings, winding order, raster operations, active stencil operations, blending, texture filtering, depth testing, etc. etc. etc.
When you make a render call, what gets rendered depends upon what state was active at that time.
OpenGL-ES 3.0 And Beyond Boston 20144
OpenGL is a State Machine
OpenGL-ES Basics
OpenGL is a State Machine
OpenGL is a state machine – in other words, it takes direct action by the user to change state.
State changes are serial.
The state is stored in the OpenGL context.
State is: Active textures, active shaders, current vertex and index data, active render targets, shader uniforms, culling settings, winding order, raster operations, active stencil operations, blending, texture filtering, depth testing, etc. etc. etc.
When you make a render call, what gets rendered depends upon what state was active at that time.
Do not forget this….
OpenGL-ES 3.0 And Beyond Boston 20145
OpenGL-ES Basics
Rendering an object
Assuming that all vertex, texture data is loaded:
1. Set the state for the object.a) Position and Projection
– Set the model transformation and projection matricies– (vertex shader)
b) Shading– Lighting parameters, materials, blending– (fragment shader)
c) Misc. state– Winding order, stencil, viewport, etc.– (glEnable/glDisable, etc.)
2. Invoke a render call
OpenGL-ES 3.0 And Beyond Boston 20146
OpenGL-ES 2.0/3.0 Pipeline
PrimitiveDrawProcessing
VertexProcessing Vertex
PrimitiveProcessing
RasterizationFragment
ProcessingFragmentPixel
ProcessingPixel
Image
VertexShader
FragmentShader
no stream/discard
fail/discard no write
AP
I C
ALL
OpenGL-ES 3.0 And Beyond Boston 20147
3D Math overview
OpenGL-ES 3.0 And Beyond Boston 20148
World Coordinates
Each object starts off in it’s own 3D coordinate system
Object Coordinates Eye Coordinates
View MatrixModel Matrix
Down the pipeline - Viewing the scene
OpenGL-ES 3.0 And Beyond Boston 20149
For multiple objects, they need to be set into world coordinates through the use of the Model Matrix
Object Coordinates World Coordinates Eye Coordinates
View MatrixModel Matrix
Down the pipeline - Viewing the scene
OpenGL-ES 3.0 And Beyond Boston 201410
After the transformation, the are all in the same coordinate system – World Coordinates
World CoordinatesObject Coordinates Eye Coordinates
View MatrixModel Matrix
Down the pipeline - Viewing the scene
OpenGL-ES 3.0 And Beyond Boston 201411
Eye Coordinates
Then we use the View Matrix to put everything relative to the eye
World CoordinatesObject Coordinates World Coordinates Eye Coordinates
View MatrixModel Matrix
Down the pipeline - Viewing the scene
OpenGL-ES 3.0 And Beyond Boston 201412
Eye Coordinates
Then we use the View Matrix to put everything relative to the eye
World CoordinatesObject Coordinates World Coordinates Eye Coordinates
View MatrixModel Matrix
Down the pipeline - Viewing the scene
OpenGL-ES 3.0 And Beyond Boston 201414
Shader Overview
OpenGL ES: 2 programmable stages - “shaders”.• Vertex Shader: Convert vertex position into “eye
space” – called for each vertex in a primitive
• Fragment Shader: Compute color of fragment – called for each fragment (i.e. pixel)
A primitive is created from vertices in 3D space
A Fragment is aligned to
the pixel grid.
OpenGL-ES 3.0 And Beyond Boston 201415
Vertex Shaders
The Vertex Shader is the programmable shader stage in the rendering pipeline that handles the processing of individual vertices.
The Vertex Shader takes Vertex Attribute data, process one vertex at a time and generates one output vertices.
Vertex shaders typically perform transformations to post-projection space, for consumption later rendering stages.
They can also be used to do per-vertex lighting, or to perform setup work for later shader stages. Any per-vertex calculations can be done in a vertex shader.
OpenGL-ES 3.0 And Beyond Boston 201416
Vertex Shader (OpenGL-ES-3.0)
#version 300 es
layout (location = 0) in highp vec3 a_Position;layout (location = 1) in mediump vec4 a_Color;
out mediump vec4 v_color;uniform mat4 u_MVP;
void main() { gl_Position = u_MVP * vec4(a_Position, 1.0); v_color = a_Color;}
OpenGL-ES 3.0 And Beyond Boston 201417
Vertex Shader
#version 300 es
layout (location = 0) in highp vec3 a_Position;layout (location = 1) in mediump vec4 a_Color;
out mediump vec4 v_color;uniform mat4 u_MVP;
void main() { gl_Position = u_MVP * vec4(a_Position, 1.0); v_color = a_Color;}
OpenGL-ES 3.0 And Beyond Boston 201418
Vertex Shader
#version 300 es
layout (location = 0) in highp vec3 a_Position;layout (location = 1) in mediump vec4 a_Color;
out mediump vec4 v_color;uniform mat4 u_MVP;
void main() { gl_Position = u_MVP * vec4(a_Position, 1.0); v_color = a_Color;}
OpenGL-ES 3.0 And Beyond Boston 201419
Vertex Shader
#version 300 es
layout (location = 0) in highp vec3 a_Position;layout (location = 1) in mediump vec4 a_Color;
out mediump vec4 v_color;uniform mat4 u_MVP;
void main() { gl_Position = u_MVP * vec4(a_Position, 1.0); v_color = a_Color;}
OpenGL-ES 3.0 And Beyond Boston 201420
Vertex Shader
Application code
Shader code
glVertexAttribPointer(0,3,GL_FLOAT,GL_FALSE,i,vdata);glVertexAttribPointer(1,4,GL_FLOAT,GL_FALSE,i,vdata+3);
glEnableVertexAttribArray( 0 );glEnableVertexAttribArray( 1 );
#version 300 es
layout (location = 0) in highp vec3 a_Position;layout (location = 1) in mediump vec4 a_Color;
OpenGL-ES 3.0 And Beyond Boston 201421
Vertex Shader
glVertexAttribPointer(0,3,GL_FLOAT,GL_FALSE,i,vdata);glVertexAttribPointer(1,4,GL_FLOAT,GL_FALSE,i,vdata+3);
glEnableVertexAttribArray( 0 );glEnableVertexAttribArray( 1 );
#version 300 es
layout (location = 0) in highp vec3 a_Position;layout (location = 1) in mediump vec4 a_Color;
Application code
Shader code
OpenGL-ES 3.0 And Beyond Boston 201422
Vertex Shader
glVertexAttribPointer(0,3,GL_FLOAT,GL_FALSE,i,vdata);glVertexAttribPointer(1,4,GL_FLOAT,GL_FALSE,i,vdata+3);
glEnableVertexAttribArray( 0 );glEnableVertexAttribArray( 1 );
#version 300 es
layout (location = 0) in highp vec3 a_Position;layout (location = 1) in mediump vec4 a_Color;
Application code
Shader code
OpenGL-ES 3.0 And Beyond Boston 201423
Vertex Shader
#version 300 es
layout (location = 0) in highp vec3 a_Position;layout (location = 1) in mediump vec4 a_Color;
out mediump vec4 v_color;uniform mat4 u_MVP;
void main() { gl_Position = u_MVP * vec4(a_Position, 1.0); v_color = a_Color;}
OpenGL-ES 3.0 And Beyond Boston 201424
Vertex Shader
#version 300 es
layout (location = 0) in highp vec3 a_Position;layout (location = 1) in mediump vec4 a_Color;
out mediump vec4 v_color;uniform mat4 u_MVP;
void main() { gl_Position = u_MVP * vec4(a_Position, 1.0); v_color = a_Color;}
OpenGL-ES 3.0 And Beyond Boston 201425
Vertex Shader
#version 300 es
layout (location = 0) in highp vec3 a_Position;layout (location = 1) in mediump vec4 a_Color;
out mediump vec4 v_color;uniform mat4 u_MVP;
void main() { gl_Position = u_MVP * vec4(a_Position, 1.0); v_color = a_Color;}
OpenGL-ES 3.0 And Beyond Boston 201426
Vertex Shader
#version 300 es
layout (location = 0) in highp vec3 a_Position;layout (location = 1) in mediump vec4 a_Color;
out mediump vec4 v_color;uniform mat4 u_MVP;
void main() { gl_Position = u_MVP * vec4(a_Position, 1.0); v_color = a_Color;}
OpenGL-ES 3.0 And Beyond Boston 201427
Vertex Shader
#version 300 es
layout (location = 0) in highp vec3 a_Position;layout (location = 1) in mediump vec4 a_Color;
out mediump vec4 v_color;uniform mat4 u_MVP;
void main() { gl_Position = u_MVP * vec4(a_Position, 1.0); v_color = a_Color;}
OpenGL-ES 3.0 And Beyond Boston 201428
Vertex Shader
#version 300 es
layout (location = 0) in highp vec3 a_Position;layout (location = 1) in mediump vec4 a_Color;
out mediump vec4 v_color;uniform mat4 u_MVP;
void main() { gl_Position = u_MVP * vec4(a_Position, 1.0); v_color = a_Color;}
OpenGL-ES 3.0 And Beyond Boston 201429
Vertex Shader
#version 300 es
layout (location = 0) in highp vec3 a_Position;layout (location = 1) in mediump vec4 a_Color;
out mediump vec4 v_color;uniform mat4 u_MVP;
void main() { gl_Position = u_MVP * vec4(a_Position, 1.0); v_color = a_Color;}
OpenGL-ES 3.0 And Beyond Boston 201430
Vertex Shader Fragment Shader
Overview
The vertex shader is responsible for converting input vertices into projected out vertices.
Eventually the rasterization engine will convert these vertices into interpolated pixel locations for processing by the fragment shader.
A primitive is created from vertices in 3D space
A Fragment is aligned to the pixel grid.
OpenGL-ES 3.0 And Beyond Boston 201431
Vertex Shader Fragment Shader
Interpolation
The rasterization step is how the pipeline gets from vertices to pixels.
The vertex shader converts input to output vertices.
The rasterizer converts the transformed primitives to pixel-grid fragments.
The fragment shader get run – ONCE FOR EACH FRAGMENT. Potentially millions of times!
OpenGL-ES 3.0 And Beyond Boston 201432
Rasterization & Interpolation
OpenGL-ES 3.0 And Beyond Boston 201433
Fragment Shader
#version 300 es
precision mediump float;
in mediump vec4 v_color;
layout (location = 0) out lowp vec4 o_Color;
void main() { o_Color = v_color;}
OpenGL-ES 3.0 And Beyond Boston 201434
Vertex Shader
#version 300 es
layout (location = 0) in highp vec3 a_Position;layout (location = 1) in mediump vec4 a_Color;
out mediump vec4 v_color;uniform mat4 u_MVP;
void main() { gl_Position = u_MVP * vec4(a_Position, 1.0); v_color = a_Color;}
OpenGL-ES 3.0 And Beyond Boston 201435
Fragment Shader
#version 300 es
precision mediump float;
in mediump vec4 v_color;
layout (location = 0) out lowp vec4 o_Color;
void main() { o_Color = v_color;}
OpenGL-ES 3.0 And Beyond Boston 201436
Fragment Shader
#version 300 es
precision mediump float;
in mediump vec4 v_color;
layout (location = 0) out lowp vec4 o_Color;
void main() { o_Color = v_color;}
OpenGL-ES 3.0 And Beyond Boston 201437
Fragment Shader
#version 300 es
precision mediump float;
in mediump vec4 v_color;
layout (location = 0) out lowp vec4 o_Color;
void main() { o_Color = v_color;}
OpenGL-ES 3.0 And Beyond Boston 201438
Fragment Shader
#version 300 es
precision mediump float;
in mediump vec4 v_color;
layout (location = 0) out lowp vec4 o_Color;
void main() { o_Color = v_color;}
OpenGL-ES 3.0 And Beyond Boston 201439
Fragment Shader
#version 300 es
precision mediump float;
in mediump vec4 v_color;
layout (location = 0) out lowp vec4 o_Color;
void main() { o_Color = v_color;}
OpenGL-ES 3.0 And Beyond Boston 201440
Fragment Shader
#version 300 es
precision mediump float;
in mediump vec4 v_color;
layout (location = 0) out lowp vec4 o_Color;
void main() { o_Color = v_color;}
OpenGL-ES 3.0 And Beyond Boston 201441
Vertex Shader
#version 300 es
layout (location = 0) in highp vec3 a_Position;layout (location = 1) in mediump vec4 a_Color;
out mediump vec4 v_color;uniform mat4 u_MVP;
void main() { gl_Position = u_MVP * vec4(a_Position, 1.0); v_color = a_Color;}
OpenGL-ES 3.0 And Beyond Boston 201442
Vertex Shader
#version 300 es
layout (location = 0) in highp vec3 a_Position;layout (location = 1) in mediump vec4 a_Color;
out mediump vec4 v_color;uniform mat4 u_MVP;
void main() { gl_Position = u_MVP * vec4(a_Position, 1.0); v_color = a_Color;}
smoothsmoothflat
OpenGL-ES 3.0 And Beyond Boston 201443
Fragment Shader
#version 300 es
precision mediump float;
flat in mediump vec4 v_color;
layout (location = 0) out lowp vec4 o_Color;
void main() { o_Color = v_color;}
