5. WebGL API
WebGL™ is an immediate mode 3D rendering API designed for the web. It is derived from OpenGL® ES 2.0, and provides similar
rendering functionality, but in an HTML context. WebGL is designed as a rendering context for the HTML Canvas element. The
HTML Canvas provides a destination for programmatic rendering in web pages, and allows for performing that rendering using
different rendering APIs. The only such interface described as part of the Canvas specification is the 2D canvas rendering context,
CanvasRenderingContext2D. This document describes another such interface, WebGLRenderingContext, which presents the
WebGL API.
The immediate mode nature of the API is a divergence from most web APIs. Given the many use cases of 3D graphics, WebGL
chooses the approach of providing flexible primitives that can be applied to any use case. Libraries can provide an API on top of
WebGL that is more tailored to specific areas, thus adding a convenience layer to WebGL that can accelerate and simplify
development. However, because of its OpenGL ES 2.0 heritage, it should be straightforward for developers familiar with modern
desktop OpenGL or OpenGL ES 2.0 development to transition to WebGL development.
http://www.khronos.org/registry/webgl/specs/latest/1.0/
21. The popup is extensive and first shows
a mesh of the element drawn that can
be zoomed in
and out with the mouse wheel and
rotated while holding down a mouse
button.
BeginningWebGL for HTML5
27. scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0xDDDDDD, 0.00001);
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setClearColor(scene.fog.color,1);
renderer.setSize( window.innerWidth, window.innerHeight );
28. var mapUrl = "../images/molumen_small_funny_angry_monster.jpg";
var map = THREE.ImageUtils.loadTexture(mapUrl);
// Now, create a Phong material to show shading; pass in the map
var material = new THREE.MeshPhongMaterial({ map: map });
// Create the cube geometry
var geometry = new THREE.CubeGeometry(1, 1, 1);
// And put the geometry and material together into a mesh
cube = new THREE.Mesh(geometry, material);
// Turn it toward the scene, or we won't see the cube shape!
cube.rotation.x = Math.PI / 5;
cube.rotation.y = Math.PI / 5;
// Add the cube to our scene
scene.add( cube );
30. 1. Renderer
> webgl vs canvas (performance)
> CSS3DRenderer, SoftwareRenderer
2. Geometry
3. Material
4. Camera
5. 3d Model
6. Interactive
7. Particles
My ThreeJS Learning Experience
69. Interaction
WebGL is only a drawing system and, as such, has no
built-in support for hit detection. You need to build that
yourself. Thankfully, Three.js gives us the support we need
so that we can tell when the mouse is over an object.
WebGL: Up and Running
71. BeginningWebGL for HTML5
https://www.apress.com/9781430239963
WebGL: Up and Running
Learning Three.js:
The JavaScript 3D Library for WebGL
http://shop.oreilly.com/product/0636920024729.do?cmp=af-prog-books-
video-product-cj_auwidget217_0636920024729_4047008
http://www.packtpub.com/learning-three-js-javascript-3d-library-for-webgl/book
http://www.amazon.com/Learning-Three-js-JavaScript-Library-WebGL/dp/1782166289