Tutorial 01: Basics
Browsers
WebGL is supported by the most widespread browsers. See the following table for browsers and the version, since they support WebGL [1]:| Browser | Since version | Comment | ||
 |
Chrome | Version 8 | --- | |
 |
Firefox | Version 4 | If WebGL is not enabled, type "about:config" in your adress bar, search for "webgl.force-enabled" and switch it to "true". | |
 |
Safari | Version 5.1 | If WebGL is not enabled, open a terminal and execute "defaults write com.apple.Safari WebKitWebGLEnabled -bool YES". | |
 |
Opera | Version 12 | --- | |
 |
Internet Explorer | Version 11 | Older versions need one of the two already retired plugins 'Chrome Frame' or 'IEWebGL'. | |
So this is the first time, that you can provide 3D content without forcing the users to install special libraries or viewers. The currently well browser support will still be improved in the next time.
But even when a user with a non WebGL browser visits your page, Three.js gives you the possibility to share your content. You can render the scene with a hardware accelerated WebGL renderer, or, if WebGL is not supported, with a HTML 5 canvas renderer or a SVG renderer. To be honest, the canvas and the SVG renderer have some limitations in comparison to the WebGL renderer, but you can render your scene.
Three.js
Three.js is a lightweight JavaScript 3D library, which gives an easy access to WebGL. You don't have to write much code to get first results. Even complex scenes are quite easy to create. Some of it's main features are ...- Renderers: Canvas (HTML 5), SVG and WebGL. The Canvas renderer has some limitations in contrast to the WebGL renderer (e. g. no pixel z sorting).
- Cameras: Perspective and orthographic
- Lights: Ambient, direction, point and spot lights
- Materials: Lambert, phong and more
- Shaders: Vertex and fragment
- Loaders: Binary, image and JSON
- Additional libraries: CSG, physics, tweening, ...
- ...: see [2]
