WebGL & Three.js2012/11/30 Yi-Fan

WebGL

Khronos Group, not W3C

A royalty-free, cross-platform API

Based on OpenGL ES 2.0

Combines with other web content

How much time to WebGL became a W3C standard?

Browser Support

WebGL on Webpage

3D Coordinate Systems

Cameras, Perspective, Viewports, and Projections

Meshes, Polygons, and Vertices

Materials, Textures & Lights

Transforms and Matrices

ShadersExample: WebGL - Three.js + impactJS

Higher Level Libraries for WebGL

Three.js

GLGE

SceneJS

CubicVR

and more ...

Three.js Dos

Hides 3D rendering details

Object oriented

Fast

Supports interaction

Math

Built-in file format

Extensible

Works with 2D canvas

Three.js Dos

Feature rich: prebuilt objects like lights, geometries, particles, lines, animations, ...etc.

Examples

Three.js Don’ts

Not a game engine

Three.js Animations

Articulated Animation

Three.js Animations

Skinned/Skeletal Animation

Three.js Animations

Morphs

Animations using javascript

setTimeout

setInterval

requestAnimationFrame

Reference

Can I use...

Microsoft: no way to support WebGL and meet our security needs

WebGL: Up and Running

Shader

three.js

Better JavaScript animations with requestAnimationFrame