Test WebXR
Closed this issue · 12 comments
Hi @Mugen87
I forked your awesome project, updated the dependencies, and gave WebXR a try. https://raw.githack.com/shenzhuxi/dive/master/app/index.html
I found that the default visible distance of the VR camera is very short. I tried to use updateRenderState() before this.renderer.render( this.scene, this.camera ); in https://github.com/shenzhuxi/dive/blob/master/src/core/World.js, but it didn't work. But I can do it in https://github.com/mrdoob/three.js/blob/master/examples/webxr_vr_ballshooter.html before renderer.render( scene, camera ). Did I miss anything specific settings in dive?
Another small issue, skeletonHelpers can't be seen in VR. Maybe I should create an issue in three.js.
BTW, I just moved the whole scene to make the VR camera inspect the moving bot.
let bot = this.entityManager.getEntityByName('Bot0');
if (bot) {
var v = new Vector3();
v.copy(bot.position);
this.scene.position.set(-1 * v.x , -1 * v.y, -1 * v.z);
}
Can you let me know what's the best practice to do it, please? Maybe something like function syncCamera( entity, camera )?
Thanks.
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.
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
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.
Dive applies the camera to the player's head when FPS mode is active:
Lines 596 to 600 in 56217e5
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.
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".
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^^.
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';
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';
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';
^
import { * } from 'three';
This syntax is incorrect. You have to use named imports or:
import * as THREE from 'three';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.
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.