Converts geometric primitives into images Is split into several independent stages Those are usually executed concurrently

Transcription

1 Rendering Pipeline

2 Rendering Pipeline Converts geometric primitives into images Is split into several independent stages Those are usually executed concurrently Pipeline Steiner- Wallner- Podaras 2

3 The real pipeline Steiner- Wallner- Podaras 3

4 OpenGL Pipeline Vertex Processing Primitive Assembly Polygon Clipping Homogenization Viewport Transformation Rasterization Fragment Processing Depth Test Steiner- Wallner- Podaras 4

5 Let s draw a triangle Step One: Transform vertices Call vertex shader for each vertex Vertex Processing Primitive Assembly Polygon Clipping Homogenization Viewport Transform. Rasterization Fragment Processing Depth Test Steiner- Wallner- Podaras 5

6 Let s draw a triangle Step Two: Primitive Assembly Collect vertices to build a primitive Vertex Processing Primitive Assembly Polygon Clipping Homogenization Viewport Transform. Rasterization Fragment Processing Depth Test Steiner- Wallner- Podaras 6

7 Let s draw a triangle Step Three: Polygon Clipping Remove all parts outside of the screen Interpolate new points Vertex Processing Primitive Assembly Polygon Clipping Homogenization Viewport Transform. Rasterization Fragment Processing Depth Test Steiner- Wallner- Podaras 7

8 Let s draw a triangle Step Four: Homogenization Apply perspective division Vertex Processing Primitive Assembly Polygon Clipping Homogenization Viewport Transform. Rasterization Fragment Processing Depth Test Steiner- Wallner- Podaras 8

9 Let s draw a triangle Step Five: Viewport Transform Convert screen coordinates to pixel positions Vertex Processing Primitive Assembly Polygon Clipping Homogenization Viewport Transform. Rasterization Fragment Processing Depth Test Steiner- Wallner- Podaras 9

10 Let s draw a triangle Step Five: Viewport Transform Convert screen coordinates to pixel positions Vertex Processing Primitive Assembly Polygon Clipping Homogenization Viewport Transform. Rasterization Fragment Processing Depth Test Steiner- Wallner- Podaras 10

11 Let s draw a triangle Step Six: Rasterization Find pixels inside primitive Call fragment shader for each pixel Set pixel color to fragment shader result Vertex Processing Primitive Assembly Polygon Clipping Homogenization Viewport Transform. Rasterization Fragment Processing Depth Test Steiner- Wallner- Podaras 11

12 Let s draw a triangle Step Seven: Z-Test Compare depth before storing pixel color Vertex Processing Primitive Assembly Polygon Clipping Homogenization Viewport Transform. Rasterization Fragment Processing Depth Test Steiner- Wallner- Podaras 12

13 Depth Buffering Draw result depend on order of render calls Blue - > Red - > Green Green - > Red - > Blue Steiner- Wallner- Podaras 13

14 Depth Buffering Draw result depend on order of render calls Blue - > Red - > Green Green - > Red - > Blue BeKer: Order polygons by their depth Steiner- Wallner- Podaras 14

15 Depth Buffer AddiPonal Screen- Buffer that stores depth values Write pixel only when new depth is smaller than stored depth Need to enable and clear depth buffer too gl.enable(gl.depth_test); gl.clear(gl.color_buffer_bit gl.depth_buffer_bit); Steiner- Wallner- Podaras 15

16 Shader Small C- like programs executed on the graphics- hardware Replace fixed funcpon (OpenGL < 3.0) pipeline with shaders Shader- Types Vertex Shader Fragment Shader Geometry Shader, TessellaPon Shader, Compute Shader Used e.g. for transformapons and lighpng Steiner- Wallner- Podaras 16

17 Shader Vertex Processing Vertex Shader Primitive Assembly Polygon Clipping Homogenization varyings Viewport Transformation Rasterization Fragment Processing Fragment Shader Depth Test Steiner- Wallner- Podaras 17

18 Shader Vertex Processing Primitive Assembly Vertex Shader Geometry Shader Polygon Clipping Homogenization Viewport Transformation Rasterization Fragment Processing Fragment Shader Depth Test Steiner- Wallner- Podaras 18

19 Shader Vertex Shader Called once for each vertex Fragment Shader Called once for each pixel inside a surface Steiner- Wallner- Podaras 19

20 AKributes/Varyings Draw Call Vertex Shader attribute vec3 position attribute vec2 uv varying vec2 fragmentuv gl_position Fragment Shader gl_fragcolor Draw Buffer Steiner- Wallner- Podaras 20

21 AKributes/Varyings Pass data from one shader/pipeline stage to the next A>ribute: from Draw Call to Vertex Shader Varying: from Vertex Shader to Fragment Shader from Fragment Shader to Draw Buffer Global variables with varying/attribute qualifier Correct interpoladon between stages Steiner- Wallner- Podaras 21

22 Parameter interpolapon // vertex shader varying vec2 fragmentuv; //... InterpolaDon // fragment shader varying vec2 fragmentuv; // Steiner- Wallner- Podaras 22

23 Our first shader Vertex Shader Takes akributes from draw call Should set gl_position attribute vec4 position; void main() { gl_position = position; } Steiner- Wallner- Podaras 23

24 Our first shader Fragment Shader Takes interpolated varyings Should write to gl_fragcolor precision mediump float; void main() { gl_fragcolor = vec4(0.6, 0.85, 0.95, 1.0); } Steiner- Wallner- Podaras 24

25 Shader execupon model Shader- Source- Code OpenGL- API ApplicaDon OpenGL- Driver Compiler Shader- Object compiled code Linker Program- Object Graphics- Hardware executable code Steiner- Wallner- Podaras 25

26 Lets start with some code Send HTTP GET Request to load shader file request.open('get', path); request.onreadystatechange = function() { if (request.readystate === this.done) { if (request.status === 200) { callback(request.responsetext); } else { //Error Handling } } }; request.send(); Steiner- Wallner- Podaras 26

27 Shader Loading Generate shader object var shader = gl.createshader(type); Type can be gl.vertex_shader or gl.fragment_shader Upload code to shader object gl.shadersource(shader, src); Steiner- Wallner- Podaras 27

28 Shader Compiling Compile shader gl.compileshader(shader); And test for errors if (!gl.getshaderparameter(shader, gl.compile_status)) { //Handle errors } Steiner- Wallner- Podaras 28

29 Shader Program CombinaPon of Vertex and Fragment Shader Object program = gl.createprogram(); AKach Shader Objects gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); Steiner- Wallner- Podaras 29

30 Shader Linking Link shader program aher akaching shaders gl.linkprogram(program); And check for errors if (!gl.getprogramparameter(program, gl.link_status)) { var infolog = gl.getprograminfolog(program); } Steiner- Wallner- Podaras 30

31 Webserver HTTP Request can only be handled by Server Accessing Textures etc. not possible on local machine due to security reasons. Python provides you with an simple HTTP Server $ python - m SimpleHTTPServer [PORT] Steiner- Wallner- Podaras 31

32 Webserver Access Server A>enDon: Webserver could cache files! Steiner- Wallner- Podaras 32

33 Big DEMO Time! Steiner- Wallner- Podaras 33

34 Big DEMO Time! Don t try this at home