Presentation about collision detection in WebGL using THREEJS on Beloola. Talk given at the SVWebGL meetup at Google HQ on the 8th of October 2015

1. Show your life with emotion
Thomas, VR Engineer (@thomasbalou)

2. Handling collisions in WebGL
and THREEJS

3. Beloola in a few words
● 6 years old company
● WebVR social platform
● User created 3D spaces
● Content aggregation
from best of breeds
platforms
● Customizable avatars
● Social interactions

4. Beloola historic
From static world to procedural collision

5. Beloola before: a static world
● Nice worlds handled by
designers but...
● Big 3D mesh
● Long download and
parsing time
● Static world, not easy to
modify

6. Using an heightmap for collisions
● Raster image: grid of
pixels containing
height datas
● Easy to read (.raw file)
● Lightweight
● But not fit for dynamic
collision2746*4000 pixel -> 36.6*53.04 meters (118*174 feet)

7. How to retrieve heightmap
informations

8. A clean slate for better worlds
● Moving forward from
static worlds to user
generated content
● Design of a builder tool
● Development of a
system of collision
between objects

9. Raycast and Octree
How to handle collisions in high filled worlds

10. How to handle multiple meshs
● Multiple meshs in the
same space
● Catch 2D user input in
a 3D world

11. Using the raycast to catch mouse
input

12. The octree algorithm
● External library by Collin Hover (https://github.com/collinhover/threeoctree)
● Subdivise the scene in cubes to simplify proximity
calculation
"Octree2" by WhiteTimberwolf

13. Using the octree in THREEJS

14. Handling collisions on movement
● Avatar has to check for
collision on movement
● Multiple collision
directions to look for
● Too much collision
detection can be costly

15. Calculating collisions in realtime

16. Handling avatar collisions in Beloola

17. Handling avatar collisions in Beloola

18. Handling avatar collisions in Beloola

19. Handling avatar collisions in Beloola

20. Thank you