1. 1 29.4.2015 WebGL Seminar 2010 @ TUT http://lively.cs.tut.fi/seminars/WebGL2011/ Technical Overview Arto Salminen, Matti Anttonen firstname.lastname@tut.fi 17.12.2010

2. How To Get Credits Maximum number of credits: 3-5 op Attendance: 1 op Seminar presentation (30-45 minutes) on selected WebGL library/technology: 2 op Successfully written new demo application and/or written report on selected technology: additional 2 op 2 29.4.2015

3. Getting WebGL enabled browser See instructions on: http://learningwebgl.com/blog/?p=11http://learningwebgl.com/blog/?p=11 Minefield (Firefox development release) Go to the nightly builds page and get the appropriate version for your machinethe nightly builds page Install it (you’ll need to quit any running Firefox instances while this happens) Start Minefield Go to the page “about:config” Filter for “webgl” Switch the value “webgl.enabled_for_all_sites” to “true” Chrome Windows: http://tools.google.com/dlpage/chromesxs (the Chrome Canary Build)http://tools.google.com/dlpage/chromesxs If you already have Chrome 7 or newer, try to execute it with --enable-webgl parameter http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation 3 29.4.2015

4. WebGL debugging WebGL Inspector.“What Firebug and Developer Tools are to HTML/JS, WebGL Inspector is to WebGL”. http://benvanik.github.com/WebGL-Inspector/ Extension for injecting into pages Embed in an existing application with a single script include Capture entire GL frames Annotated call log with stepping/resource navigation and redundant call warnings GL state display Resource browsers for textures, buffers, and programs Available for Chrome and Safari only! WebGL’s error reporting mechanism based on calling getError Library available at: http://khronos.org/webgl/wiki/Debugginghttp://khronos.org/webgl/wiki/Debugging 4 29.4.2015

5. WebGL in nutshell Hardware assisted 3D rendering in browser Native -> No plugins needed Bases on OpenGL ES 2.0 Shaders Uses graphics card for faster graphics rendering Graphics are drawn in HTML5 element Khronos Group WebGL wiki: http://www.khronos.org/webgl/wiki/Main_Page http://www.khronos.org/webgl/wiki/Main_Page 5 29.4.2015 WebGL OpenGLOpenGL ESDirect3D Graphics Hardware OS Drivers:

6. WebGL in nutshell Specification closing on 1.0 WebGL is already available on nightly builds of Firefox, Chrome and Safari http://learningwebgl.com/blog/?p=11 WebGL requires OpenGL 2.0 capable graphics card ANGLE (Almost Native Graphics Layer Engine) OpenGL ES 2.0 interpreter for Windows Translates OpenGL ES 2.0 API calls to DirectX 9 API calls http://code.google.com/p/angleproject/ Software rendering with OSMESA Very slow http://learningwebgl.com/blog/?p=11#install-minefield-mesa- windowshttp://learningwebgl.com/blog/?p=11#install-minefield-mesa- windows 6 29.4.2015

7. WebGL rendering on Canvas element WebGL is rendering context for HTML5 Canvas Canvas is a rectangular area, that can be manipulated dynamically via JavaScript var canvas = document.getElementById("minigolf-canvas"); gl = canvas.getContext("experimental-webgl"); gl.viewportWidth = canvas.width; gl.viewportHeight = canvas.height; gl.clearColor(0.0, 0.0, 0.0, 1.0); … 7 29.4.2015 HTML page Canvas

8. Graphics Pipeline Vertex Shader Buffers (vertex arrays) Textures (images) Uniforms (call parameters) Fragment Shader Computes color of the pixel Render target or Framebuffer object for rendering to textures Shader Demo: http://spidergl.org/meshade/index.html 8 29.4.2015 #ifdef GL_ES precision highp float; #endif varying vec4 vColor; void main(void) { gl_FragColor = vColor; } attribute vec3 aVertexPosition; attribute vec4 aVertexColor; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; varying vec4 vColor; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); vColor = aVertexColor; }

9. Pure WebGL code vs WebGL libraries Numerous WebGL libraries rise the abstraction level of WebGL programming Using libraries often sets some restrictions for the implementation Pure WebGL has greater degree of freedom, but the coding is more complex Quality of WebGL libraries is varying Some libraries have a good documentation but no examples Others have only examples, but no documentation whatsoever 9 29.4.2015

10. More detailed pure WebGL example http://learningwebgl.com/blog/?p=370 10 29.4.2015

11. More detailed GLGE example Demo: http://www.glge.org/demos/leveldemo/http://www.glge.org/demos/leveldemo/ GLGE scene is predefined in level.xml Defines meshes, animations, scene, camera, lights, objects, groups etc. These can be defined dynamically inside JS code, too Scene logic is defined in JS code Logic is evaluated in a function called every 1 ms In some cases, logic can be implemented with DOM events (e.g. mouse events) Scene is rendered by calling GLGE.Renderer render() function 11 29.4.2015 function render(){ now=parseInt(new Date().getTime()); mouselook(); checkkeys();... gameRenderer.render(); lasttime=now; } setInterval(render,15);

12. More detailed Copperlicht example Demo: www.ambiera.com/copperlicht/documentation/tutorials/demos/tut orial6/index.html www.ambiera.com/copperlicht/documentation/tutorials/demos/tut orial6/index.html 3D world is loaded from an external file called ”room.ccbjs” Worlds can be edited with CopperCube tool Camera and cameraAnimator are added to the scene on JS side CollisionResponseAnimator is initialized to enable simple physics Key events are handled with DOM events When spacebar is pressed collision handling get’s done with a 3D line created dynamically Key event is passed on to Copperlicht engine 12 29.4.2015

13. WebGL - Possibilities HTML5 features WebSockets Offline Drag and drop Video and audio Geolocation CSS SVG Access to webcam possible (with flash for example) http://www.peternitsch.net/blog/?p=741 JavaScript -> scriptable Native apps (Qt for example) can embed a webview Kinect demo: http://vimeo.com/17489850http://vimeo.com/17489850 13 29.4.2015

14. More demos Google’s shiny teapot demo Google’s particle demo SpiderGL shadows Pl4n3’s RTS CopperLicht’s Quake demo ChemDoodle 3D WebGL slideshow editor - http://fhtr.org/editor/ http://webgldemos.thoughtsincomputation.com/shooter http://alteredqualia.com/three/examples/materials_normalmap.html http://bodybrowser.googlelabs.com/body.html http://www.eucfutsal2011.com/webgl/minigolf/multi.php 14 29.4.2015

15. Student presentation and demo Introduction high-level overview, purpose of the technology, background/history Technical overview of the technology Small examples Walkthrough of a more comprehensive example illustrating the use of the technology Evaluation benefits, drawbacks, general usefulness, possible measurements Summary Presentation length: 30-45 min (incl. 10-15 min for questions) Demo application for additional 2 op 15 29.4.2015

16. Presentation Topics Frameworks C3DL (http://www.c3dl.org)http://www.c3dl.org Copperlicht (http://www.ambiera.com/copperlicht)http://www.ambiera.com/copperlicht CubicVR (http://www.cubicvr.org/)http://www.cubicvr.org/ EnergizeGL (http://energize.cc/)http://energize.cc/ GLGE (http://www.glge.org/)http://www.glge.org/ O3D (http://code.google.com/p/o3d/)http://code.google.com/p/o3d/ SceneJS (http://scenejs.org/)http://scenejs.org/ SpiderGL (http://spidergl.org/)http://spidergl.org/ three.js (https://github.com/mrdoob/three.js)https://github.com/mrdoob/three.js WebGLU (http://github.com/OneGeek/WebGLU/)http://github.com/OneGeek/WebGLU/ X3DOM (http://www.x3dom.org/)http://www.x3dom.org/ JigLibJS 3D Physics engines for JavaScript (http://www.jiglibjs.org/)http://www.jiglibjs.org/ Some other topic? 16 29.4.2015