<h5 dir="auto">Description of the problem</h5>
<p dir="auto">As a dev, I'd like to align the XR view to an arbitrary space. It would help to be able to set an offset reference space for the WebXRManager, to be used when reading the getViewerPose and getPose from the XRFrame.</p>
<p dir="auto">Proposing:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// add an override reference space to use for reading XR poses
renderer.xr.setOffsetReferenceSpace(space: XRReferenceSpace);

// reset to the initial reference space
renderer.xr.resetReferenceSpace();"><pre class="notranslate"><code class="notranslate">// add an override reference space to use for reading XR poses
renderer.xr.setOffsetReferenceSpace(space: XRReferenceSpace);

// reset to the initial reference space
renderer.xr.resetReferenceSpace();
</code></pre></div>
<p dir="auto">WebXRManager.onAnimationFrame : if there is an offsetReferenceSpace set, prefer that space while reading the poses for the player/controllers during the <code class="notranslate">onAnimationFrame</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="frame.getViewerPose(offsetReferenceSpace || referenceSpace)
frame.getPose(offsetReferenceSpace || referenceSpace)"><pre class="notranslate"><code class="notranslate">frame.getViewerPose(offsetReferenceSpace || referenceSpace)
frame.getPose(offsetReferenceSpace || referenceSpace)
</code></pre></div>
<p dir="auto">Usage:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// Shift to an arbitrary position/alignment!

// From the base tracking space.
const baseReferenceSpace: XRReferenceSpace = renderer.xr.getReferenceSpace();

// offset the rotation by 30 degress
const playerRotation = new Quaternion().setFromAxisAngle(new Vector3(0, 1, 0), MathUtils.DEG2RAD * 30);
const offsetRotation = { x: playerRotation.x, y: playerRotation.y, z: playerRotation.z, w: playerRotation.w };

// offset the tracking to center on our player
const playerPosition = new Vector3(100, 1, 30);
const offsetPosition = { x: playerPosition.x, y: playerPosition.y, z: playerPosition.z, w: 1 };

const transform = new XRRigidTransform(offsetPosition, offsetRotation);
const viewerSpace = baseReferenceSpace.getOffsetReferenceSpace(transform);

renderer.xr.setOffsetReferenceSpace(viewerSpace);"><pre class="notranslate"><code class="notranslate">// Shift to an arbitrary position/alignment!

// From the base tracking space.
const baseReferenceSpace: XRReferenceSpace = renderer.xr.getReferenceSpace();

// offset the rotation by 30 degress
const playerRotation = new Quaternion().setFromAxisAngle(new Vector3(0, 1, 0), MathUtils.DEG2RAD * 30);
const offsetRotation = { x: playerRotation.x, y: playerRotation.y, z: playerRotation.z, w: playerRotation.w };

// offset the tracking to center on our player
const playerPosition = new Vector3(100, 1, 30);
const offsetPosition = { x: playerPosition.x, y: playerPosition.y, z: playerPosition.z, w: 1 };

const transform = new XRRigidTransform(offsetPosition, offsetRotation);
const viewerSpace = baseReferenceSpace.getOffsetReferenceSpace(transform);

renderer.xr.setOffsetReferenceSpace(viewerSpace);
</code></pre></div>
<p dir="auto">This will enable use of the native webxr XRRigidTransform and XRReferenceSpace for locomotion/movement without requiring the controllers + cameras conform to a specific hierarchy with the camera.parent to be placed at the guess of the floor location.</p>
<p dir="auto">The controllers already support alternate reference frames now by way of the <code class="notranslate">WebXRController.update(inputSource, frame, referenceSpace)</code> call, which is great, however without a way to set a referenceSpace on the WebXRManager:<br>
1: It only has a visible effect on the view if done in the scene.onBeforeRender (?)<br>
2: Shifting the controllers to a custom reference space duplicates the updates for everything in that hierarchy, which was more perf impactful than I'd imagined when using the XRControllerModelFactory controllers attached.</p>
<p dir="auto">Note: It <em>is</em> technically possible to use XRTransforms/XRReferenceSpace style currently, but requires a lot of ugly workarounds and intimate knowledge of what WebGLRenderer/WebXRManager is doing and when.</p>
<ul dir="auto">
<li>Noticing that the WebXRManager onAnimationFrameCallback includes the XRFrame in the callback, and storing/referencing the XRFrame in your setAnimationLoop.</li>
<li>Inserting a callback into scene.onBeforeRender to read the <code class="notranslate">frame.getViewerPose(myCustomReferenceSpace)</code>, and apply to the cameras.</li>
<li>very fragile!</li>
</ul>
<p dir="auto">I'm using Chrome 59.0.3071.125 on an android 5.1.1 device (Epson Moverio BT-300) and it looks like that the lights are not working correctly.<br>
Simple test when running the webgl_interactive_cubes example, all cubes are black beside the one active/selected. Same issue on webgl_geometry_colors, webgl_geometry_colors_blender examples.</p>
<p dir="auto">webgl_geometry_colors_lookuptable is working limited as colors are visible but detailed structure is not visible and colors are not as shiny as on other devices.<br>
Also MeshLambertMaterial document page shows a black canvas on the device instead of the blue shaded torusKnot. When changing the ambient light of the scene or the emission of the MeshLambertMaterial to a color it is at least flat visible (no 3d effect). Refraction and reflection are working.  When using the 'gras' map the torus becomes visible in a 3d manner.</p>
<p dir="auto">I did also several other tests and it seems that only Materials which are light independent (MeshNormalMaterial, textures) are rendered correct. Either shadows are not visible or the geometry stays black.</p>
<p dir="auto">Console does not show any error.</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Dev</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> r87</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> ...</li>
</ul>
<h5 dir="auto">Browser</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Chrome</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Firefox</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Internet Explorer</li>
</ul>
<h5 dir="auto">OS</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Windows</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> macOS</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Linux</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Android</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> iOS</li>
</ul>
<h5 dir="auto">Hardware Requirements (graphics card, VR Device, ...)</h5>