Skip to content

Collision Meshes

Jump to bottom
James Baicoianu edited this page Nov 3, 2017 · 13 revisions

JanusWeb supports several underlying means of collision detection. Full per-triangle mesh collision detection will be supported in the next release, but even when it is supported, it's not always the most ideal for performance, and it is sometimes desirable to define the collisions for your world in terms of simple primitives. One way to do this is by defining a collision mesh in Blender, and assigning materials with special names to denote the various primitive types.

  • _collider-sphere
  • _collider-box
  • _collider-cylinder

Let's walk through the process of building a collision mesh for a simple room. Keep in mind, we're looking to roughly block things out here and define an area which constrains the player within the world we've built. It doesn't have to be an exact match with the visual world - you can decide for yourself how detailed you want certain parts to be.

Summary

This article will cover the process of building this mesh for an existing world. It assumes some basic familiarity with Blender, specifically knowing how to translate, scale, and rotate objects, and how to edit basic material properties. For our example scene, it should take us about 15 minutes to add colliders to the scene.

If you need a refresher, the following articles could be useful:

The steps we will perform are:

  • Add collider meshes to the scene
  • Assign collider materials
  • Block out our scene with these collider meshes
  • Export collider mesh
  • Reference this collider mesh in our Janus room markup

Example

Here's the world we're working with. Nice and simple. We want to keep the player on the island, within the bounds of the fence.

For this world, let's start with a cylinder for the ground. Add a cylinder mesh to your scene. (NOTE - It helps to do this on a different layer from your main scene, this makes it easier to separate out your visual and collision scenes later. We'll work with both layers visible so we can line the two layers up with each other, by pressing alt+1 shift+1)

Let's set up the material first. Make sure we're using Blender Render, and not Cycles Render. Add a new material slot in the Material Properties panel, and name it "_collider-cylinder". Set its diffuse color to some value you like - I picked yellow. Give it an opacity too - 0.5 looks good to me.

Now go into the Object Properties panel, and check the "Transparency" checkbox. This will make it easier to line our colliders up with the visual world.

Now scale the cylinder to roughly fit the island. Give it some thickness - again, it doesn't need to be exact!

Let's block out some of the other objects now. We'll start with the stage. Add a cube to the scene

Same material setup as we did for cylinder. This time we'll call it "_collider-box", and we'll give it a slightly different color, just so we can tell them apart.

Again we scale, translate, and rotate until it fits roughly around the object. Object-relative axis-constrained manipulations are very useful here, double-tap the axis key (x, y, z) after choosing your manipulation tool (g, s, r)

Now we can start to block out the rest of the world. Duplicate this object, and repeat the process to fit it to the rest of the scenery.

For these boulders and trees, let's use spheres. Add a sphere to the scene - doesn't really matter if you choose IcoSphere or UV Sphere.

Same material setup as before, this time named "_collider-sphere". We choose orange here.

Clone and scale some more

We'll add in a few more cylinders for the trees. At this point we also changed cylinder colliders to be a tan color, just to set them apart.

Same thing on the other side.

And we're done! When you get the hang of it, this whole process takes about 15 minutes.

A quick render of the collision mesh without the visible scene lets us double check things. There are a few spots where maybe the player could squeeze through, but I think this looks good enough.

The final step is to export the mesh. OBJ works fine here. Select all the objects on your collision layer, and go to File -> Export -> Wavefront (.obj)

Give it a name, and make sure "Selection Only" is checked.

You're done! Now you can add this to your room as an <AssetObject id="..." src="..." />, and refer to it using <Object collision_id="..." />

Clone this wiki locally