1. A Really (too) Short Introduction to OpenGL Peter Rautek

2. What Is OpenGL? OpenGL is a computer graphics rendering application programming interface (API for short) High-quality rendering with geometric and image primitives Basis of many interactive applications that include 3D graphics Graphics part of your application can be Operating system independent Window system independent Low level API You program the graphics hardware You need to do the math Many platforms support it

3. What Is OpenGL?

4. Goal of the Course - Agenda OpenGL Pipeline and Application Development Shaders and OpenGL Shading Language (GLSL) Examples (code and visuals) all using modern OpenGL Hands On Session Visualize your own pointcloud Modify shaders and program

5. OpenGL Pipeline

6. Pipelines OpenGL 4.1 (released July 25 th, 2010) Latest version is 4.4 4.3 introduced compute shaders Primitive Setup and Rasterization Primitive Setup and Rasterization Fragment Shader Blending Vertex Data Pixel Data Vertex Shader Texture Store Geometry Shader Tessellation Control Shader Tessellation Evaluation Shader

7. A Simplified Pipeline Model Vertex Processing Rasterizer Fragment Processing Vertex Shader Vertex Shader Fragment Shader Fragment Shader GPU Data Flow Application Framebuffer Vertices Fragments Pixels

8. OpenGL for Embedded Systems and the Web OpenGL ES 2.0 Designed for embedded and hand-held devices such as cell phones Based on OpenGL 3.1 OpenGL ES 3.0 released but support limited to most recent smartphones WebGL 1.0 JavaScript implementation of OpenGL ES 2.0 Runs on most recent browsers WebGL 2.0 under development – will be based on OpenGL ES 3.0 Takeaway message: Lots of versions We define modern OpenGL: OpenGL 3.1 ~ OpenGL ES 2.0 ~ WebGL 1.0

9. OpenGL Application Development

10. OpenGL Programming in a Nutshell Modern OpenGL programs essentially do the following steps: Create shader programs: Compile, link and create shader programs Create buffer objects and load data into them Setup buffers for vertex data or other data you need to compute your image Initialize buffers and send them to the GPU “Plumbing” data locations with shader variables Create variables in shaders Initialize them with values from your application Render Tell the GPU how to render using your buffers and shaders

11. Application Framework Requirements OpenGL applications need a place to render into On-screen window Off-screen buffer Need to communicate with native windowing system Windowing system interfaces are different for different platforms We use WebGL with html5 and the canvas element

12. Representing Geometric Objects Geometric objects are represented using vertices A vertex is a collection of generic attributes Positional coordinates Colors Texture coordinates Normals Other data Position stored in 4 dimensional homogeneous coordinates Vertex buffer objects (VBOs) store vertex data Array of structs or struct of arrays A junk of memory on your graphics card Vertex array objects (VAOs) are a collection of VBOs

13. OpenGL’s Geometric Primitives All primitives are specified by vertices GL_TRIANGLE_STRIP GL_TRIANGLE_FAN GL_LINES GL_LINE_LOOP GL_LINE_STRIP GL_TRIANGLES GL_POINTS

14. A First Program

15. Our First Program We’ll render a cube with colors at each vertex Our example demonstrates: initializing vertex data organizing data for rendering simple object modeling –building up 3D objects from geometric primitives –building geometric primitives from vertices

16. Initializing the Cube’s Data We’ll build each cube face from individual triangles How many vertices required (6 faces)*(2 triangles/face)*(3 vertices/triangle) var NumVertices = 36; We use a vec4 class similar to GLSL’s vec4 type Before we can initialize our VBO, we need to stage the data Our cube has two attributes per vertex Position Color We create two arrays to hold the VBO data on the application side var vPositions; var vColors;

17. Cube Data Vertices of a unit cube centered at origin, sides aligned with axes var vPositions = [ // Front face -0.5, -0.5, 0.5, 0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, 0.5, 0.5, // Back face -0.5, -0.5, -0.5, -0.5, 0.5, -0.5, 0.5, 0.5, -0.5, 0.5, -0.5, -0.5, // Top face -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, -0.5, // Bottom face -0.5, -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, -0.5, 0.5, -0.5, -0.5, 0.5, // Right face 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, 0.5, // Left face -0.5, -0.5, -0.5, -0.5, -0.5, 0.5, -0.5, 0.5, 0.5, -0.5, 0.5, -0.5 ]; var vColors = [ … ]

18. Cube Index Buffer var vIndices = [ 0, 1, 2, 0, 2, 3, // front 4, 5, 6, 4, 6, 7, // back 8, 9, 10, 8, 10, 11, // top 12, 13, 14, 12, 14, 15, // bottom 16, 17, 18, 16, 18, 19, // right 20, 21, 22, 20, 22, 23 // left ]; 18

19. Vertex Attributes Vertex data must be stored in a buffer (the VBO) Generate VBO by calling // generate buffer for position data var vertexPositionBuffer = gl.createBuffer(); // generate buffer for index buffer var vertexIndexBuffer = gl.createBuffer(); Bind specific VBO for initialization and load data into it // bind vertex position buffer gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer); // load data into it gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vPositions), gl.STATIC_DRAW); // bind index buffer gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, vertexIndexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(vIndices), gl.STATIC_DRAW);

20. Connecting Vertex Shaders with Geometric Data Application vertex data enters the OpenGL pipeline through the vertex shader Need to connect vertex data to shader variables We do this right after the setup of shaders Requires knowing the attribute location Attribute location queried by calling // specify the program to be used gl.useProgram(shaderProgram); // get the attribute location vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); // enable the attribute gl.enableVertexAttribArray(vertexPositionAttribute);

21. Drawing Geometric Primitives Usually invoked in display callback Invokes shader pipeline // draw the cube gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, vertexIndexBuffer); gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);

22. Shaders and GLSL

23. GLSL Data Types Scalar types: float, int, bool Vector types: vec2, vec3, vec4 ivec2, ivec3, ivec4 bvec2, bvec3, bvec4 Matrix types: mat2, mat3, mat4 Texture sampling: sampler1D, sampler2D, sampler3D, samplerCube Constructors: vec3 a = vec3(1.0, 2.0, 3.0);

24. Components, Swizzling, Operators Access vector components using either: [ ] (c-style array indexing) xyzw, rgba or strq (named components) For example: vec3 v; v[1], v.y, v.g, v.t // all refer to the same element Component swizzling: vec3 a, b; Operators: a.xy = b.yx; mat4 m; vec4 a, b, c; b = a*m; c = m*a;

25. Qualifiers in, out Copy vertex attributes and other variable into and out of shaders in vec2 texCoord; out vec4 color; uniform shader-constant variable from application uniform float time; uniform vec4 rotation; Varying variables interpolated: per vertex value -> per fragment value varying float s;

26. Functions Built in Arithmetic: sqrt, power, abs Trigonometric: sin, asin Graphical: length, reflect User defined

27. Built-in Variables gl_Position (required) output position from vertex shader gl_FragCoord input fragment position gl_FragDepth input depth value in fragment shader

28. Simple Vertex Shader for Cube Example attribute vec3 aVertexPosition; attribute vec4 aVertexColor; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; varying lowp vec4 vColor; void main(void) { vec4 pos = vec4(aVertexPosition, 1.0); gl_Position = uPMatrix * uMVMatrix * pos; vColor = aVertexColor; }

29. The Simplest Fragment Shader varying lowp vec4 vColor; void main(void) { gl_FragColor = vColor; }

30. Getting Your Shaders into OpenGL Shaders need to be compiled and linked to form an executable shader program OpenGL provides the compiler and linker A program must contain vertex and fragment shaders other shaders are optional Create Shader Load Shader Source Compile Shader Create Program Attach Shader to Program Link Program gl.createProgram() gl.shaderSource() gl.compileShader() gl.createShader() gl.attachShader() gl.linkProgram() Use Program gl.useProgram() These steps need to be repeated for each type of shader in the shader program

31. Initializing Uniform Variable Values Shader code: uniform mat4 uPMatrix; Application code: var perspectiveMatrix = mat4.perspective(45, 640.0/480.0, 0.1, 100.0); var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix"); gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix));

32. Conclusion Wasn’t that easy? No! …but drawing one cube is not so much different from Drawing thousands of cubes Drawing other geometric objects What we haven’t covered Transformations: How to move stuff around Interaction: How mouse, keys, gestures can affect your scene Animation: How geometry can deform Textures: How to add all the nice details Lighting: How to add fancy illumination to your scene Shaders: Do more useful computation in your shaders and tons more 32

33. Q & A & Examples

34. Resources

35. Books Modern discussion The OpenGL Programming Guide, 8 th Edition Interactive Computer Graphics: A Top-down Approach using OpenGL, 6 th Edition The OpenGL Superbible, 5 th Edition Older resources The OpenGL Shading Language Guide, 3 rd Edition OpenGL and the X Window System OpenGL Programming for Mac OS X OpenGL ES 2.0 Programming Guide Not quite yet … WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL

36. Online Resources SIGGRAPH University - An introduction to OpenGL programming: Youtube: http://www.youtube.com/watch?v=T8gjVbn8VBkhttp://www.youtube.com/watch?v=T8gjVbn8VBk Material and code: http://www.cs.unm.edu/~angel/SIGGRAPH13/ The OpenGL Website: www.opengl.org www.opengl.org API specifications Reference pages and developer resources Downloadable OpenGL (and other APIs) reference cards Discussion forums The Khronos Website: www.khronos.org www.khronos.org Overview of all Khronos APIs Numerous presentations

37. Acknowledgements Slides and resources: Dave Shreiner and Edward Angel (SIGGRAPH 2013 course) Code and examples: Three.js, K3D.js, glMatrix.js WebGL Playground Google Inc.

38. Hands On Session - WebGL

39. Setup – Node.js and Http-Server Install node.js Run command line as administrator From the command line locate the nodejs directory npm install http-server –g http-server From the browser: http://localhost:8080/ 39

40. How-to get your point cloud into the right format Download Meshlab Import Mesh: your pointcloud Export Mesh: Select ply format Check: –Colors –Normal Un-check: –Binary Encoding 40