This document discusses WebGL and the Three.js library for 3D graphics in web browsers. WebGL is a cross-platform API for 3D graphics based on OpenGL ES 2.0. Three.js is a popular JavaScript library that makes WebGL easier to use by hiding rendering details and providing common 3D objects and features out of the box. Three.js provides feature-rich 3D capabilities for the web including lights, geometries, particles, animations and more through an object-oriented API.

1. WebGL & Three.js
2012/11/30 Yi-Fan

2. 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?

3. Browser Support

4. WebGL on Webpage

5. 3D Coordinate Systems

6. Cameras, Perspective,
Viewports, and Projections

7. Meshes, Polygons, and
Vertices

8. Materials, Textures &
Lights

9. Transforms and Matrices

10. Shaders
Example: WebGL - Three.js + impactJS

11. Higher Level Libraries for
WebGL
Three.js
GLGE
SceneJS
CubicVR
and more ...

12. Three.js Dos
Hides 3D rendering
details
Object oriented
Fast
Supports interaction
Math
Built-in file format
Extensible
Works with 2D
canvas

13. Three.js Dos
Feature rich: prebuilt objects like lights,
geometries, particles, lines, animations, ...etc.
Examples

14. Three.js Don’ts
Not a game engine

15. Three.js Animations
Articulated Animation

16. Three.js Animations
Skinned/Skeletal Animation

17. Three.js Animations
Morphs

18. Animations using
javascript
setTimeout
setInterval
requestAnimationFrame

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