Using WebGL with three.js

1. © 2018 Solteq. All rights reserved.
Easy 3d drawing with three.js
TampereJS June 2018

2. © 2018 Solteq. All rights reserved.
Jere Kuusela
• Software Developer at Solteq
• jere.kuusela@iki.fi
• jere.kuusela@solteq.com
• First talk ever!

3. © 2018 Solteq. All rights reserved.
WebGL
• JavaScript API to implement 3d graphics in modern browsers
• Wide support
• Uses HTML <canvas> element
• Uses hardware-acceleration
• Low level -> 
• Multiple higher level libraries
• three.js
• PhiloGL
• GLGE
• J3D
• …

4. © 2018 Solteq. All rights reserved.© 2018 Solteq. All rights reserved.
Demo 1

5. © 2018 Solteq. All rights reserved.
Recap of Demo 1
• Scene: Container for objects which you want to draw
• Objects: Actual objects which usually need both geometry and material
• Camera: Location and direction where you are looking at the scene
• Renderer: Uses WebGL to draw pixels based on the scene and the camera

6. © 2018 Solteq. All rights reserved.
Closer look at objects
• Base class for points, lines, meshes, cameras, scenes, lights …
• Every object can have children
• For example a camera can be attached to a geometry
• Most objects should have a parent
• You can only render one object (usually the scene) and its children
• Object’s location is relative to its parent <- IMPORTANT!
• Allows easily moving complex objects

7. © 2018 Solteq. All rights reserved.© 2018 Solteq. All rights reserved.
Demo 2

8. © 2018 Solteq. All rights reserved.
Recap of Demo 2
• A car built from a cone, 4 cylinders (tires) and a camera
• Cars were attached to a proxy object which was used to move them around
• No need to update locations of cars and tires manually
• An image was added as a floor for visual purposes
• The scene only directly included the floor and the proxy object!
• Camera can be toggled by simply changing which camera is used in render function

9. © 2018 Solteq. All rights reserved.
Controlling camera manually?
• No first class support for moving a camera with mouse
• But lots of examples which contain reusable code: https://threejs.org/examples/
• https://threejs.org/examples/#misc_controls_orbit
• https://threejs.org/examples/#misc_controls_trackball
• Have to download the required JS file manually
• But only a few lines of codes required to get it working

10. © 2018 Solteq. All rights reserved.
Lights and shadows
• Multiple choices: ambient, directional, spotlight, point, …
• This is where the easy ends
• Lots of things which can go wrong -> nothing appears on the screen 
• Use helpers to visualize lights and shadows when debugging

11. © 2018 Solteq. All rights reserved.© 2018 Solteq. All rights reserved.
Demo 3

12. © 2018 Solteq. All rights reserved.
Recap of Demo 3
• Imported camera controls JS-file
• One line of code to get it working properly
• Added a light to cars (copypaste from three.js documentation)
• But no light shows up
• Helper objects appear so can see that the light is there

13. © 2018 Solteq. All rights reserved.
Lights and shadows, again
• Lights require:
• Proper material (MeshStandardMaterial instead of MeshBasicMaterial)
• Ambient light unless you want the world be pitch black
• Spotlight must have the target location set and added to scene
• Shadows require:
• Light must be set to cast shadow
• Light shadow camera must have proper near and far
• Renderer must have shadowmap enabled
• Floor must be set to receive shadow
• Any other objects must be set to cast shadow

14. © 2018 Solteq. All rights reserved.© 2018 Solteq. All rights reserved.
Demo 4

15. © 2018 Solteq. All rights reserved.
Recap of Demo 4
• Changed floor material
• Added ambient light
• Fixed location of lights, added target location
• Also added another light to cars with help of clone()
• Fixed shadow near and far settings
• Added shadowmap to renderer
• Added receive shadows to floor
• Added static towers to cast shadows