XRRigidTransform: matrix property
The read-only XRRigidTransform
property
matrix
returns the transform
matrix represented by the object. The returned matrix can then be premultiplied with a
column vector to rotate the
vector by the 3D rotation specified by the orientation
, then translate
it by the position
.
Value
A Float32Array
containing 16 entries which represents the 4x4 transform
matrix which is described by
the position
and
orientation
properties.
Usage notes
Matrix format
All 4x4 transform matrices used in WebGL are stored in 16-element
Float32Array
s. The values are stored
into the array in column-major order; that is, each column is written into the array
top-down before moving to the
right one column and writing the next column into the array. Thus, for an array [a0, a1,
a2, …, a13, a14, a15], the
matrix looks like this:
On the first request, the matrix
gets computed. After that, it should be cached for performance reasons.
Creating the matrix
In this section, intended for more advanced readers, we cover how the API calculates the matrix for the specified transform. It begins by allocating a new matrix and writing a 4x4 identity matrix into it:
This is a transform that will not change either the orientation or position of any point, vector, or object to which it's applied.
Next, the position
is placed into the right-hand column, like this,
resulting in a translation matrix
that will transform a coordinate system by the specified distance in each dimension,
with no rotational change. Here
px, py, and pz
are the values of the
x
, y
, and z
members of the
DOMPointReadOnly
position
.
Then a rotation matrix is created by computing a column-vector rotation matrix from the
unit quaternion specified by
orientation
:
The final transform matrix
is calculated by multiplying the translation
matrix by the rotation matrix,
in the order (translation * rotation)
. This yields the final transform
matrix as returned by
matrix
:
Examples
In this example, a transform is created to create a matrix which can be used as a
transform during rendering of WebGL
objects, in order to place objects to match a given offset and orientation. The
matrix
is then passed
into a library function that uses WebGL to render an object matching a given name using
the transform matrix specified
to position and orient it.
js
let transform = new XRRigidTransform(
{ x: 0, y: 0.5, z: 0.5 },
{ x: 0, y: -0.5, z: -0.5, w: 1 }
);
drawGLObject("magic-lamp", transform.matrix);
Specifications
Specification |
---|
WebXR Device API # dom-xrrigidtransform-matrix |
Browser compatibility
BCD tables only load in the browser