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

1. 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

3. Getting WebGL enabled browser • See instructions on: http://learningwebgl.com/blog/?p=11 • Minefield (Firefox development release) • Go to the nightly builds page and get the appropriate version for your machine • 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) • 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

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/Debugging

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 <canvas> element • Khronos Group WebGL wiki: http://www.khronos.org/webgl/wiki/Main_Page WebGL OpenGL OpenGL ES Direct3D OS Drivers: Graphics Hardware

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-windows

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); … 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 • <canvas> or Framebuffer object for rendering to textures • Shader Demo: • http://spidergl.org/meshade/index.html <script id="shader-fs" type="x-shader/x-fragment"> #ifdef GL_ES precision highp float; #endif varying vec4 vColor; void main(void) { gl_FragColor = vColor; } </script> <script id="shader-vs" type="x-shader/x-vertex"> 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; } </script>

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

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

11. More detailed GLGE example • Demo: 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 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/tutorial6/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

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/17489850

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

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

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