WebGL has been enabledon all platforms that have a capable graphicscard

MozillaFirefox

Safari

–

disabled by default

Opera

InternetExplorer-

using third-party pluginssuch as

using third-party plugins such asIEWebGL

Mobile Browsers

NokiaN900

BlackBerryPlayBook

GoogleChrome

forAndroid

Firefox formobile

for Android

TheSony Ericsson

Xperia

range ofAndroid

Opera Mobile

12finalfor Android

Tizen

1.0

3D Theory

3D Objects

Meshes, Vertices,Faces andNormals

Colors and Textures

Phong reflectionmodel

UV Mapping

Transformations

Matrices

Shader-based drawing

Meshes

Apolygon meshis a collection ofvertices,edges

andfaces

thatdefines the shapeof a polyhedralobject in 3Dcomputergraphics andsolid modeling

Vertex (vertices)

Face

Normal vector

Faces visibility

Phong reflection model

Ambient

Ambient color is the color of an object where it is inshadow. This color is what the object reflects whenilluminated by ambient light rather than direct light.

Diffuse

Diffuse color is the most instinctive meaning of thecolor of an object. It is that essential color that theobject reveals under pure white light. It is perceivedas the color of the object itself rather than areflection of the light.

Phong reflection model

Emissive

This is the self-illumination color an object has.

Specular

Specular color is the color of the light of a specularreflection (specular reflection is the type of reflectionthat is characteristic of light reflected from a shinysurface)

Phong reflection model

UVmapping

World (Model–

View) Matrix

World (Model–

View) Matrix

worldMatrix

=

rotateMatrix

*translateMatrix

*scaleMatrix

rotateMatrix

=rotateX

*rotateY

*rotateZ

WebGL(glMatrix)

var

mvMatrix

= mat4.create();

mat4.translate(mvMatrix, [-1.5, 0.0,-7.0]);

mat4.rotate(mvMatrix,degToRad(rTri), [0, 1, 0]);

…rotateX,rotateY,rotateZ, scale

View (Camera) Matrix

Projection Matrix

Projection Matrix

WebGL

var

pMatrix

= mat4.create();

mat4.perspective(45,gl.viewportWidth

/gl.viewportHeight, 0.1, 100.0,pMatrix);

Shaders

Shaders

are

computerprograms

that runs onthe

graphics processing unit

andare usedtodo

shading

-

the production of appropriatelevels of light and darkness within animage.

Vertexshader

Runonce for each

vertex

given to the graphicsprocessor

Pixel(fragment)shader

Compute

color

and other attributes of each

pixel

Pipeline

Buffers

Attributes

Uniform variables

Varying variables

Modified varyingvariables

Vertexshader

attributevec3aVertexPosition;

attributevec4aVertexColor;

uniformmat4uMVMatrix;

uniformmat4uPMatrix;

varyingvec4vColor;

voidmain(void){

gl_Position

=uPMatrix

*uMVMatrix

* vec4(aVertexPosition, 1.0);

vColor

=aVertexColor;

}

Fragmentshader

precisionmediump

float;

varying vec4vColor;

void main(void) {

gl_FragColor

=vColor;

}

WebGL demo

http://learningwebgl.com/lessons/lesson04/index.html

Three.js

Three.js

is a lightweight

cross-browser

JavaScript library/API

used to createand display animated

3D computergraphics

on a

Web browser. Three.js scriptsmay be used in conjunction withthe

HTML5canvas

element,

SVG

or

WebGL.

Features

Renderers: Canvas, SVG and WebGL.

Effects: Anaglyph, cross-eyed and parallaxbarrier.

Scenes: add and remove objects at run-time; fog

Cameras: perspective and orthographic;controllers: trackball,

FPS, path and more

Animation: armatures,

forwardkinematics,

inversekinematics,

morph

and

keyframe

Features

Lights: ambient, direction, point and spotlights; shadows: cast and receive