Date post: | 15-Dec-2015 |
Category: |
Documents |
Upload: | isabella-darsey |
View: | 213 times |
Download: | 0 times |
1
18.04.23
WebGL Seminar 2010 @ TUThttp://lively.cs.tut.fi/seminars/WebGL2011/
Technical Overview
Arto Salminen, Matti Anttonen
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