Plane modelMatrix Order

[msimpson]

I'm having some trouble visualizing planes. I'm listening to planesadded on ARDisplay and attempting to render them as a THREE.Mesh using THREE.PlaneGeometry. For example:

function createPlane( plane ) {
  let mesh = new THREE.Mesh(
    new THREE.PlaneGeometry( plane.extent[ 0 ], plane.extent[ 1 ] ),
    new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } )
  );

  let matrix = new THREE.Matrix4();
  matrix.fromArray( plane.modelMatrix );
  mesh.applyMatrix( matrix );

  mesh.name = `plane-${ plane.identifier }`;
  scene.add( mesh );
}

display.addEventListener( 'planesadded', event => {
  event.planes.forEach( plane => createPlane( plane ) );
} );

The result of which are planes of seemingly the correct extent being added to the scene. However, their position seems incorrect and their rotation is most certainly wrong (vertical instead of horizontal).

I assume this is a result of incorrectly interpreting the given modelMatrix. In what order is this matrix given? I've tried the above method, matrix.fromArray, which assumes column-major and matrix.set( ...modelMatrix ) which assumes row-major.

I'm not well versed in transformation matrices, so any help would be appreciated.

[jsantell]

Check out the ARPlanes.js code that's used to visualize planes when using ARDebug, which is a bit more complicated since we have to tesselate the plane's vertices, rather than just using the extent -- you're also correct in understanding in of the modelMatrix. THREE.PlaneGeometry's vertices are vertical so you'll have to rotate the geometry by Math.PI / -2 on the X for it to be horizontal, which could be leading to the incorrect position/rotation you're seeing. Let me know if this helps!

[msimpson]

@jsantell
Thanks, that helped. I was able to modify the previous code to apply a -90deg rotation matrix to the modelMatrix before applying it to the mesh:

function createPlane( plane ) {
  let mesh = new THREE.Mesh(
    new THREE.PlaneGeometry( plane.extent[ 0 ], plane.extent[ 1 ] ),
    new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } )
  );

  let rotation = new THREE.Matrix4();
  rotation.makeRotationX( - Math.PI / 2 );

  let matrix = new THREE.Matrix4();
  matrix.fromArray( plane.modelMatrix );
  matrix.multiply( rotation );
  mesh.applyMatrix( matrix );

  mesh.name = `plane-${ plane.identifier }`;
  scene.add( mesh );
}

Now the planes are positioned and rotated correctly. However, I may switch to similar code from the example you provided as I'm attempting to apply physics and using these meshes as the ground. So having them fit the exact vertices would be best.

[jsantell]

Good luck! As a note, iOS planes are always rectangular, so the extents should be sufficient. ARCore on Android has convex polygons which require the tessellation seen in ARPlanes. We're looking at making ARPlanes more easily consumable outside of debugging so you'd just have to add your own texture if you wanted, something like that.

Good luck!

[msimpson]

I'll keep that in mind.

[lincolnfrog]

@msimpson just to clarify, on iOS we create a polygon using vertices that match the extent, so you should probably use the polygon on both platforms for maximum accuracy.

[msimpson]

Okay. Thanks.