Staircase effect in the xr controller when using float34 coordinates

, ,

Hello,

I’m working on the implementation of the VR controllers support in iTowns.

Since we are working in gps/global coordinates, I’m facing some difficulties to set the referenceSpace correctly.

By using this kind of coordinates, we are overflowing the float32 arrays used in XRRigidTransform (and more generally in the definition of ReferenceSpace). The resulting matrix has only rounded numbers to fit as float32.
(A bit related to Define behavior for non-invertible/representible XRRigidTransforms · Issue #1236 · immersive-web/webxr · GitHub)

const transform = new XRRigidTransform(new Vector3(4485948.637198923, 476198.0416370128, 4497216.056600053), quat);
const baseReferenceSpace = xr.getReferenceSpace();
const teleportSpaceOffset = baseReferenceSpace.getOffsetReferenceSpace(transform);
xr.setReferenceSpace(teleportSpaceOffset);

The consequences are that my controllers are moving in some kind of stairways pattern, not smoothly (see the video)

Do you have a way to correct this ?

Thank you
iTowns related issue

immersive-web related issue

Hi, i had a similar problem using huge number as coordinates, i solved it on my portfolio making the user always stay still in the center of the axis and moving all the scene instead of the camera.
Maybe is not possible in your case but I hope that can help.

1 Like

Hello, thank you for your answer.
As you guessed, in this case I can’t move the scene, the camera has to move. We have a world globe and the idea is that the user can move in this context. Some kind of google earth in VR.
I didn’t find similar cases online using threejs.

If you want to try to move the scene instead of the camera this is an example of a final result, in the space the camera is centered on 0 0 0 and with the movements commands the scene is shifted in the 3 directions, on the planets to simulate a round surface the camera is in x:0 y:50 z:0 and the whole scene rotate on the 0 0 0 simulating the movement, is a bit tricky to get started but it’s not difficult as it can look to go from moving the camera to move the scene and the end result for the user is the same.

But before doing all this work i can suggest you to try to move manually the camera in 0 0 0 and try your code from there to see if the problem still occur, maybe is something completely different and not fixable this way.

Thank you for your help.
I found a way to make it work in our context.
I’ve used the strategy of putting the camera in an object3d (xrGroup for example) and move the xrGroup where I want (at the camera position)
BUT by only doing this it wasn’t work for me because it changes the matrixworld of my camera.
So I’ve duplicated my camera ( → xrcamera), put the clone in xrGroup then in the xr animation loop, i’m getting back the new xrcamera location to put it in my original camera. I have to also update manually the projectionmatrix of my original camera.
By doing this, all the process of refreshing the scene (requesting/downloading/parsing tiles, objects etc) is using the updated value of the camera.
It’s really tricky.
It could have been nice to have more options when calling WebXRManager.js to manage the camera positions differently.
The updating of the projection matrix is also not perfect, because it is modified multiple times. I didn’t find a way to know when the webxr cameras are 100% initialized from WebXRManager. I’m using the condition getCamera().cameras.length == 2 but it doesn’t mean that they are fully initialized.

I’ll publish here my Merge Request (from GitHub - iTowns/itowns: A Three.js-based framework written in Javascript/WebGL for visualizing 3D geospatial data ) once it’s ready for the ones who want to check out the different tricks I had to use.

1 Like

Related MR