opengl and webgl
DESCRIPTION
OpenGL and WebGL. Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2013. Announcements. LinkedIn Group Academic Integrity Project 4 demos next Wednesday. Announcements. Projects 4 . Due tomorrow 5 . Released Friday. Due Thursday 11/07 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/1.jpg)
OpenGL and WebGL
Patrick CozziUniversity of PennsylvaniaCIS 565 - Fall 2013
![Page 2: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/2.jpg)
Announcements
LinkedIn Group Academic Integrity Project 4 demos next Wednesday
2
![Page 3: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/3.jpg)
Announcements
Projects4. Due tomorrow5. Released Friday. Due Thursday 11/076. Released Friday 11/08. Due Friday 11/15
HackathonMonday 11/11
Final ProjectKickoff Wednesday 11/13Pitches on Monday 11/18 3
![Page 4: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/4.jpg)
OpenGL
Is a C-based API Is cross platform Is run by the ARB: Architecture Review
Board Hides the device driver details OpenGL vs. Direct3D
![Page 5: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/5.jpg)
OpenGL
We are core profileNo fixed function vertex and fragment shadingNo legacy API calls:
glBegin() glRotatef() glTexEnvf() AlphaFunc() …
Why was the alpha test remove?
Recall the fixed function light map
![Page 6: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/6.jpg)
OpenGL
GPU
Device Driver
OpenGL API
Application
Software stack:
![Page 7: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/7.jpg)
OpenGL
Major objects:Shader Programs
Textures
Framebuffers
Shader Objects Array Buffers
Fixed Function State
Element Buffers
Pixel Buffers
Renderbuffers
We are not covering everything. Just surveying the most relevant parts for writing GLSL shaders
![Page 8: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/8.jpg)
Shaders
Shader object: an individual vertex, fragment, etc. shaderAre provided shader source code as a stringAre compiled
Shader program: Multiple shader objects linked together
![Page 9: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/9.jpg)
Shader Objects
const char *source = // ...GLint sourceLength = // ...
GLuint v = glCreateShader(GL_VERTEX_SHADER);
glShaderSource(v, 1, &source, &sourceLength);
glCompileShader(v);
GLint compiled;glGetShaderiv(v, GL_COMPILE_STATUS, &compiled);// success: compiled == GL_TRUE
// ...glDeleteShader(v);
Compile a shader object:
![Page 10: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/10.jpg)
Shader Objects
const char *source = // ...GLint sourceLength = // ...
GLuint v = glCreateShader(GL_VERTEX_SHADER);
glShaderSource(v, 1, &source, &sourceLength);
glCompileShader(v);
GLint compiled;glGetShaderiv(v, GL_COMPILE_STATUS, &compiled);// success: compiled == GL_TRUE
// ...glDeleteShader(v);
Compile a shader object:
v is an opaque object• What is it under the hood?• How would you design this in C++?
OpenGL functions start with gl. Why? How would you design this in C++?
![Page 11: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/11.jpg)
Shader Objects
const char *source = // ...GLint sourceLength = // ...
GLuint v = glCreateShader(GL_VERTEX_SHADER);
glShaderSource(v, 1, &source, &sourceLength);
glCompileShader(v);
GLint compiled;glGetShaderiv(v, GL_COMPILE_STATUS, &compiled);// success: compiled == GL_TRUE
// ...glDeleteShader(v);
Compile a shader object: Provide the shader’ssource code
Where should thesource come from?
Why can we pass more than one string?
![Page 12: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/12.jpg)
Shader Objects
const char *source = // ...GLint sourceLength = // ...
GLuint v = glCreateShader(GL_VERTEX_SHADER);
glShaderSource(v, 1, &source, &sourceLength);
glCompileShader(v);
GLint compiled;glGetShaderiv(v, GL_COMPILE_STATUS, &compiled);// success: compiled == GL_TRUE
// ...glDeleteShader(v);
Compile a shader object:Compile, but what does the driver really do?
![Page 13: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/13.jpg)
Shader Objects
const char *source = // ...GLint sourceLength = // ...
GLuint v = glCreateShader(GL_VERTEX_SHADER);
glShaderSource(v, 1, &source, &sourceLength);
glCompileShader(v);
GLint compiled;glGetShaderiv(v, GL_COMPILE_STATUS, &compiled);// success: compiled == GL_TRUE
// ...glDeleteShader(v);
Compile a shader object:
Good developers check for error. Again, how would you design this in C++?
Calling glGet* has performance implications. Why?
![Page 14: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/14.jpg)
Shader Objects
const char *source = // ...GLint sourceLength = // ...
GLuint v = glCreateShader(GL_VERTEX_SHADER);
glShaderSource(v, 1, &source, &sourceLength);
glCompileShader(v);
GLint compiled;glGetShaderiv(v, GL_COMPILE_STATUS, &compiled);// success: compiled == GL_TRUE
// ...glDeleteShader(v);
Compile a shader object:
Good developers also cleanup resources
![Page 15: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/15.jpg)
Shader Programs
GLuint v = glCreateShader(GL_VERTEX_SHADER);GLuint f = glCreateShader(GL_FRAGMENT_SHADER);// ...
GLuint p = glCreateProgram();glAttachShader(p, v);glAttachShader(p, f);
glLinkProgram(p);
GLint linked;glGetShaderiv(p, GL_LINK_STATUS, &linked);// success: linked == GL_TRUE
// ...glDeleteProgram(v);
Link a shader program:
![Page 16: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/16.jpg)
Shader Programs
GLuint v = glCreateShader(GL_VERTEX_SHADER);GLuint f = glCreateShader(GL_FRAGMENT_SHADER);// ...
GLuint p = glCreateProgram();glAttachShader(p, v);glAttachShader(p, f);
glLinkProgram(p);
GLint linked;glGetShaderiv(p, GL_LINK_STATUS, &linked);// success: linked == GL_TRUE
// ...glDeleteProgram(v);
Link a shader program:A program needs a vertex and fragment shader
![Page 17: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/17.jpg)
Shader Programs
GLuint v = glCreateShader(GL_VERTEX_SHADER);GLuint f = glCreateShader(GL_FRAGMENT_SHADER);// ...
GLuint p = glCreateProgram();glAttachShader(p, v);glAttachShader(p, f);
glLinkProgram(p);
GLint linked;glGetShaderiv(p, GL_LINK_STATUS, &linked);// success: linked == GL_TRUE
// ...glDeleteProgram(v);
Link a shader program:
![Page 18: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/18.jpg)
Shader Programs
GLuint v = glCreateShader(GL_VERTEX_SHADER);GLuint f = glCreateShader(GL_FRAGMENT_SHADER);// ...
GLuint p = glCreateProgram();glAttachShader(p, v);glAttachShader(p, f);
glLinkProgram(p);
GLint linked;glGetShaderiv(p, GL_LINK_STATUS, &linked);// success: linked == GL_TRUE
// ...glDeleteProgram(v);
Link a shader program:
Be a good developer again
![Page 19: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/19.jpg)
Using Shader Programs
GLuint p = glCreateProgram();// ...
glUseProgram(p);glDraw*(); // * because there are lots of draw functions
Part of the current state• How do you draw different objects with different shaders?• What is the cost of using multiple shaders?• How do we reduce the cost?
• Hint: write more CPU code – really.
![Page 20: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/20.jpg)
Uniforms
GLuint p = glCreateProgram();// ...glLinkProgram(p);
GLuint m = glGetUniformLocation(p, “u_modelViewMatrix”);GLuint l = glGetUniformLocation(p, “u_lightMap”);
glUseProgram(p);mat4 matrix = // ...glUniformMatrix4fv(m, 1, GL_FALSE, &matrix[0][0]);glUniform1i(l, 0);
![Page 21: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/21.jpg)
Uniforms
GLuint p = glCreateProgram();// ...glLinkProgram(p);
GLuint m = glGetUniformLocation(p, “u_modelViewMatrix”);GLuint l = glGetUniformLocation(p, “u_lightMap”);
glUseProgram(p);mat4 matrix = // ...glUniformMatrix4fv(m, 1, GL_FALSE, &matrix[0][0]);glUniform1i(l, 0);
Each active uniform has an integer index location.
![Page 22: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/22.jpg)
Uniforms
GLuint p = glCreateProgram();// ...glLinkProgram(p);
GLuint m = glGetUniformLocation(p, “u_modelViewMatrix”);GLuint l = glGetUniformLocation(p, “u_lightMap”);
glUseProgram(p);mat4 matrix = // ...glUniformMatrix4fv(m, 1, GL_FALSE, &matrix[0][0]);glUniform1i(l, 0);
mat4 is part of the C++ GLM library
GLM: http://www.g-truc.net/project-0016.html#menu
![Page 23: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/23.jpg)
Uniforms
GLuint p = glCreateProgram();// ...glLinkProgram(p);
GLuint m = glGetUniformLocation(p, “u_modelViewMatrix”);GLuint l = glGetUniformLocation(p, “u_lightMap”);
glUseProgram(p);mat4 matrix = // ...glUniformMatrix4fv(m, 1, GL_FALSE, &matrix[0][0]);glUniform1i(l, 0);
Uniforms can be changed as often as needed, but are constant during a draw call
Not transposing the matrix
glUniform* for all sorts of datatypes
![Page 24: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/24.jpg)
Uniforms
GLuint p = glCreateProgram();// ...glLinkProgram(p);
GLuint m = glGetUniformLocation(p, “u_modelViewMatrix”);GLuint l = glGetUniformLocation(p, “u_lightMap”);
glUseProgram(p);mat4 matrix = // ...glUniformMatrix4fv(m, 1, GL_FALSE, &matrix[0][0]);glUniform1i(l, 0);
Why not glUniform*(p, …)?
![Page 25: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/25.jpg)
The web has text, images, and videoWhat is the next media-type?
We want to supportWindows, Linux, MacDesktop and mobile
WebGL
25
![Page 26: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/26.jpg)
Bring 3D to the Masses
Put it in on a webpageDoes not require a plugin or installDoes not require administrator rights
Make it run on most GPUs
26
![Page 27: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/27.jpg)
WebGL
Image from http://www.khronos.org/assets/uploads/developers/library/2011-siggraph-mobile/Khronos-and-the-Mobile-Ecosystem_Aug-11.pdf
OpenGL ES 2.0 for JavaScriptSeriously, JavaScript
27
![Page 28: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/28.jpg)
WebGL Includes
Vertex shadersFragment shadersVertex buffersTexturesFramebuffersRender states…
Does not includeGeometry shadersTessellation shadersVertex Array ObjectsMultiple render targetsFloating-point texturesCompressed texturesFS depth writes…
See http://www.khronos.org/registry/webgl/specs/latest/28
![Page 29: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/29.jpg)
WebGL
If you know OpenGL, you already know WebGL If you know C++, the real learning curve is
JavaScript
29
![Page 30: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/30.jpg)
WebGL Alternatives?
Flash Silverlight Java Applets Unity
30
![Page 31: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/31.jpg)
WebGL
Creating a context is easy:
// HTML:<canvas id="glCanvas" width="1024" height="768"></canvas>
// JavaScript:var gl = document.getElementById("glCanvas").getContext("experimental-webgl");
31
![Page 32: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/32.jpg)
WebGL
The rest is similar to desktop OpenGL:
// ...gl.bindBuffer(/* ... */);gl.vertexAttribPointer(/* ... */);gl.useProgram(/* ... */);gl.drawArrays(/* ... */);
Checkout http://learningwebgl.com/32
![Page 33: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/33.jpg)
WebGL
Create an animation loop:
(function tick(){ // ... GL calls to draw scene window.requestAnimationFrame(tick);})();
You want this to work cross-browser. See http://paulirish.com/2011/requestanimationframe-for-smart-animating/33
![Page 34: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/34.jpg)
WebGL Performance
Performance can be very good. Why?
34
![Page 35: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/35.jpg)
WebGL Performance
Performance can be very good. Why?The GPU is still doing the renderingBatch!
Draw multiple objects with one draw call Sort by texture Push work into shaders Push work into web workers
See http://www.youtube.com/watch?v=rfQ8rKGTVlg35
![Page 36: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/36.jpg)
WebGL Performance
Image from http://openglinsights.com/
32x32 64x64 128x128C++ 1.9 ms 6.25 ms 58.82 ms
Chrome 18 27.77 ms 111.11 ms 454.54 ms
x slowdown 14.62 17.78 7.73
32x32 64x64 128x128C++ 3.33 ms 9.43 ms 37.03 ms
Chrome 18 12.82 ms 22.72 ms 41.66 ms
x slowdown 3.85 2.41 1.13
CPU-intensive
GPU-intensive (256 draws per frame) 36
![Page 37: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/37.jpg)
WebGL and other APIs
Take advantage of other web APIs:HTML5 <video>2D <canvas>CSS transformsComposite UI elementsWeb workersTyped Arrays
37
![Page 38: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/38.jpg)
HTML5 on Mobile
Touch events Geolocation Device orientation and motion
The future of HTML5 and WebGL on mobile is very promising 38
![Page 39: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/39.jpg)
WebGL support is good, and it is getting
better…
39
![Page 40: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/40.jpg)
WebGL Stats
October 201340
![Page 41: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/41.jpg)
WebGL SupportDesktop:
Android:
iOS:
![Page 42: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/42.jpg)
WebGL on Your System
http://www.webglreport.com
42
![Page 43: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/43.jpg)
Desktop WebGL Support
WindowsNo OpenGL driver installed? Old driver?
Only 35% of Windows XP machines have GL 2 driversBuggy driver?No problem:
ANGLE – Almost Native Graphics Layer Engine
OpenGL ES 2.0
Direct3D 9
See http://code.google.com/p/angleproject/43
![Page 44: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/44.jpg)
N-Body Simulationhttp://www.youtube.com/watch?v=F7YSQxz3j7o
http://www.khronos.org/webcl/Prototypes for Firefox and WebKit are available
WebCL OpenCL bindings for JavaScript are
coming.
44
![Page 45: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/45.jpg)
Browser Architecture
Single Process
See http://www.khronos.org/assets/uploads/developers/library/2010_siggraph_bof_webgl/WebGL-BOF-2-WebGL-in-Chrome_SIGGRAPH-Jul29.pdf45
![Page 46: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/46.jpg)
Browser Architecture
Chrome’s Multi-process
See http://www.khronos.org/assets/uploads/developers/library/2010_siggraph_bof_webgl/WebGL-BOF-2-WebGL-in-Chrome_SIGGRAPH-Jul29.pdf46
![Page 47: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/47.jpg)
Browser Architecture
Chrome’s Multi-process
See http://www.khronos.org/assets/uploads/developers/library/2010_siggraph_bof_webgl/WebGL-BOF-2-WebGL-in-Chrome_SIGGRAPH-Jul29.pdf47
![Page 48: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/48.jpg)
Browser Architecture
Chrome’s Multi-process
See http://www.khronos.org/assets/uploads/developers/library/2010_siggraph_bof_webgl/WebGL-BOF-2-WebGL-in-Chrome_SIGGRAPH-Jul29.pdf48
![Page 49: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/49.jpg)
Questions
In a multi-process is gl.Get* slow? Why?
What about security?
49
![Page 50: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/50.jpg)
Cross-Origin Resource Sharing
Images can’t always be used as texture sources. Why?
50
![Page 51: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/51.jpg)
Cross-Origin Resource Sharing
var img = new Image();img.onload = function() { gl.texImage2D(/* ... */, img);};img.src = "image.png";
Same domain is OK:
51
![Page 52: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/52.jpg)
Cross-Origin Resource Sharing
var img = new Image();img.onload = function() { gl.texImage2D(/* ... */, img);};img.crossOrigin = "anonymous";img.src ="http://another-domain.com/image.png";
Another domain requires CORS if supported:
52
![Page 53: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/53.jpg)
Cross-Origin Resource Sharing
Not all servers support CORS:
Browser
www.your-domain.com www.another-domain.com
html/js/cssfiles
Images filesused for textures
53
![Page 54: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/54.jpg)
Cross-Origin Resource Sharing
Use a proxy server:
Browser
www.your-domain.com
www.another-domain.com
html/js/cssfiles
Images filesused for textures
Images filesused for textures
“proxy.php?http://another-domain.com/image.png"
See http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/help/jshelp/ags_proxy.htm54
![Page 55: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/55.jpg)
Denial of Service Attacks
Long draw callsComplicated shadersBig vertex buffers
SolutionsKill long draw callsForbid further rendering
Lots of WebGL security info: http://learningwebgl.com/blog/?p=389055
![Page 56: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/56.jpg)
WebGL Libraries
Three.js: https://github.com/mrdoob/three.js/ Cesium: http://cesium.agi.com/ Many more:
http://www.khronos.org/webgl/wiki/User_Contributions
56
![Page 57: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/57.jpg)
WebGL Resources
WebGL Camps: http://www.webglcamp.com Learning WebGL: http://learningwebgl.com
57
![Page 58: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/58.jpg)
The Joys of JavaScript
Skip the next 30 slides if you already know JavaScript58
![Page 59: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/59.jpg)
JavaScript is weakly typed…
59
![Page 60: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/60.jpg)
JavaScript Type System
short, int, float, double. Who needs them?
var n = 1;
60
![Page 61: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/61.jpg)
JavaScript Type System
JavaScript has numbers, strings, and booleans:
var n = 1;var s = “WebGL”;var b = true;
61
![Page 62: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/62.jpg)
JavaScript Type System
This compiles:
var n = 1;var s = “WebGL”;var b = true;
var sum = n + s + b;
62
![Page 63: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/63.jpg)
JavaScript is a functional language…
63
![Page 64: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/64.jpg)
JavaScript Functions
Looks familiar:
Functions are first-class objects, so…
function add(x, y) { return x + y;}
var sum = add(1, 2);
64
![Page 65: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/65.jpg)
JavaScript Functions
Functions are objects:
var add = function(x, y) { return x + y;};
var sum = add(1, 2);
65
![Page 66: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/66.jpg)
JavaScript Functions
Pass functions to functions:
var add = function // ...
function execute(op, x, y) { return op(x, y);}
var sum = execute(add, 1, 2);66
![Page 67: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/67.jpg)
JavaScript Anonymous Functions
Why name functions?
function execute(op, x, y) // ...
var sum = execute(function(x, y) { return x + y;}, 1, 2);
67
![Page 68: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/68.jpg)
JavaScript Closures
Why limit scope?
var z = 3;
var sum = execute(function(x, y) { return x + y + z;}, 1, 2);
68
![Page 69: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/69.jpg)
JavaScript is a dynamic language…
69
![Page 70: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/70.jpg)
JavaScript Object Literals
Who needs struct? Create objects on the fly:
var position = { x : 1.0, y : 2.0};
70
![Page 71: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/71.jpg)
JavaScript Object Literals
Why not add fields on the fly too?
var position = { x : 1.0, y : 2.0};position.z = 3.0;
71
![Page 72: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/72.jpg)
JavaScript Object Literals
Who needs class?
72
![Page 73: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/73.jpg)
JavaScript Object Literals
Who needs class? Create functions too:var position = { x : 1.0, y : 2.0, min : function() { return Math.min(this.x, this.y); }};
73
![Page 74: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/74.jpg)
JavaScript Object Literals
Why not change min()?
position.z = 3.0;position.min = function() { return Math.min(this.x, this.y, this.z);};
74
![Page 75: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/75.jpg)
JavaScript Object Literals
Useful for passing to functions. Why?
75
![Page 76: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/76.jpg)
JavaScript Object Literals
Useful for passing to functions. Why? What do these arguments mean?
pick(322, 40, 5, 4);
76
![Page 77: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/77.jpg)
JavaScript Object Literals
Useful for passing to functions. Why? What do these arguments mean?
pick({ x : 322, y : 40, width : 5, height : 4});
77
![Page 78: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/78.jpg)
JavaScript does object-oriented…
78
![Page 79: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/79.jpg)
JavaScript Constructor Functions
function Vector(x, y) { this.x = x; this.y = y;}
var v = new Vector(1, 2);
79
![Page 80: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/80.jpg)
JavaScript Constructor Functions
function Vector(x, y) { this.x = x; this.y = y; this.min = function() { return Math.min(this.x, this.y); };}
Objects can have functions:
80
![Page 81: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/81.jpg)
JavaScript Constructor Functions
function Vector(x, y) { this.x = x; this.y = y;}
Vector.prototype.min = function() { return Math.min(this.x, this.y);};
Objects have prototypes:
81
![Page 82: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/82.jpg)
JavaScript Polymorphism
No need for virtual functions
function draw(model) { model.setRenderState(); model.render();}
82
![Page 83: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/83.jpg)
JavaScript Polymorphism
No need for virtual functions
var level = { setRenderState : function() // ... render : function() // ...};
draw(level); // Just works
83
![Page 84: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/84.jpg)
JavaScript Build Pipeline
See http://www.julienlecomte.net/blog/2007/09/16/
Concatenate Minify
Different than C++ Goal: fast downloads Common:
Alternative: fine-grain modules How do you deploy shaders?
.jsfiles
One .js file
“Compressed” .js file
84
![Page 85: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/85.jpg)
JavaScript Advice
Use JSHint Have excellent test coverage Use the Chrome and Firefox debuggers
85
![Page 86: OpenGL and WebGL](https://reader035.vdocuments.mx/reader035/viewer/2022081419/5681637c550346895dd459e4/html5/thumbnails/86.jpg)
JavaScript Resources
I promise I do not work for O'Reilly or Yahoo86