Rendering Pipeline
Rendering Pipeline Converts geometric primitives into images Is split into several independent stages Those are usually executed concurrently Pipeline 18.10.2013 Steiner- Wallner- Podaras 2
The real pipeline 18.10.2013 Steiner- Wallner- Podaras 3
OpenGL Pipeline Vertex Processing Primitive Assembly Polygon Clipping Homogenization Viewport Transformation Rasterization Fragment Processing Depth Test 18.10.2013 Steiner- Wallner- Podaras 4
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 18.10.2013 Steiner- Wallner- Podaras 5
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 18.10.2013 Steiner- Wallner- Podaras 6
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 18.10.2013 Steiner- Wallner- Podaras 7
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 18.10.2013 Steiner- Wallner- Podaras 8
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 18.10.2013 Steiner- Wallner- Podaras 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 18.10.2013 Steiner- Wallner- Podaras 10
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 18.10.2013 Steiner- Wallner- Podaras 11
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 18.10.2013 Steiner- Wallner- Podaras 12
Depth Buffering Draw result depend on order of render calls Blue - > Red - > Green Green - > Red - > Blue 18.10.2013 Steiner- Wallner- Podaras 13
Depth Buffering Draw result depend on order of render calls Blue - > Red - > Green Green - > Red - > Blue BeKer: Order polygons by their depth 18.10.2013 Steiner- Wallner- Podaras 14
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); 18.10.2013 Steiner- Wallner- Podaras 15
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 18.10.2013 Steiner- Wallner- Podaras 16
Shader Vertex Processing Vertex Shader Primitive Assembly Polygon Clipping Homogenization varyings Viewport Transformation Rasterization Fragment Processing Fragment Shader Depth Test 18.10.2013 Steiner- Wallner- Podaras 17
Shader Vertex Processing Primitive Assembly Vertex Shader Geometry Shader Polygon Clipping Homogenization Viewport Transformation Rasterization Fragment Processing Fragment Shader Depth Test 18.10.2013 Steiner- Wallner- Podaras 18
Shader Vertex Shader Called once for each vertex Fragment Shader Called once for each pixel inside a surface 18.10.2013 Steiner- Wallner- Podaras 19
AKributes/Varyings Draw Call Vertex Shader attribute vec3 position attribute vec2 uv varying vec2 fragmentuv gl_position Fragment Shader gl_fragcolor Draw Buffer 18.10.2013 Steiner- Wallner- Podaras 20
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 18.10.2013 Steiner- Wallner- Podaras 21
Parameter interpolapon // vertex shader varying vec2 fragmentuv; //... InterpolaDon // fragment shader varying vec2 fragmentuv; //... 18.10.2013 Steiner- Wallner- Podaras 22
Our first shader Vertex Shader Takes akributes from draw call Should set gl_position attribute vec4 position; void main() { gl_position = position; } 18.10.2013 Steiner- Wallner- Podaras 23
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); } 18.10.2013 Steiner- Wallner- Podaras 24
Shader execupon model Shader- Source- Code OpenGL- API ApplicaDon OpenGL- Driver Compiler Shader- Object compiled code Linker Program- Object Graphics- Hardware executable code 18.10.2013 Steiner- Wallner- Podaras 25
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(); 18.10.2013 Steiner- Wallner- Podaras 26
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); 18.10.2013 Steiner- Wallner- Podaras 27
Shader Compiling Compile shader gl.compileshader(shader); And test for errors if (!gl.getshaderparameter(shader, gl.compile_status)) { //Handle errors } 18.10.2013 Steiner- Wallner- Podaras 28
Shader Program CombinaPon of Vertex and Fragment Shader Object program = gl.createprogram(); AKach Shader Objects gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); 18.10.2013 Steiner- Wallner- Podaras 29
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); } 18.10.2013 Steiner- Wallner- Podaras 30
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] 18.10.2013 Steiner- Wallner- Podaras 31
Webserver Access Server http://127.0.0.1:8000 A>enDon: Webserver could cache files! 18.10.2013 Steiner- Wallner- Podaras 32
Big DEMO Time! 18.10.2013 Steiner- Wallner- Podaras 33
Big DEMO Time! Don t try this at home 18.10.2013 34