OpenGL shaders and programming models that provide object persistence COSC342 Lecture 22 19 May 2016
OpenGL shaders We discussed forms of local illumination in the ray tracing lectures. We also saw that there were reasons you might want to modify these: e.g. procedural textures for bump maps. Ideally the illumination calculations would be entirely programmable. OpenGL shaders facilitate high performance programmability. They have been available as extensions since OpenGL 1.5 (2003), but core within OpenGL 2.0 (2004). We will focus on vertex and fragment shaders, but there are other types: e.g. geometry shaders, and more recent shaders for tessellation and general computing. COSC342 OpenGL shaders and programming models that provide object persistence 2
GL Shading Language GLSL C-like syntax. (No surprises given the OpenGL lineage... ) However, compared to real use of C, GLSL programmers are further away from the actual hardware. Usually the GLSL code will be passed as a string into the OpenGL library you are using. Only supports limited number of data types: e.g. float, double,... Adds some special types of its own: e.g. vector types vec2, vec4. Unlike most software, GLSL is typically compiled every time you load your functions there isn t (yet...) a standardised GL machine code. COSC342 OpenGL shaders and programming models that provide object persistence 3
GLSL on the hardware The GLSL syntax just provides a standard way to specify functions. Different vendors may use vastly different hardware implementations. (Or indeed the CPU may be doing the GLSL work, e.g. Mesa.) On any hardware accelerated system, the GLSL code will be run in a massively parallel way. Crucially, it s usually a single-instruction multiple-data (SIMD) approach. This means that conditional branches and structures such as loops may be problematic. (Particularly if threads need to diverge.) COSC342 OpenGL shaders and programming models that provide object persistence 4
Vertex shaders Vertex shaders run in the vertex processor: recall that this replaced the Transform stage of the GL pipeline. Vertex shaders are given inputs including: uniform variables that hold the same value for all vertices; attributes that provide data per vertex: e.g. position, normal, colour, texture coordinates. Vertex shaders produce results by: assigning to predefined variables such as gl position the vertex s screen-space position; setting custom vertex attributes whose values are to be interpolated and provided to fragment shaders. COSC342 OpenGL shaders and programming models that provide object persistence 5
Fragment shaders Fragment shaders run in the fragment processor: recall that this replaced the Shade stage of the GL pipeline. e.g. you could use a fragment shader to implement Phong shading. Variables that were varying outputs of the vertex shader are (constant) inputs to the fragment shader. Fragment shaders cause effects by assigning to predefined variables. e.g. gl FragColour is a vec4 that the fragment shader can set to give this fragment (almost a pixel) an RGBA value. Fragment shaders can also set the depth value for z-buffering. COSC342 OpenGL shaders and programming models that provide object persistence 6
GLSL implementation of flat, constant, blue shading Not a particularly useful type of shading, but it does give us usefully minimal shader code. Our vertex shader will just ensure that vertices are transformed to screen coordinates void main () { gl_position = gl_modelviewprojectionmatrix * gl_vertex ; } Our fragment shader sets all fragments to be blue void main () { gl_fragcolor = vec4 (0.0, 0.0, 1.0, 1.0) ; } COSC342 OpenGL shaders and programming models that provide object persistence 7
(Simplified) GLSL Gouraud shading Vertex shader: varying vec4 color ; void main () { vec3 n = normalize ( gl_ NormalMatrix * gl_ Normal ); vec3 l= normalize ( vec3 ( gl_lightsource [0]. position )); vec3 diffusereflection = vec3 ( gl_ LightSource [ 0]. diffuse ) * max (0.0, dot (n, l)); color = vec4 ( diffusereflection, 1. 0) ; gl_position = gl_modelviewprojectionmatrix * gl_vertex ; } Fragment shader: varying vec4 color ; void main () { gl_ FragColor = color ; } COSC342 OpenGL shaders and programming models that provide object persistence 8
GLSL Phong shading sketch vertex and fragment shaders varying vec4 e; varying vec3 n; void main () { e = gl_ ModelViewMatrix * gl_ Vertex ; n = normalize ( gl_ NormalMatrix * gl_ Normal ); gl_position =... } varying vec4 e; varying vec3 n; void main () { vec3 nn = normalize ( n); vec3 ne = - normalize ( vec3 (e)); vec3 l =...; vec3 specularreflection ; if ( dot (nn, l) < 0.0) specularreflection = vec3 (0.0, 0.0, 0.0) ; else { specularreflection = vec3 ( gl_ LightSource [ index ]. specular ) * vec3 ( gl_ FrontMaterial. specular ) * pow ( max (0.0, dot ( reflect (-l, nn), ne)), gl_frontmaterial. shininess ); } gl_ FragColor = vec4 ( ambient... + diffuse... + specularreflection, 1.0) ; } COSC342 OpenGL shaders and programming models that provide object persistence 9
An aside: fractals Fractals are shapes that have infinite detail. (This implies that they must be procedurally generated.) Often they have self-similarity: e.g. recursive structures. You have encountered a fractal shape in COSC342 already: the Sierpinski Gasket (fractal triangle) in the first OpenGL lab. A fractal such as the figure to the right has a finite volume... but yet has an infinite surface area! Simple equations can produce intricate results: e.g. iterate z n+1 = z 2 n + c for complex numbers z and c to generate the Mandelbrot set. COSC342 OpenGL shaders and programming models that provide object persistence 10
A vertex shader for a procedural texture... uniform float real ; // fractal s " x" uniform float imag ; // fractal s " y" uniform float w; // width uniform float h; // height varying float xpos ; // changes across polygon varying float ypos ; void main ( void ) { xpos = clamp ( gl_vertex.x, 0.0,1.0) *w+ real ; ypos = clamp ( gl_vertex.y, 0.0,1.0) *h+ imag ; } // perform update of GLSL global variables gl_position = gl_modelviewprojectionmatrix * gl_vertex ; COSC342 OpenGL shaders and programming models that provide object persistence 11
... and the corresponding fragment shader varying float xpos, ypos ; void main ( void ) { float iter = 0.0, square = 0.0, max_ square = 3. 0; float r = 0.0, i = 0. 0; float rt = 0.0, it = 0. 0; while ( iter < 1.0 && square < max_ square ) { rt = (r*r) - (i*i) + xpos ; it = (2.0 * r * i) + ypos ; r = rt; i = it; square = (r*r)+(i*i); iter += 0. 005; } gl_fragcolor = vec4 (iter, sin ( iter *20.00), sin ( iter *2.00), 1.0) ; } COSC342 OpenGL shaders and programming models that provide object persistence 12
Using the Pyglet library for Python to load GLSL vertex_ shader_ src = """ uniform float real,w,imag,h; varying float xpos, ypos ; void main ( void ) { xpos = clamp ( gl_vertex.x, 0.0,1.0) *w+ real ; ypos = clamp ( gl_vertex.y, 0.0,1.0) *h+ imag ; gl_position = gl_modelviewprojectionmatrix * gl_vertex ; } """ program = gl. glcreateprogram () vertex_ shader = self. create_ shader ( vertex_ shader_ src, gl. GL_VERTEX_SHADER ) gl. glattachshader ( self. program, vertex_shader ) gl. gllinkprogram ( self. program ) message = self. get_program_log ( self. program ) if message : raise ShaderException ( message ) COSC342 OpenGL shaders and programming models that provide object persistence 13
Maybe next time? COSC342 OpenGL shaders and programming models that provide object persistence 14
Persistent object modelling In OpenGL, you draw it, and it s on-screen (more or less).... however you can t later ask OpenGL what objects were drawn. (Although you can ask OpenGL to tell you pixel values.) Nonetheless, you probably want the next frame you are going to draw to be closely related to the one you just drew. Ideally you could explain to a graphics framework what your objects are, and it can maintain this state for you. There are many ways to acquire this functionality, such as through game engines (e.g. Unity3D, Blender, etc.), and scene-graph libraries. COSC342 OpenGL shaders and programming models that provide object persistence 15
Scene graphs When building a computer model of a bicycle just as you would when building a real bicycle you are likely to use discrete parts. A scene graph allows us to store a model that retains these constituent components. COSC342 OpenGL shaders and programming models that provide object persistence 16
Parameterised scene graphs Duplicated objects in our scene should share the same nodes in the scene-graph. Note that we can use nodes to hold matrices, as well as geometry. The transformations in a matrix node will apply to all children of that node. COSC342 OpenGL shaders and programming models that provide object persistence 17
Further decomposition of our bicycle scene graph In the case of our bicycle model, we can apply further geometric decomposition: a wheel is itself made up of subcomponents... COSC342 OpenGL shaders and programming models that provide object persistence 18
Standard Vector Graphics (SVG) The persistence mechanism for SVG is the HTML DOM. <! DOCTYPE html ><! -- i.e. HTML5 --> <html ><body > <svg style =" border :1 px solid black ;" width =" 100 " height =" 100 "> < circle id="my - circle " cx="40" cy="30" r="25" stroke =" blue " stroke - width ="2" fill =" green " /> </ svg > </ body ></ html > JavaScript can find and dynamically modify DOM elements: var c = document. getelementbyid ("my - circle "); c. setattribute ("cx",50); c. setattribute (" fill "," orange "); COSC342 OpenGL shaders and programming models that provide object persistence 19
WebGL Another important web technology for graphics is WebGL. Defines a standard way to access to OpenGL from web browsers. Specifically, it s based on OpenGL ES 2.0, and supports GLSL. In terms of syntax, the resulting web workload is a dog s breakfast. Development is likely to involve HTML, CSS, JavaScript, GLSL, in addition to WebGL s OpenGL-style naming. However serious web development is unlikely to involve manual editing of all these types of files (e.g. given frameworks, libraries, IDEs, etc). WebGL is likely to be very useful in popularising OpenGL further. It also allows mixing in of other web technologies. COSC342 OpenGL shaders and programming models that provide object persistence 20
WebGL hello world does not sensibly fit on one slide <! DOCTYPE html > <html ><head ><title >WebGL example </ title ></ head > <body >< script type =" text / javascript ">... shaders, data bulk - loading... function draw () { var gl = document. getelementbyid (" webgl "). getcontext (" experimental - webgl ");... var prog = shaderprogram ( gl, " attribute vec3 pos ; void main () { gl_ Position = vec4 ( pos, 2.0) ; }", " void main () { gl_ FragColor = vec4 (0.5, 0.5, 1.0, 1. 0) ; }");... attributesetfloats (gl, prog, " pos ", 3, [-1, 0, 0, 0, 1, 0, 0, -1, 0, 1, 0, 0]) ; gl. drawarrays (gl. TRIANGLE_STRIP, 0, 4); }... </ script > < canvas id=" webgl " width =" 640 " height =" 480 "></ canvas > </ body ></ html > COSC342 OpenGL shaders and programming models that provide object persistence 21
three.js: a JavaScript library that helps 3D web coding var scene = new THREE. Scene (); var S_W = window. innerwidth, S_H = window. innerheight ; var camera = new THREE. PerspectiveCamera ( 45, S_W / S_H, 0.1, 20000) ; scene. add ( camera ); camera. position. set (0,150,400) ; camera. lookat ( scene. position ); var renderer = new THREE. WebGLRenderer ( { antialias : true } ); renderer. setsize (S_W, S_H ); var container = document. getelementbyid ( ThreeJS ); container. appendchild ( renderer. domelement ); var light = new THREE. PointLight (0 xffffff ); light. position. set (100,150,200) ; scene. add ( light ); var geometry = new THREE. SphereGeometry ( 100, 32, 16 ); var material = new THREE. MeshLambertMaterial ( { color : 0 x8888ff } ); var mesh = new THREE. Mesh ( geometry, material ); mesh. position. set (0,40,0) ; scene. add ( mesh ); renderer. render ( scene, camera ); COSC342 OpenGL shaders and programming models that provide object persistence 22