slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
WebGL Seminar 2010 @ TUT http://lively.cs.tut.fi/seminars/WebGL2011/ Technical Overview Arto Salminen, Matti Anttonen fi PowerPoint Presentation
Download Presentation
WebGL Seminar 2010 @ TUT http://lively.cs.tut.fi/seminars/WebGL2011/ Technical Overview Arto Salminen, Matti Anttonen fi

Loading in 2 Seconds...

play fullscreen
1 / 16

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


  • 138 Views
  • Uploaded on

WebGL Seminar 2010 @ TUT http://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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'WebGL Seminar 2010 @ TUT http://lively.cs.tut.fi/seminars/WebGL2011/ Technical Overview Arto Salminen, Matti Anttonen fi' - bing


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1
WebGL Seminar 2010 @ TUT
  • http://lively.cs.tut.fi/seminars/WebGL2011/
  • Technical Overview
  • Arto Salminen, Matti Anttonen
  • firstname.lastname@tut.fi
  • 17.12.2010
how to get credits
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
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
webgl debugging
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
webgl in nutshell
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

webgl in nutshell1
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
webgl rendering on canvas element
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
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>

pure webgl code vs webgl libraries
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 pure WebGL example
  • http://learningwebgl.com/blog/?p=370
more detailed glge example
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);

more detailed copperlicht example
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
webgl possibilities
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
more demos
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
student presentation and demo
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
presentation topics
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?