Cheap FPS collision detection with pure Three js?

Hi there,
I’m making a simple 3d ‘game’ where you can walk through a building that I made in Blender.
At the moment I’m using the collision detection that comes from ‘Octree.fromGraphNode()’. It works but is slow on my laptop.

^How the OctreeHelper renders.
I’m using a separate collision model which has 12294 triangles.

Does anyone know of a cheap collision detection method?

The general collision detection is expensive.

However, a well designed low-poly navmesh for high-poly models can make collision detection much faster.

1 Like

Thank you, I will try this method.
Looks promising.

1 Like

In the past, waypoints was the cheapiest method: a series of connected points representing ‘safe positions’. You can still use this approach today, but it leads to several limitations (i.e. it always solve using the same route, among other things). Navmesh on the other hand is way more fluid, and you can use it directly with you current collision detection approach (plus octree in your case).

Top view:

Using waypoints:

Using a walkable navigation mesh:

You can create your Navmesh in a dcc tool like Blender, in the same scale, position and orientation as the original building (keeping the same origin too), and export it like a regular mesh (i.e. gltf). If you prefer the CLI way, follow this post. At last, load the mesh, the material doesn’t matter since it only will be used for the collision detection.

The great @donmccurdy wrote the uber usefull three-pathfinding library, which takes points from the navmesh and computes a new path for your character movement -among others things, I strongly recommend giving it a try

1 Like

Maybe this capsule movement:



I have chosen to try the navmesh method, it seems like an effiecient way of calculating if the player is on the map.
Only downside is that jumping is not done easily on a navmesh.

A navmesh is just a really simplified version of your model.

You will create the octree from the navmesh, instead of using the complicated model that contains thousands of vertices.

You can quickly create a navmesh to use in blender, by placing and scaling some cubes where you think its important. Export the simplified model and then use that to generate the octee instead.

Use the visualizeDepth slider to see what a simplified octree might look like.

You can see in the above image, that there are possibly still too many unnecessary boundaries calculated, so you will get even better performance if you created the navmesh manually.

Many solutions to physics are N^2 problems. If it’s too slow, then you need to try different ways to optimise.

Here is a different solution I used to automatically create a navmesh for use in Cannon physics. It’s is a mesh of just the area that I want.



Eventually I manually made a navmesh in Blender for the building but it didn’t work as expected. Sometimes i’d walk on one triangle and then the player got teleported to another. I tried generating a navmesh in Unity but the quality was not good.
Now I just use an even more simplyfied collision model which has around 6k triangles. It works good and I figured if I want to increase performance Id probably do something with the other 3d buildings that are loaded into the scene.
Will post something this weekend I hope.

1 Like