WebGL Seminar TUT Technical Overview Arto Salminen, Matti Anttonen

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

Getting WebGL enabled browser See instructions on: 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: (the Chrome Canary Build) If you already have Chrome 7 or newer, try to execute it with --enable-webgl parameter

WebGL debugging WebGL Inspector.“What Firebug and Developer Tools are to HTML/JS, WebGL Inspector is to WebGL”. 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:

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: WebGL OpenGLOpenGL ESDirect3D Graphics Hardware OS Drivers:

WebGL in nutshell Specification closing on 1.0 WebGL is already available on nightly builds of Firefox, Chrome and Safari 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 Software rendering with OSMESA Very slow windowshttp://learningwebgl.com/blog/?p=11#install-minefield-mesa- windows

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

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: #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; }

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

More detailed pure WebGL example

More detailed GLGE example Demo: 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);

More detailed Copperlicht example Demo: orial6/index.html 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

WebGL - Possibilities HTML5 features WebSockets Offline Drag and drop Video and audio Geolocation CSS SVG Access to webcam possible (with flash for example) JavaScript -> scriptable Native apps (Qt for example) can embed a webview Kinect demo:

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

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: min (incl min for questions) Demo application for additional 2 op

Presentation Topics Frameworks C3DL ( Copperlicht ( CubicVR ( EnergizeGL ( GLGE ( O3D ( SceneJS ( SpiderGL ( three.js ( WebGLU ( X3DOM ( JigLibJS 3D Physics engines for JavaScript ( Some other topic?