Test WebXR about dive HOT 12 CLOSED

After checking https://github.com/mrdoob/three.js/blob/dev/examples/webxr_vr_rollercoaster.html, I was surprised that nothing extra needs to be done after the XR session starts and it just works. The VR camera can move with the parent exactly like the PerspectiveCamera...
After I turned every stone, finally I found all I need to do is

--- a/src/core/World.js
+++ b/src/core/World.js
@@ -1,5 +1,5 @@
 import { EntityManager, Time, MeshGeometry, Vector3, CellSpacePartitioning } from 'yuka';
-import { WebGLRenderer, Scene, PerspectiveCamera, Color, AnimationMixer, Object3D, SkeletonHelper } from 'three';
+import { * } from 'three';

shenzhuxi@a0454a2#diff-be186b562ece83ee35ab7b4c4e3ccf11

from dive.

Did I miss anything specific settings in dive?

The current used version of three.js is R110. WebXR was improved over the last releases so you might have to upgrade to the latest version.

Another small issue, skeletonHelpers can't be seen in VR. Maybe I should create an issue in three.js.

Yes. AFAIC, SkeletonHelper was never tested in VR so far. If you do so, please ensure to share a simple test case that allows use to easily debug the issue. Dive is too complex for this.

Can you let me know what's the best practice to do it, please?

I've never implemented this before but I would start with a similar approach like the official three.js example webxr_vr_rollercoaster. The idea is to add the camera to a dolly object (in the demo's case the train). In Dive, this would be the bot.

from dive.

The current used version of three.js is R110. WebXR was improved over the last releases so you might have to upgrade to the latest version.

Forget it, I've done it right now: 56217e5

from dive.

I used the latest three.js "three": "0.115.0" https://github.com/shenzhuxi/dive/blob/master/package.json. With the same version, I can control the depthNear/depthFar in
https://github.com/mrdoob/three.js/blob/master/examples/webxr_vr_ballshooter.html but not in https://github.com/shenzhuxi/dive/blob/master/src/core/World.js. When the XR session starts in
dive the camera settings seems just different from the default values and can't be updated.

from dive.

Dive applies the camera to the player's head when FPS mode is active:

I assume that this bit does not work if WebXR is active at the same time. The VR camera should be controlled automatically by the event data of the user's headset (or in other words THREE.WebXRManager) and not by the mouse movement.

from dive.

Thanks!
shenzhuxi@87eec64
I found out what's wrong. I should change the camera in this.renderer.render().
this.camera = this.renderer.xr.getCamera(this.camera);
Now updateRenderState() is working and skeletonHelpers also display correctly.

After following the bot for a while, I found sometimes two of them just end up keeping aiming each other and not shot (the player was not active). BTW, I updated dependencies "yuka": "0.3.6".

from dive.

After following the bot for a while, I found sometimes two of them just end up keeping aiming each other and not shot (the player was not active).

Depending on your game state, they were probably out-of-ammo^^.

from dive.

After I turned every stone, finally I found all I need to do is

--- a/src/core/World.js
+++ b/src/core/World.js
@@ -1,5 +1,5 @@
 import { EntityManager, Time, MeshGeometry, Vector3, CellSpacePartitioning } from 'yuka';
-import { WebGLRenderer, Scene, PerspectiveCamera, Color, AnimationMixer, Object3D, SkeletonHelper } from 'three';
+import { * } from 'three';

shenzhuxi@a0454a2#diff-be186b562ece83ee35ab7b4c4e3ccf11

I'm sorry... I didn't fix it. I broke rollup... :(

src/core/World.js (2:9)
1: import { EntityManager, Time, MeshGeometry, Vector3, CellSpacePartitioning } from 'yuka';
2: import { * } from 'three';
^

from dive.

import { * } from 'three';

This syntax is incorrect. You have to use named imports or:

import * as THREE from 'three';

from dive.

Thanks @Mugen87 ...
If I got it right this time, it's this.uiManager.update( delta ). As soon as it starts, xrCamera.far will become 10. Probably because uiManager also has this.camera in it and OrthographicCamera's far/near will pass to xrCamera.

from dive.

The entire logic of UIManager is not valid for VR. The UI elements are in screen-space which can't be used when rendering to a headset.

I suggest you disable the usage of UIManager when XR is active.

from dive.

I think this can be closed. Please use the forum if you have more WebXR/three.js related questions.

from dive.