Future of Web Apps 2014 – Three.js Workshop Live Blog
This is a live blog of Jeromes workshop at FOWA 2014 about Three.js and 3d – it will contain spelling mistakes!
Whats is WebGL?
WebGL stands for Web graphics library. Its open and works without plugins.
It allows you to embed 3d content into your webpage but this is not limited to 3d, you can also do 2d with it too and is compatible with most browsers now – even on mobile. You can find documentation for it on threejs.org.
You can create some very impressive results with WebGL – Jerome showed 2 examples of this – one with a ball bouncing in water and also a boy moving in a boat in a game like style – this looked great.
Three.js is managed by @mrdoob (who I think came over from flash originally).
Three.js is the JQuery of WebGL – it is the accepted standard of the community and is very well supported. Its only 100k after gzip.
There are many possibilities with OpenGL – the examples shown are very impressive. The good thing about WebGL is that you can view the source to work out how an effect is created. Jerome showed 2 examples of games in WebGL that are made with Three.js
The basic elements of three.js
What is a basic scene?
There are 3 core components:
and the renderer
The scene is the canvas that you draw on – where you set up your models and camera. – IN a kitchen, this would contain a fridge, coffee machine etc.
The camera is like a movie camera, its the viewpoint from which the users see the scene. You can have more than one camera and switch between.
The renderer is like taking a snapshot of the scene – it computes the image of the sceene through the camera.
In Three.js, you can use multiple different renders. You can use WebGL, deferred rendering, canvas2d or you can use a css 3 renderer.
The css renderer is more of a legacy thing as it was designed to be used when mobiles did not support WebGL. Mobile device support for WebGL is very young – only been in iOS since iOS 8.
To create a scene: var scene,. = new THREE.scene();
Then create a camera, var camera – new THREE.Persepective.Camera();
renderer: var render – new THREE.WebGLRenderer();
Then you need to do some tuning to fit the webpage and attach it to a dom element.
But we really have nothing here – just an empty scene!
When you create an object in 3d, you first create the object and then the material. For example we can create a cube and then tell WebGl how to reflect light from it.
You then need to create a mesh and then you can add the item to the scene. Then you just need to render the scene to see the object on the screen.
You can get a Three.js boilerplate from here: https://github.com/jeromeetienne/threejsboilerplate
This is only 72 lines and works on mobile and tablet.
Its very simple to change this example to draw different shapes. There are many pieces of geometry build into three.js – Cylinder, box, torus knot, octahedron etc.
However, when you do a real game in real life, you can get a model for more complex items such as people or a kettle.
There is no absolute unit in Three.js, but all of your units should be relative in the scene.
You can have one object that is 100 wide and another that is 0.5 wide – However, you can use scaling to resize things.
You can also set position and rotation for each element by updating the properties of the mesh when adding an object or at runtime.
In order to do things like animation you can hook into the rendering loops by adding a function to the onRenderFcts array. These functions run every time the rendering loop runs – therefore you can do things like adding values to rotation and scaling to an object.
You need to be aware though that this will work differently on different speed computers as this is dependant on the FPS
You can move items by using the transform matrix. All of the objects in our scene make up the scene graph, these are like a group of items that all move together. This can be useful where you want items to move in a group. These work in a hierarchy.
You can add objects by calling scene.add() and remove objects by using scene.remove(). You can add an remove objects at will. This doesn’t cost anything in WebGL terms and the object still exists so can be re-added at any time.
You need material to tell the light how to reflect from the object. You can update the colour, reflection and opacity for example.
There are many different materials built in. You can use things like normal reflection, wire frame etc.
You can also apply a texture image to objects – for example you apply a stone image to an object.
When applying materials, you must apply light by using new THREE.DirectionalLight() for example
You can also change the shading, to say whether you want to see the polygons for example by changing from FlatShading to SmoothShading.
You can apply textures in Three.js by applying a Map – you just use the THREE.ImageUtils.loadTexture() to load a texture from an image file.
You can import models from various 3d modelling programs into three.js – For example blender or Clara.io
You can use THREE.JsonLoader() to load the exported file
You can use lots of different options with light. You can use ambient, directional, spot etc. You can control the position intensity and also the colour of the light.
Ambient light is very basic but useful. You need some light to be able to see the objects in your scene. Ambient light has no direction,position or range but applies light evenly across the scene.
Directional light is different – it projects light in a given direction. You can think of this like sunlight – the source of the light is infinitely far and projects shadows.
Point light is light coming from a certain point and exerts light outwards – you can think of this like a light bulb or a a candle.
A spot light works like a torch and projects light in a cone shape.
The intensity of a light controls how brightly that light will shine. Light works just like any other object within your scene and you can affect its position/rotation and scale.
In order to debug lights you can use some of the helpers within three.js to display where the lights are in the scene.
We then went through the example at: http://learningthreejs.com/data/2014-01-10-flying-spaceship-minigame/slides/slides/