OpenGL-ES 3.0 And Beyond Boston Photo credit :Johnson Cameraface OpenGL Basics

OpenGL-ES 3.0 And Beyond Boston OpenGL-ES Basics How 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 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 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 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 OpenGL-ES 2.0/3.0 Pipeline Primitive Draw Processing Vertex Processing Vertex Primitive Processing Rasterization Fragment Processing Fragment Pixel Processing Pixel Image Vertex Shader Fragment Shader no stream/ discard fail/discard no write API CALL

OpenGL-ES 3.0 And Beyond Boston D Math overview

OpenGL-ES 3.0 And Beyond Boston World Coordinates Each object starts off in it’s own 3D coordinate system Object CoordinatesEye Coordinates View Matrix Model Matrix Down the pipeline - Viewing the scene

OpenGL-ES 3.0 And Beyond Boston For multiple objects, they need to be set into world coordinates through the use of the Model Matrix Object CoordinatesWorld CoordinatesEye Coordinates View Matrix Model Matrix Down the pipeline - Viewing the scene

OpenGL-ES 3.0 And Beyond Boston After the transformation, the are all in the same coordinate system – World Coordinates World CoordinatesObject CoordinatesEye Coordinates View Matrix Model Matrix Down the pipeline - Viewing the scene

OpenGL-ES 3.0 And Beyond Boston Eye Coordinates Then we use the View Matrix to put everything relative to the eye World CoordinatesObject CoordinatesWorld CoordinatesEye Coordinates View Matrix Model Matrix Down the pipeline - Viewing the scene

OpenGL-ES 3.0 And Beyond Boston Eye Coordinates Then we use the View Matrix to put everything relative to the eye World CoordinatesObject CoordinatesWorld CoordinatesEye Coordinates View Matrix Model Matrix Down the pipeline - Viewing the scene

OpenGL-ES 3.0 And Beyond Boston World Coordinates For multiple objects, they need to be set into world coordinates through the use of the Model Matrix Object CoordinatesWorld CoordinatesEye Coordinates View Matrix Model Matrix Down the pipeline - Viewing the scene

OpenGL-ES 3.0 And Beyond Boston 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 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 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 vec4v_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 Vertex Shader #version 300 es layout (location = 0) in highp vec3 a_Position; layout (location = 1) in mediump vec4 a_Color; out mediump vec4v_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 Vertex Shader #version 300 es layout (location = 0) in highp vec3 a_Position; layout (location = 1) in mediump vec4 a_Color; out mediump vec4v_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 Vertex Shader #version 300 es layout (location = 0) in highp vec3 a_Position; layout (location = 1) in mediump vec4 a_Color; out mediump vec4v_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 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 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 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 Vertex Shader #version 300 es layout (location = 0) in highp vec3 a_Position; layout (location = 1) in mediump vec4 a_Color; out mediump vec4v_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 Vertex Shader #version 300 es layout (location = 0) in highp vec3 a_Position; layout (location = 1) in mediump vec4 a_Color; out mediump vec4v_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 Vertex Shader #version 300 es layout (location = 0) in highp vec3 a_Position; layout (location = 1) in mediump vec4 a_Color; out mediump vec4v_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 Vertex Shader #version 300 es layout (location = 0) in highp vec3 a_Position; layout (location = 1) in mediump vec4 a_Color; out mediump vec4v_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 Vertex Shader #version 300 es layout (location = 0) in highp vec3 a_Position; layout (location = 1) in mediump vec4 a_Color; out mediump vec4v_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 Vertex Shader #version 300 es layout (location = 0) in highp vec3 a_Position; layout (location = 1) in mediump vec4 a_Color; out mediump vec4v_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 Vertex Shader #version 300 es layout (location = 0) in highp vec3 a_Position; layout (location = 1) in mediump vec4 a_Color; out mediump vec4v_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 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 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 Rasterization & Interpolation

OpenGL-ES 3.0 And Beyond Boston 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 Vertex Shader #version 300 es layout (location = 0) in highp vec3 a_Position; layout (location = 1) in mediump vec4 a_Color; out mediump vec4v_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 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 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 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 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 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 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 Vertex Shader #version 300 es layout (location = 0) in highp vec3 a_Position; layout (location = 1) in mediump vec4 a_Color; out mediump vec4v_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 Vertex Shader #version 300 es layout (location = 0) in highp vec3 a_Position; layout (location = 1) in mediump vec4 a_Color; out mediump vec4v_color; uniform mat4 u_MVP; void main() { gl_Position = u_MVP * vec4(a_Position, 1.0); v_color = a_Color; } smooth flat

OpenGL-ES 3.0 And Beyond Boston 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; }