1. Programming with OpenGL Part 0: 3D API

2. For Further Reading Angel 7 th Ed: –2.2: JavaScript –2.3: OpenGL & WebGL –2.8: fragment & vertex shaders Beginning WebGL: –Chapter 1: blank canvas, vertex buffer –Appendix A: essential HTML5 and JavaScript 2

3. Announcement Schedule change for the 9/30 class. –Please fill out the questionnaire on Moodle. 3

4. 4 Elements of Image Formation Objects Viewer Light source(s) Attributes that govern how light interacts with the materials in the scene Note the independence of the objects, viewer, and light source(s)

5. 5 Synthetic Camera Model center of projection image plane projector p projection of p

6. 6

7. 7

8. Programming with OpenGL Part 1: Background

9. 9 Advantages Separation of objects, viewer, light sources Two-dimensional graphics is a special case of three-dimensional graphics Leads to simple software API –Specify objects, lights, camera, attributes –Let implementation determine image Leads to fast hardware implementation

10. 10 SGI and GL Silicon Graphics (SGI) revolutionized the graphics workstation by implementing the pipeline in hardware (1982) To use the system, application programmers used a library called GL With GL, it was relatively simple to program three dimensional interactive applications

11. 11 OpenGL The success of GL lead to OpenGL (1992), a platform-independent API that was –Easy to use –Close enough to the hardware to get excellent performance –Focus on rendering –Omitted windowing and input to avoid window system dependencies

12. 12 OpenGL Evolution Originally controlled by an Architectural Review Board (ARB) –Members included SGI, Microsoft, Nvidia, HP, 3DLabs, IBM,……. –Now Khronos Group –Was relatively stable (through version 2.5) Backward compatible Evolution reflected new hardware capabilities –3D texture mapping and texture objects –Vertex and fragment programs –Allows platform specific features through extensions

13. Khronos 13

14. OpenGL 3.1 (and Beyond) Totally shader-based –No default shaders –Each application must provide both a vertex and a fragment shader No immediate mode Few state variables Most OpenGL 2.5 functions deprecated Backward compatibility not required

15. Other Versions OpenGL ES –Embedded systems –Version 1.0 simplified OpenGL 2.1 –Version 2.0 simplified OpenGL 3.1 Shader based WebGL –Javascript implementation of ES 2.0 –Supported on newer browsers OpenGL 4.1 and 4.2 –Add geometry shaders and tessellator

16. Programming with OpenGL Part 2: HelloWorld in WebGL

17. What Is WebGL? WebGL: JavaScript implementation of OpenGL ES 2.0 ­runs in all recent browsers (Chrome, Firefox, IE, Safari) system independent ­application can be located on a remote server ­rendering is done within browser using local hardware ­uses HTML5 canvas element ­integrates with standard Web packages and apps CSS jQuery

18. Example 1: Blank Canvas (source code)source code A blank canvas body{ background-color: grey; } canvas{ background-color: white; } Your browser does not support the HTML5 canvas element.

19. Example 2: Blank Canvas with JS (source code)source code WebGL Context body{ background-color: grey; } canvas{ background-color: white; } window.onload = setupWebGL; var gl = null; function setupWebGL() { var canvas = document.getElementById("my-canvas");

20. Example 2 (cont) try{ gl = canvas.getContext("experimental-webgl"); }catch(e){ } if(gl) { //set the clear color to red gl.clearColor(1.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); }else{ alert( "Error: Your browser does not appear to support WebGL." ); }

21. Elements A blank canvas... // written in Javascript

22. Exercise #1 Run the above example from the class website. Save the HTML file to your computer and run it locally. Edit the code to change the canvas color to green. 22

23. Example 3: triangle.html 23 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

24. Elements...

25. HTML File (triangle.html) 25 attribute vec4 vPosition; void main(){ gl_Position = vPosition; } precision mediump float; void main(){ gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 ); } Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

26. HTML File (cont) 26 Oops... your browser doesn't support the HTML5 canvas element Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

27. triangle.js 27 var gl; var points; window.onload = function init(){ var canvas = document.getElementById( "gl-canvas" ); gl = WebGLUtils.setupWebGL( canvas ); if ( !gl ) { alert( "WebGL isn't available" ); } // Three Vertices var vertices = [ vec2( -1, -1 ), vec2( 0, 1 ), vec2( 1, -1 ) ]; Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

28. triangle.js (cont) 28 // Configure WebGL // gl.viewport( 0, 0, canvas.width, canvas.height ); gl.clearColor( 1.0, 1.0, 1.0, 1.0 ); // Load shaders and initialize attribute buffers var program = initShaders( gl, "vertex-shader", "fragment-shader" ); gl.useProgram( program ); // Load the data into the GPU var bufferId = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, bufferId ); gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW ); Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

29. triangle.js (cont) 29 // Associate out shader variables with our data buffer var vPosition = gl.getAttribLocation( program, "vPosition" ); gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 ); gl.enableVertexAttribArray( vPosition ); render(); }; function render() { gl.clear( gl.COLOR_BUFFER_BIT ); gl.drawArrays( gl.TRIANGLES, 0, 3 ); } Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

30. Exercise #2 Run triangle.html from the class website Load the triangle.html and triangle.js to your computer and run them from there Edit the two files to change the color and display more than one triangle 30 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

31. JavaScript Notes Very few native types: ­numbers ­strings ­booleans Only one numerical type: 32 bit float ­var x = 1; ­var x = 1.0; // same ­potential issue in loops ­two operators for equality == and === (strict) Dynamic typing 31 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

32. Scoping Different from other languages Function scope variables are hoisted within a function ­can use a variable before it is declared Note functions are first class objects in JS 32 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

33. JS Arrays JS arrays are objects ­inherit methods ­var a = [1, 2, 3]; is not the same as in C++ or Java ­a.length // 3 ­a.push(4); // length now 4 ­a.pop(); // 4 ­avoids use of many loops and indexing ­Problem for WebGL which expects C-style arrays 33 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

34. Typed Arrays JS has typed arrays that are like C arrays var a = new Float32Array(3) var b = new Uint8Array(3) Generally, we prefer to work with standard JS arrays and convert to typed arrays only when we need to send data to the GPU with the flatten function in MV.js 34 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

35. A Minimalist Approach We will use only core JS and HTML ­no extras or variants No additional packages ­CSS ­JQuery Focus on graphics ­examples may lack beauty You are welcome to use other variants as long as I can run them from your URL 35 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

36. Programming with OpenGL Part 3: 3D Object File Format

37. 3D Modeling Programs Autodesk (commercial) –AutoCAD: for engineering plotting –3D Studio MAX: for 3D modeling –Maya: for animation –Revit Architecture Blender 3D (free) 37

38. AutoCAD 38

39. Maya 39

40. Blender 40

41. 3D Contents Geometry –Vertices –Triangles or polygons –Curves Materials –Colors –Textures (images and bumps) Scene description & transformation 41

42. Drawing cube from faces 42 0 56 2 4 7 1 3 void polygon(int a, int b, int c, int d) { glBegin(GL_POLYGON); glVertex3fv(vertices[a]); glVertex3fv(vertices[b]); glVertex3fv(vertices[c]); glVertex3fv(vertices[d]); glEnd(); } void colorcube(void) { polygon(0,3,2,1); polygon(2,3,7,6); polygon(0,4,7,3); polygon(1,2,6,5); polygon(4,5,6,7); polygon(0,1,5,4); }

43. Cube Revisted Question #1: What is the size of the data file? –How many vertices? –How about the “topology” or connectivity between vertices? Question #2: How many times did we call glVertex3fv()? 43

44. 44 x 0 y 0 z 0 x 1 y 1 z 1 x 2 y 2 z 2 x 3 y 3 z 3 x 4 y 4 z 4 x 5 y 5 z 5. x 6 y 6 z 6 x 7 y 7 z 7 P0 P1 P2 P3 P4 P5 v0v3v2v1v0v3v2v1 v2v3v7v6v2v3v7v6 topology geometry

45. A Simple Example -- OBJ Array of vertices Array of polygons Optional: –Normals –Textures –Groups f 1 3 4 f 4 2 1 f 5 6 8 f 8 7 5 f 1 2 6 f 6 5 1 f 2 4 8 f 8 6 2 f 4 3 7 f 7 8 4 f 3 1 5 f 5 7 3 # 12 faces v -0.5 -0.5 -0.6 v 0.5 -0.5 -0.6 v -0.5 -0.5 0.4 v 0.5 -0.5 0.4 v -0.5 0.5 -0.6 v 0.5 0.5 -0.6 v -0.5 0.5 0.4 v 0.5 0.5 0.4 # 8 vertices

46. GLm Programming interface (data types, functions) defined in glm.h glmReadOBJ( char* filename ); struct GLMmodel –vertices –triangles 46

47. 47 typedef struct { GLuint vindices[3];/* array of triangle vertex indices */ GLuint nindices[3];/* array of triangle normal indices */ GLuint tindices[3];/* array of triangle texcoord indices*/ GLuint findex;/* index of triangle facet normal */ } GLMtriangle; typedef struct {... GLuint numvertices;/* number of vertices in model */ GLfloat* vertices;/* array of vertices */... GLuint numtriangles;/* number of triangles in model */ GLMtriangle* triangles;/* array of triangles */... } GLMmodel;

48. 48 v -0.5 -0.5 -0.6 v 0.5 -0.5 -0.6 v -0.5 -0.5 0.4 v 0.5 -0.5 0.4 v -0.5 0.5 -0.6 v 0.5 0.5 -0.6 v -0.5 0.5 0.4 v 0.5 0.5 0.4 # 8 vertices f 1 3 4 f 4 2 1 f 5 6 8 f 8 7 5 f 1 2 6 f 6 5 1 f 2 4 8 f 8 6 2 f 4 3 7 f 7 8 4 f 3 1 5 f 5 7 3 # 12 faces A triangle made of vertices #1, #3, #4: GLMmodel::triangles[i].vindices[] contains {1,3,4} vertex #1 coordinates is GLMmodel::vertices[1] vertex #3 coordinates is GLMmodel::vertices[3]