An introduction to WebGL

1. An introduction to WebGL Viktor Kovács

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

3. A little 3D modeling

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

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

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

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

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

9. 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.

10. What does a model contains? • Texture coordinate examples:

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

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

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

14. What is WebGL?

15. 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.

16. Browser compatibility

17. 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.

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

19. Introducing Three.js

20. 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. • https://github.com/mrdoob/three.js

21. 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.

22. 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);

23. 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 ();

24. 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);

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

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

27. 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);

28. 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);

29. 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);

30. 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

31. 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.

32. 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. Demo geometry = new THREE.CubeGeometry (1, 1, 1);

33. 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

34. 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. Demo function Update (){ mesh.rotation.z += 0.01; renderer.render (scene, camera); requestAnimationFrame (Update); }

35. 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

36. The End