Transcript lively.cs.tut.fi

1
WebGL Seminar 2010 @ TUT
http://lively.cs.tut.fi/seminars/WebGL2011/
Technical Overview
Arto Salminen, Matti Anttonen
[email protected]
17.12.2010
18.7.2015
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
18.7.2015
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
18.7.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/Debugging
18.7.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 <canvas> element
• Khronos Group WebGL wiki:
http://www.khronos.org/webgl/wiki/Main_Page
WebGL
OS Drivers:
OpenGL
OpenGL ES
Direct3D
Graphics Hardware
18.7.2015
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-mesawindows
18.7.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);
…
HTML page
Canvas
18.7.2015
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>
18.7.2015
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
18.7.2015
10
More detailed pure WebGL example
• http://learningwebgl.com/blog/?p=370
18.7.2015
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);
18.7.2015
12
More detailed Copperlicht example
Demo:
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
18.7.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/17489850
18.7.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
18.7.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
18.7.2015
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?
18.7.2015