OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2013.
OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.
-
Upload
irene-ford -
Category
Documents
-
view
221 -
download
0
Transcript of OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.
![Page 1: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/1.jpg)
OpenGL and WebGL
Patrick CozziUniversity of PennsylvaniaCIS 565 - Fall 2014
![Page 2: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/2.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 3: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/3.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 4: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/4.jpg)
OpenGL
GPU
Device Driver
OpenGL API
Application
Software stack:
![Page 5: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/5.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 6: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/6.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 7: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/7.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 8: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/8.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 9: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/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: Provide the shader’ssource code
Where should thesource come from?
Why can we pass more than one string?
![Page 10: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/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:Compile, but what does the driver really do?
![Page 11: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/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:
Good developers check for error. Again, how would you design this in C++?
Calling glGet* has performance implications. Why?
![Page 12: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/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:
Good developers also cleanup resources
![Page 13: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/13.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 14: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/14.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 15: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/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 Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/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:
Be a good developer again
![Page 17: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/17.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 18: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/18.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 19: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/19.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 20: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/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);
mat4 is part of the C++ GLM library
GLM: http://www.g-truc.net/project-0016.html#menu
![Page 21: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/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);
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 22: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/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);
Why not glUniform*(p, …)?
![Page 23: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/23.jpg)
The web has text, images, and videoWhat is the next media-type?
We want to supportWindows, Linux, MacDesktop and mobile
WebGL
23
![Page 24: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/24.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
24
![Page 25: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/25.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
25
![Page 26: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/26.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/26
![Page 27: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/27.jpg)
WebGL
If you know OpenGL, you already know WebGL If you know C++, the real learning curve is
JavaScript
27
![Page 28: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/28.jpg)
WebGL Alternatives?
Flash Silverlight Java Applets Unity
28
![Page 29: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/29.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");
29
![Page 30: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/30.jpg)
WebGL
The rest is similar to desktop OpenGL:
// ...gl.bindBuffer(/* ... */);gl.vertexAttribPointer(/* ... */);gl.useProgram(/* ... */);gl.drawArrays(/* ... */);
Checkout http://learningwebgl.com/30
![Page 31: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/31.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/31
![Page 32: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/32.jpg)
WebGL Performance
Performance can be very good. Why?
32
![Page 33: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/33.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=rfQ8rKGTVlg33
![Page 34: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/34.jpg)
WebGL Performance
Image from http://openglinsights.com/
32x32 64x64 128x128
C++ 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 128x128
C++ 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)34
![Page 35: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/35.jpg)
WebGL and other APIs
Take advantage of other web APIs:HTML5 <video>2D <canvas>CSS transformsComposite UI elementsWeb workersTyped Arrays
35
![Page 36: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/36.jpg)
HTML5 on Mobile
Touch events Geolocation Device orientation and motion
The future of HTML5 and WebGL on mobile is very promising
36
![Page 37: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/37.jpg)
WebGL on Your System
http://www.webglreport.com
37
![Page 38: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/38.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/38
![Page 39: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/39.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.pdf39
![Page 40: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/40.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.pdf40
![Page 41: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/41.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.pdf41
![Page 42: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/42.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.pdf42
![Page 43: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/43.jpg)
Questions
In a multi-process is gl.Get* slow? Why?
What about security?
43
![Page 44: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/44.jpg)
Cross-Origin Resource Sharing
Images can’t always be used as texture sources. Why?
44
![Page 45: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/45.jpg)
Cross-Origin Resource Sharing
var img = new Image();img.onload = function() { gl.texImage2D(/* ... */, img);};img.src = "image.png";
Same domain is OK:
45
![Page 46: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/46.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:
46
![Page 47: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/47.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
47
![Page 48: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/48.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.htm48
![Page 49: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/49.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=389049
![Page 50: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/50.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
50
![Page 52: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/52.jpg)
The Joys of JavaScript
Skip the next 30 slides if you already know JavaScript52
![Page 53: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/53.jpg)
JavaScript is weakly typed…
53
![Page 54: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/54.jpg)
JavaScript Type System
short, int, float, double. Who needs them?
var n = 1;
54
![Page 55: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/55.jpg)
JavaScript Type System
JavaScript has numbers, strings, and booleans:
var n = 1;var s = “WebGL”;var b = true;
55
![Page 56: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/56.jpg)
JavaScript Type System
This compiles:
var n = 1;var s = “WebGL”;var b = true;
var sum = n + s + b;
56
![Page 57: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/57.jpg)
JavaScript is a functional language…
57
![Page 58: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/58.jpg)
JavaScript Functions
Looks familiar:
Functions are first-class objects, so…
function add(x, y) { return x + y;}
var sum = add(1, 2);
58
![Page 59: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/59.jpg)
JavaScript Functions
Functions are objects:
var add = function(x, y) { return x + y;};
var sum = add(1, 2);
59
![Page 60: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/60.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);60
![Page 61: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/61.jpg)
JavaScript Anonymous Functions
Why name functions?
function execute(op, x, y) // ...
var sum = execute(function(x, y) { return x + y;}, 1, 2);
61
![Page 62: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/62.jpg)
JavaScript Closures
Why limit scope?
var z = 3;
var sum = execute(function(x, y) { return x + y + z;}, 1, 2);
62
![Page 63: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/63.jpg)
JavaScript is a dynamic language…
63
![Page 64: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/64.jpg)
JavaScript Object Literals
Who needs struct? Create objects on the fly:
var position = { x : 1.0, y : 2.0};
64
![Page 65: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/65.jpg)
JavaScript Object Literals
Why not add fields on the fly too?
var position = { x : 1.0, y : 2.0};position.z = 3.0;
65
![Page 66: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/66.jpg)
JavaScript Object Literals
Who needs class?
66
![Page 67: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/67.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); }};
67
![Page 68: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/68.jpg)
JavaScript Object Literals
Why not change min()?
position.z = 3.0;position.min = function() { return Math.min(this.x, this.y, this.z);};
68
![Page 69: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/69.jpg)
JavaScript Object Literals
Useful for passing to functions. Why?
69
![Page 70: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/70.jpg)
JavaScript Object Literals
Useful for passing to functions. Why? What do these arguments mean?
pick(322, 40, 5, 4);
70
![Page 71: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/71.jpg)
JavaScript Object Literals
Useful for passing to functions. Why? What do these arguments mean?
pick({ x : 322, y : 40, width : 5, height : 4});
71
![Page 72: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/72.jpg)
JavaScript does object-oriented…
72
![Page 73: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/73.jpg)
JavaScript Constructor Functions
function Vector(x, y) { this.x = x; this.y = y;}
var v = new Vector(1, 2);
73
![Page 74: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/74.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:
74
![Page 75: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/75.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:
75
![Page 76: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/76.jpg)
JavaScript Polymorphism
No need for virtual functions
function draw(model) { model.setRenderState(); model.render();}
76
![Page 77: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/77.jpg)
JavaScript Polymorphism
No need for virtual functions
var level = { setRenderState : function() // ... render : function() // ...};
draw(level); // Just works
77
![Page 78: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/78.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
78
![Page 79: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/79.jpg)
JavaScript Advice
Use JSHint Have excellent test coverage Use the Chrome and Firefox debuggers
79
![Page 80: OpenGL and WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2014.](https://reader035.fdocuments.in/reader035/viewer/2022062423/5697bf751a28abf838c8030c/html5/thumbnails/80.jpg)
JavaScript Resources
I promise I do not work for O'Reilly or Yahoo80