VRDisplay class (gone?) / WebVRManager / TypeScript issues

Questions
,
1

I’m trying to cobble together a workable Three boilerplate in TypeScript with a vr view and control for Oculus Go. I’m trying to build a project not in vanilla JS… and everything besides the VR view works.

I seem to have come across several different versions of WebVRManager, and no adequate typings. The current DefinitelyTyped interface references something called VRDisplay which no longer exists anywhere I can find it. Meanwhile, WebVRManager.js has a ton of dependencies that should probably be referencing the global THREE… I’ve attempted to rewrite it into a Typescript class, it goes to VR mode in Chrome but I’m still stuck with the spinning wheel in Oculus browser and I can only assume this has something to do with either scoping issues in WebGLAnimation when brought into Typescript, or maybe the bad assumptions being made in the DefinitelyTyped interface as it stands.

Is there, by any chance, a definitive Typescript build or set of definitions that corroborate with the current master?

All I’m trying to do is set up a scene, a renderer, and a VR button that works, and do it all in TS without any untyped classes or webpack-style “requires” (I’m using require.js for the initial bootstrap). The only thing I’m apparently missing is a WebVRManager that plays nicely with the existing three.d.ts and three.js standalones.

2

I can only help you with the first part of your question:

VRDisplay is not a class of three.js but a web interface of the WebVR API.

3

Thanks, that’s helpful… so I got the .d.ts to resolve that at least…

Another thing is, I’m using StereoEffect.js but it seems as if the (new?) version of WebVRManager has its own L/R stereo layers. Is StereoEffect redundant when using WebVRManager?

Also, WebVRManager has “bounds” as a property of PerspectiveCamera (cameraL/R) which is not defined in the TS spec of Object3D. So … that’s hackish… is there any sane way to do this without rolling everything out in plain JS?

1 Like
4

Yes, you don’t need this file.

5

Yes, removing it makes it mono until it goes to VR mode in Chrome, then it’s stereo. But OrbitControls stops working without this file (when I don’t run the render through the effect) Why would that be?

Unfortunately, still spinning wheel of death in Oculus Browser… even though no errors and running smoothly in “VR” in Chrome…

6

Sry, I don’t know. Can you reproduce the problem with a live example? I’ll take a look then.

7

It does work in a browser, so fiddle isn’t much use… but here is a link to the sample. In Chrome, this goes stereoscopic when you click the VR button. In Oculus browser it just goes to VR with a spinning wheel. This is clearly some scope issue in Typescript. If I put similar code in a tag in the main HTML it works fine.

http://thestrikeagency.com/vrtest2

8

Um, the code related to OrbitControls is commented out. Is that intentional?

/* TODO: ORBITING AND/OR VR MOVEMENT */
/* this.controls = new OrbitControls(this.camera, this.renderer.domElement);;
this.controls.minPolarAngle = 0;
this.controls.maxPolarAngle = Math.PI;
this.controls.minDistance = 0;
this.controls.maxDistance = Infinity;
this.controls.enableZoom = true; // Set to false to disable zooming
this.controls.zoomSpeed = 1.0;
this.controls.enablePan = true; // Set to false to disable panning (ie vertical and horizontal translations)
this.controls.enableDamping = true; // Set to false to disable damping (ie inertia)
this.controls.dampingFactor = 0.25; */
9

Yes, it stopped working once I disabled StereoEffect and started using WebVRManager only. I commented it out after that.

10

OH MY GOD. Of all the undocumented garbage.

The entire problem was calling requestAnimationFrame(renderer) instead of the (new? better? totally freakin undocumented?) renderer.setAnimationLoop().

For whatever reason, setAnimationLoop lets the VR transition proceed, while requestAnimationFrame leaves it hanging.

Oh wait, here it is buried in the Typescript on line 5672:

/**
     * A build in function that can be used instead of requestAnimationFrame. **For WebVR projects this function must be used.**
     * @param callback The function will be called every available frame. If `null` is passed it will stop any already ongoing animation.
     */

setAnimationLoop

Hey thanks for making that crystal clear.

** I’m just mad that I spent 10 hours of my life on this, but I still (sort of ) like this code (I miss Away3D, Starling and, ya know data typing in general).

11

Here is the documentation :wink:

https://threejs.org/docs/index.html#api/renderers/WebGLRenderer.setAnimationLoop

12

Heh. Thanks for the help.
The problem is the majority of Three.js examples don’t even use this call… so it’s very easy to miss it if you’re trying to do a WebVR project.

13

All WebVR examples actually use this method. If you are doing a WebVR project, it’s best to study the code of these files. You normally do just this to enable VR in three.js:

// tell renderer to perform vr-rendering

renderer.vr.enabled = true;

// add button so users can enter VR

document.body.appendChild( WEBVR.createButton( renderer ) );

// adjust animate() so it looks like this

function animate() {

    renderer.setAnimationLoop( render );

}
14

is it possible to use setAnimationLoop without WEBVR? is it possible to use setAnimationLoop and request AnimationFrame together in the same script ?

15

Yes, see Edit fiddle - JSFiddle - Code Playground.

I’m afraid this does not make sense. You want to use one of them but not both at the same time.