1

18.04.23

WebGL Seminar 2010 @ TUThttp://lively.cs.tut.fi/seminars/WebGL2011/

Technical Overview

Arto Salminen, Matti Anttonen

firstname.lastname@tut.fi

17.12.2010

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

18.04.23

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

3

18.04.23

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

4

18.04.23

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

5

18.04.23

WebGL

OpenGL OpenGL ES Direct3D

Graphics Hardware

OS Drivers:

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

ows

6

18.04.23

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

18.04.23

HTML page

Canvas

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

8

18.04.23

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

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

18.04.23

More detailed pure WebGL example

• http://learningwebgl.com/blog/?p=370

10

18.04.23

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

11

18.04.23

function render(){ now=parseInt(new Date().getTime()); mouselook(); checkkeys(); ... gameRenderer.render(); lasttime=now; }setInterval(render,15);

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

12

18.04.23

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

13

18.04.23

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

18.04.23

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

18.04.23

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?

16

18.04.23