Friday, March 8, 2013

Grouping Convex Meshes

‹prev | My Chain | next›

A while back, I was able to group Physijs objects in my Three.js simulations. I seem to have lost that ability.

I am trying to add a river bank to my simulation. Eventually it will be invisible, but for now I am using a mesh normal material so that I can see it:

I can see it, and I can see my “raft” melting into it.

My river segments are a combination of Physijs planar meshes (serving as a river segment frame of reference), convex meshes (the river “water”) and convex meshes (the banks). Because each segment has two banks, the banks are generated by a function:
  function bank(length, x) {
    var width = 100
      , half = width / 2;

    var bank = new Physijs.ConvexMesh(
      new THREE.CubeGeometry(length*.9, width, 50),
          new THREE.MeshNormalMaterial(), 0.2, 0.9
    // ...
    return bank;
I am taking those Physijs meshes and adding them to water mesh, which is added to the river segment:
    // ...
    var segment = new Physijs.PlaneMesh(
      new THREE.PlaneGeometry(10, 10),
      new THREE.Material()

    var water = new Physijs.ConvexMesh(
      new THREE.CubeGeometry(length, 500, 3),
      new THREE.MeshBasicMaterial({color: 0x483D8B})


    water.add(bank(length, 250));
    water.add(bank(length, -250));

    // ...
In the past, I found it important to add new objects to the grouping object before the main object was added to the scene. If the additional objects were added to the group after the group was already added to the scene, then Physijs would ignore those objects—kinda like it is ignoring the river bank now. Only now I am adding the bank to the segment before the segment is added to the scene and Physijs is still ignoring my bank.

It is possible that this is the result of a new version of Physijs. The previous version was 49 (I think). The current version being used for the games in 3D Game Programming for Kids is 52. Before pursuing the version theory, I start with a sanity check. Instead of adding the back to the river segment, I manually add it to the scene:
    // ...
    var b1 = bank(length, -250);
    b1.rotation.z = Math.PI/2;
    b1.position.set(-250, -750, 0);

    // ...
And that works just fine. My river raft now bounces of the bank/wall as desired. That is good to know, but I really need to be able to add the bank to the water in order to place these river segments end-to-end along the entire course.

My next step is to remove the segment and try adding the water directly to the scene without the segment's frame of reference. This actually works, which provides the clue needed to resolve this. It turns out that I cannot use a Physijs.PlaneMesh as the parent object. I convert it over to another convex mesh and it all works fine:
    var segment = new Physijs.ConvexMesh( /* ... */ );
    // ...    
    var water = new Physijs.ConvexMesh( /* ... */ );
    // ...

    water.add(bank(length, -250));
I can rationalize an explanation for this behavior—mixing and matching two and three dimensional physical meshes does not make much sense. Still, it worked at one point. I probably need to give this a try in the most recent version of Physijs and, if the behavior is still present, add an issue to the project. Happily, I have a solid workaround for the game, so I count that as progress.

Day #684


  1. Eh, I don't recommend the PlaneMesh anyway. I've seen a fair amount of weirdness in Ammo around planes, and they extend infinitely unlike planes in Three.js which have bounds. A flat HeightField mesh may also solve the issue entirely.

    1. Good to know. I've definitely seen (and been surprised by) the infinite plane behavior before. Actually, it has its uses, but I'll try to avoid it unless I have a definite need.

      Also... how have I completely missed HeightField meshes!? I know what I'm playing with tonight :D