WebGL - use JavaScript for 3D
visualization
By Christo Tsvetanov
Who am I?
 An Infragistics friend
 A long term enthusiast of 3D
 Fascinates of mobile perspectives
Web Graphics Library




A Khronos group standard
JavaScript meets the GPU
Fast programmable drawing
OpenGL ES 2.0 for HTML5 Canvas
Desktop Browsers
 Google Chrome – WebGL has been enabled
on all platforms that have a capable graphics
card
 Mozilla Firefox
 Safari – disabled by default
 Opera
 Internet Explorer - using third-party plugins
such as using third-party plugins such as
IEWebGL
Mobile Browsers







Nokia N900
BlackBerry PlayBook
Google Chrome for Android
Firefox for mobile for Android
The Sony Ericsson Xperia range of Android
Opera Mobile 12 final for Android
Tizen 1.0
3D Theory
 3D Objects
 Meshes, Vertices, Faces and Normals
 Colors and Textures
 Phong reflection model
 UV Mapping
 Transformations
 Matrices
 Shader-based drawing
Meshes
 A polygon mesh
is a collection of
vertices, edges
and faces that
defines the shape
of a polyhedral
object in 3D
computer
graphics and
solid modeling
Vertex (vertices)
Face
Normal vector
Faces visibility
Phong reflection model
 Ambient
 Ambient color is the color of an object where it is in
shadow. This color is what the object reflects when
illuminated by ambient light rather than direct light.
 Diffuse
 Diffuse color is the most instinctive meaning of the
color of an object. It is that essential color that the
object reveals under pure white light. It is perceived
as the color of the object itself rather than a
reflection 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 specular
reflection (specular reflection is the type of reflection
that is characteristic of light reflected from a shiny
surface)
Phong reflection model
UV mapping
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 computer programs that runs on
the graphics processing unit and are used to
do shading - the production of appropriate
levels of light and darkness within an image.
 Vertex shader
 Run once for each vertex given to the graphics
processor
 Pixel (fragment) shader
 Compute color and other attributes of each pixel
Pipeline
Buffers
Uniform variables
Attributes
Varying variables
Modified varying
variables
Vertex shader
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying vec4 vColor;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vColor = aVertexColor;
}
Fragment shader
precision mediump float;
varying vec4 vColor;
void main(void) {
gl_FragColor = vColor;
}
WebGL demo
 http://learningwebgl.com/lessons/lesson04/i
ndex.html
Three.js
 Three.js is a lightweight crossbrowser JavaScript library/API used to create
and display animated 3D computer
graphics on a Web browser. Three.js scripts
may be used in conjunction with
the HTML5canvas element, SVG or WebGL.
Features
 Renderers: Canvas, SVG and WebGL.
 Effects: Anaglyph, cross-eyed and parallax
barrier.
 Scenes: add and remove objects at run-time; fog
 Cameras: perspective and orthographic;
controllers: trackball, FPS, path and more
 Animation: armatures, forward
kinematics, inverse
kinematics, morph and keyframe
Features
 Lights: ambient, direction, point and spot
lights; shadows: cast and receive
 Materials: Lambert, Phong, smooth shading,
textures and more
 Shaders: access to full OpenGL Shading
Language (GLSL) capabilities: lens flare, depth
pass and extensive post-processing library
 Objects: meshes, particles, sprites, lines,
ribbons, bones and more - all with Level of
detail
Features
 Geometry: plane, cube, sphere, torus, 3D text
and more; modifiers: lathe, extrude and tube
 Data loaders: binary, image, JSON and scene
 Utilities: full set of time and 3D math
functions including frustum,
matrix, Quaternian, UVs and more
 Export and import: utilities to create Three.jscompatible JSON files from
within: Blender, openCTM, FBX, Max, and OBJ
Features
 Support: API documentation is under
construction, public forum and wiki in full
operation
 Examples: Over 150 files of coding examples
plus fonts, models, textures, sounds and
other support files
 Debugging: Stats.js, WebGL
Inspector, Three.js Inspector
Variables and functions
var renderer;
var scene;
var camera;
var cubeMesh;
initializeScene();
animateScene();
Create a render
if (Detector.webgl) {
renderer = new THREE.WebGLRenderer({
antialias : true
});
} else {
renderer = new THREE.CanvasRenderer();
}
Set the renderer
renderer.setSize(canvasWidth, canvasHeight);
document.getElementById("WebGLCanvas").ap
pendChild(renderer.domElement);
Create the scene and camera
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45,
canvasWidth / canvasHeight, 1, 100);
camera.position.set(0, 0, 10);
camera.lookAt(scene.position);
scene.add(camera);
Create mesh – texture, geometry, material
var cubeGeometry = new
THREE.CubeGeometry(2.0, 2.0, 2.0);
var sponsorsTexture = new
THREE.ImageUtils.loadTexture("Sponsors.png");
var cubeMaterial = new
THREE.MeshBasicMaterial({
map : sponsorsTexture,
side : THREE.DoubleSide
});
Create mesh and add to scene
cubeMesh = new THREE.Mesh(cubeGeometry,
cubeMaterial);
cubeMesh.position.set(0.0, 0.0, 4.0);
scene.add(cubeMesh);
Animate
function animateScene() {
xRotation += xSpeed;
yRotation += ySpeed;
cubeMesh.rotation.set(xRotation, yRotation, zRotation);
cubeMesh.position.z = zTranslation;
requestAnimationFrame(animateScene);
renderer.render(scene, camera);
}
Links - WebGL
 Tutorial:
 http://learningwebgl.com/blog/?page_id=1217
 Matrix library – glMatrix
 https://code.google.com/p/glmatrix/
Links – three.js
 Source
 http://mrdoob.github.io/
Expect very soon: SharePoint Saturday!
 Saturday, June 8, 2013
 Same familiar format – 1 day filled with sessions
focused on SharePoint technologies
 Best SharePoint professionals in the region
 Registrations will be open next week (15th)!
 www.SharePointSaturday.eu
Thanks to our Sponsors:
Diamond Sponsor:
Platinum Sponsors:
Gold Sponsors:
Swag Sponsors:
Media Partners: