Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Published byAnnabelle Gertrude McCarthy Modified over 9 years ago

Similar presentations

Presentation on theme: "OpenGL-ES 3.0 And Beyond Boston 2014 1 Photo credit :Johnson Cameraface OpenGL Basics."— Presentation transcript:

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

2 OpenGL-ES 3.0 And Beyond Boston 2014 2 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

3 OpenGL-ES 3.0 And Beyond Boston 2014 3 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.

4 OpenGL-ES 3.0 And Beyond Boston 2014 4 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….

5 OpenGL-ES 3.0 And Beyond Boston 2014 5 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

6 OpenGL-ES 3.0 And Beyond Boston 2014 6 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

7 OpenGL-ES 3.0 And Beyond Boston 2014 7 3D Math overview

8 OpenGL-ES 3.0 And Beyond Boston 2014 8 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

9 OpenGL-ES 3.0 And Beyond Boston 2014 9 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

10 OpenGL-ES 3.0 And Beyond Boston 2014 10 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

11 OpenGL-ES 3.0 And Beyond Boston 2014 11 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

12 OpenGL-ES 3.0 And Beyond Boston 2014 12 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

13 OpenGL-ES 3.0 And Beyond Boston 2014 13 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

14 OpenGL-ES 3.0 And Beyond Boston 2014 14 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.

15 OpenGL-ES 3.0 And Beyond Boston 2014 15 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.

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

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

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

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

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

21 OpenGL-ES 3.0 And Beyond Boston 2014 21 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

22 OpenGL-ES 3.0 And Beyond Boston 2014 22 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

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

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

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

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

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

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

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

30 OpenGL-ES 3.0 And Beyond Boston 2014 30 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.

31 OpenGL-ES 3.0 And Beyond Boston 2014 31 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!

32 OpenGL-ES 3.0 And Beyond Boston 2014 32 Rasterization & Interpolation

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

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

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

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

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

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

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

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

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

42 OpenGL-ES 3.0 And Beyond Boston 2014 42 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

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

Download ppt "OpenGL-ES 3.0 And Beyond Boston 2014 1 Photo credit :Johnson Cameraface OpenGL Basics."

Similar presentations

COMPUTER GRAPHICS SOFTWARE.

COMPUTER GRAPHICS SOFTWARE.
Understanding the graphics pipeline Lecture 2 Original Slides by: Suresh Venkatasubramanian Updates by Joseph Kider.

Understanding the graphics pipeline Lecture 2 Original Slides by: Suresh Venkatasubramanian Updates by Joseph Kider.
Graphics Pipeline.

Graphics Pipeline.
Status – Week 257 Victor Moya. Summary GPU interface. GPU interface. GPU state. GPU state. API/Driver State. API/Driver State. Driver/CPU Proxy. Driver/CPU.

Status – Week 257 Victor Moya. Summary GPU interface. GPU interface. GPU state. GPU state. API/Driver State. API/Driver State. Driver/CPU Proxy. Driver/CPU.
CS 4363/6353 BASIC RENDERING. THE GRAPHICS PIPELINE OVERVIEW Vertex Processing Coordinate transformations Compute color for each vertex Clipping and Primitive.

CS 4363/6353 BASIC RENDERING. THE GRAPHICS PIPELINE OVERVIEW Vertex Processing Coordinate transformations Compute color for each vertex Clipping and Primitive.
Computer Graphic Creator: Mohsen Asghari Session 2 Fall 2014.

Computer Graphic Creator: Mohsen Asghari Session 2 Fall 2014.
Informationsteknologi Wednesday, December 12, 2007Computer Graphics - Class 171 Today’s class OpenGL Shading Language.

Informationsteknologi Wednesday, December 12, 2007Computer Graphics - Class 171 Today’s class OpenGL Shading Language.
MAT 594CM S2010Fundamentals of Spatial ComputingAngus Forbes Overview Today: - Make sure everyone is set up with an OpenGL environment - OpenGL basics:

MAT 594CM S2010Fundamentals of Spatial ComputingAngus Forbes Overview Today: - Make sure everyone is set up with an OpenGL environment - OpenGL basics:
Status – Week 277 Victor Moya.

Status – Week 277 Victor Moya.
Status – Week 283 Victor Moya. 3D Graphics Pipeline Akeley & Hanrahan course. Akeley & Hanrahan course. Fixed vs Programmable. Fixed vs Programmable.

Status – Week 283 Victor Moya. 3D Graphics Pipeline Akeley & Hanrahan course. Akeley & Hanrahan course. Fixed vs Programmable. Fixed vs Programmable.
The Graphics Pipeline CS2150 Anthony Jones. Introduction What is this lecture about? – The graphics pipeline as a whole – With examples from the video.

The Graphics Pipeline CS2150 Anthony Jones. Introduction What is this lecture about? – The graphics pipeline as a whole – With examples from the video.
The programmable pipeline Lecture 10 Slide Courtesy to Dr. Suresh Venkatasubramanian.

The programmable pipeline Lecture 10 Slide Courtesy to Dr. Suresh Venkatasubramanian.
1 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Models and Architectures Ed Angel Professor of Computer Science, Electrical and Computer.

1 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Models and Architectures Ed Angel Professor of Computer Science, Electrical and Computer.
Computer Graphics: Programming, Problem Solving, and Visual Communication Steve Cunningham California State University Stanislaus and Grinnell College.

Computer Graphics: Programming, Problem Solving, and Visual Communication Steve Cunningham California State University Stanislaus and Grinnell College.
GAM532 DPS932 – Week 1 Rendering Pipeline and Shaders.

GAM532 DPS932 – Week 1 Rendering Pipeline and Shaders.
Michael Robertson Yuta Takayama. WebGL is OpenGL on a web browser. OpenGL is a low-level 3D graphics API Basically, WebGL is a 3D graphics API that generates.

Michael Robertson Yuta Takayama. WebGL is OpenGL on a web browser. OpenGL is a low-level 3D graphics API Basically, WebGL is a 3D graphics API that generates.
REAL-TIME VOLUME GRAPHICS Christof Rezk Salama Computer Graphics and Multimedia Group, University of Siegen, Germany Eurographics 2006 Real-Time Volume.

REAL-TIME VOLUME GRAPHICS Christof Rezk Salama Computer Graphics and Multimedia Group, University of Siegen, Germany Eurographics 2006 Real-Time Volume.
Geometry Shaders. Visualizing Normal Vectors  textbook calls this a “hedgehog plot” but (I think) that this is a misuse of the term  a hedgehog plot.

Geometry Shaders. Visualizing Normal Vectors  textbook calls this a “hedgehog plot” but (I think) that this is a misuse of the term  a hedgehog plot.
What is ? Open Graphics Library A cross-language, multi-platform API for rendering 2D and 3D computer graphics. The API is used to interact with a Graphics.

What is ? Open Graphics Library A cross-language, multi-platform API for rendering 2D and 3D computer graphics. The API is used to interact with a Graphics.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.

1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.

Similar presentations

Ads by Google