Show your life with emotion

Thomas, VR Engineer (@thomasbalou)

Handling collisions in WebGL and THREEJS

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

Beloola historicFrom static world to procedural collision

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

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)

How to retrieve heightmap informations

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

Raycast and OctreeHow to handle collisions in high filled worlds

How to handle multiple meshs

● Multiple meshs in the same space

● Catch 2D user input in a 3D world

Using the raycast to catch mouse input

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

Using the octree in THREEJS

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

Calculating collisions in realtime

Handling avatar collisions in Beloola

Handling avatar collisions in Beloola

Handling avatar collisions in Beloola

Handling avatar collisions in Beloola

Thank you