EN VI

Import gltf scene and create bounding boxes using javascript?

How to Import gltf scene and create bounding boxes using javascript

I am currently developing an online browser 3d Game. The whole collision detection should be calculated both on the server and the client to obviate hackers.

As the physics engine I decided to use rapier as it seems to be the most up to date one. Now I need to load my game scene which I exported from blender as a .gltf file. To display it on the client side I just use the threejs gltf loader. However, on the server side I do not use threejs. Besides that I have to generate bounding boxes of all objects inside the scene to use it in rapier after loading the gltf file somehow.

How do I load the gltf file without threejs? How do I generate the bounding boxes? Should I maybe include the bounding boxes inside the gltf scene? Rapier does not seem to support it out of the box. I am not tied to rapier, but I would prefer it.

Solution:

Loading bounding boxes from glTF without the help of any preexisting library or loader will be a bit of a programming challenge, but it can be done. You'll use the browser's JSON parser of course, and a vector/matrix math helper library of some kind will come in quite handy.

Here's a general outline:

Parse the JSON portion of the glTF into an object we'll call glTF.
Read glTF.scene to get the default scene index, typically 0.
Get the root node list from glTF.scenes[sceneIndex].nodes, which is an array of indices into glTF.nodes[].
At each node from glTF.nodes[n], consider the transformations either in matrix or in translation, rotation, and scale. These will transform the node's bounding box and its children's.
Recurse down the node's children if it exists, it will be an array of indices of child nodes with their own transforms.
For all nodes found in steps 4 and 5, look for node.mesh which will be an index into the array of glTF.meshes.
For each mesh in step 6, look for an array of objects mesh.primitives. Unlike other arrays in glTF, the primitives are embedded directly in the meshes, not indexed separately.
For each primitive from step 7, look for primitive.attributes.POSITION which will be an index into an array of glTF.accessors[].
Position accessors in glTF are required by spec to have two arrays accessor.min[] and accessor.max[] which both have 3 elements for X, Y, and Z. This is your bounding box for the raw, un-transformed data in that mesh.

So now you've recursed down a whole structure, and found some bounding boxes out at the leaf nodes. These boxes enclose raw mesh data, and must be transformed by their parent nodes, grandparent nodes, all ancestor nodes' transformations to understand where these boxes are in model space.

Of course, if each mesh represents a separate physics object, then perhaps you don't want all the ancestor transformations. You could take the box as-is for raw mesh data, and take it's immediate parent node's transformation as the starting location for physics. You'll have to work out the details of what you want to happen here.

Note that things like animation, skinning, and morphing will add extra complexity into the bounding box calculations, but that's out of scope for this answer here. Good luck!