An introduction to WebGL Viktor Kovács

Content A little 3D modeling. What is WebGL? Introducing Three.js. Visualizing GDL objects.

A little 3D modeling

What does a model contains? It contains vertices, which are coordinates in the 3D space.

What does a model contains? It contains polygons which are refers to already existing vertices.

What does a model contains? Every polygon has a material which defines a color or a texture.

What does a model contains? Every polygon has a normal vector which defines the direction of the polygon.

What does a model contains? To be more exact, all of the vertices of the polygon has a normal vector.

What does a model contains? If a polygon has a texture, every vertex of the polygon has a texture coordinate, or a texture UV. It is a 2D coordinate which defines a mapping from an image on disk to the current polygon.

What does a model contains? Texture coordinate examples:

What does a model contains? The model built-up from polygons.

What does a model contains? Every polygon has a material.

What does a model contains? Every material has a texture.

What is WebGL?

WebGL is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser. No additional plug-in is needed. It is based on OpenGL, so it uses the video card calculation capacity. It is a very low-level API, so it is very hard to use without any framework. The target of drawing is a canvas element.

Browser compatibility Does not support, but there are workarounds: Install a plugin (Chrome Frame, IEWebGL), Emulate with java applet (JebGL). Fully supports in released versions. Fully supports in released versions, but disabled by default. Mobile browsers For example, these browsers supports WebGL: Nokia N900, Blackberry Playbook, Firefox for mobile, Opera mobile (Android only), Tizen

Use of pure WebGL WebGL is is a very low-level API, so if we would like to use it without any framework, we have to do a lot of work. –Write shaders (codes running on video card). –Compile, link and upload shader programs. –Define shader attributes and uniforms. –Create projection and modelview matrices. –Create buffers from vertices, normals and texture uv- s, and upload them to video card. –Draw everything uploaded.

Use of pure WebGL To create this simple triangle without using any framework its about 180 lines of code.

Introducing Three.js

Three.js is a library which makes easy to create WebGL publications. It hides every low-level operations, so we don't have to care about shaders, matrices, buffers and other OpenGL specific things. It has an own 3D model format, which is easy to understand and use.

Create our first Three.js site The main steps are the followings: –Create a renderer. –Create a scene. –Create a camera, and add it to the scene. –Create a material, and a geometry, and then create a mesh from these. –Add the mesh to the scene. –Add some light sources. –Render the scene.

Create a renderer There are 3 types of renderers in Three: –WebGLRenderer, –CanvasRenderer, –SVGRenderer. Create now a WebGLRenderer: var renderer = new THREE.WebGLRenderer (); renderer.setSize (800, 600); document.body.appendChild (renderer.domElement);

Create a scene Scene contains everything that should appear in the 3D view (cameras, meshes, light sources). Let’s create a scene: var scene = new THREE.Scene ();

Create a camera We can create two types of camera: –Perspective camera, –Orthographic camera. Now we create a perspective camera. var camera = new THREE.PerspectiveCamera ( 45, 800 / 600, 0.1, 10000); camera.position.set (3, 1, 2); camera.up.set (0, 0, 1); camera.lookAt (new THREE.Vector3 (0.5, 0.5, 0)); scene.add (camera);

Camera parameters Constructor: Field of view, aspect ratio, near and far cutting plane. Positions: Eye, center and up.

Create a material Three has a lot of material types, we use MeshLambertMaterial. var material = new THREE.MeshLambertMaterial({ color: 0x00cc00 });

Create a geometry Now we create quadrangle manually. var geometry = new THREE.Geometry (); geometry.vertices.push (new THREE.Vector3 (0, 0, 0)); geometry.vertices.push (new THREE.Vector3 (1, 0, 0)); geometry.vertices.push (new THREE.Vector3 (1, 1, 0)); geometry.vertices.push (new THREE.Vector3 (0, 1, 0)); var face = new THREE.Face4 (0, 1, 2, 3); face.normal = new THREE.Vector3 (0, 0, 1); geometry.faces.push (face);

Create a mesh From the material and the geometry we can create a mesh, and add it to the scene. var mesh = new THREE.Mesh (geometry, material); scene.add (mesh);

Add a light source There are a lot of light source types in Three. Now we add a white directional light from the position of the camera. var light = new THREE.DirectionalLight (0xffffff); light.position.set (3, 1, 2).normalize (); scene.add (light);

And finally, render the scene We only need the render function of the renderer, and the model appears on the canvas created by Three. renderer.render (scene, camera); Demo

Create geometry automatically Three has built-in geometry functions which can create basic shapes. We can create cube, cylinder, extrude, icosahedron, octahedron, plane, polyhedron, sphere, torus, tube, etc. These functions generates geometry objects which can use to build a mesh.

Create a cube If we would like to create a cube, we only need to create a CubeGeometry. This is a geometry object, but Three adds vertices, polygons, normals and texture uv-s automatically. geometry = new THREE.CubeGeometry (1, 1, 1); Demo

Load a texture With loadTexture we can load an image as a texture. After the load we can set it as a texture of a material. var texture = THREE.ImageUtils.loadTexture ('texture.jpg', new THREE.UVMapping (), function (image) { renderer.render (scene, camera); }); material.map = texture; Demo

Add some animation For animate the scene we have to write an update function which renders the scene, and calls itself continuously. Recommended to use the browser function requestAnimationFrame. function Update () { mesh.rotation.z += 0.01; renderer.render (scene, camera); requestAnimationFrame (Update); } Demo

Navigate with mouse For mouse navigation we need to add some mouse events. Down should be add to canvas, but move and up should be add to document. renderer.domElement.addEventListener ('mousedown', MouseDown); document.addEventListener ('mouseup', MouseUp); document.addEventListener ('mousemove', MouseMove); Demo

The End