angular-template-for-threejs icon indicating copy to clipboard operation
angular-template-for-threejs copied to clipboard

Add WebXR support

Open playground opened this issue 6 years ago • 6 comments

Hi, I'm new to three.js, and I like how you're creating interfaces and services for it. I'm trying to port https://codelabs.developers.google.com/codelabs/ar-with-webxr/#6 to angular as way to learn webXR https://github.com/playground/angular-template-for-dummies/tree/web-xr, but I'm having trouble adding model to the scene. Tried to debug it but it's not throwing any errors. Thanks in advance for you help.

To test, clone https://github.com/playground/angular-template-for-dummies/tree/web-xr then "npm install" and "ng build web-xr" and point server to "dist/web-xr"

screen shot 2018-06-30 at 12 37 58 am

playground avatar Jun 30 '18 04:06 playground

This would be a cool feature indeed!

I think you have to call .render on your Three.js THREE.WebGLRenderer instance after adding a child to the scene. We also do this in our model loaders, which in turn lead to THREE.WebGLRenderer.render being called.

Do you know whether it is possible to test the WebXR API with a PC only, i.e. without a compatible device? I tried to enable the WebXR flags in Chrome Canary's chrome://flags section to no avail: this test site still shows "unsupported browser". I would really like to test out your fork 😄

ComFreek avatar Jun 30 '18 07:06 ComFreek

The demo on xr.plus looks very nice (checked on iPhone + Safari). Very interesting. Would need to setup a suitable VR development environment first. Agree with ComFreek, the emulator/simulator which will allow to debug on Chrome (ideally without real VR device) could considerably speed-up things.

makimenko avatar Jun 30 '18 08:06 makimenko

@ComFreek, currently one can only test in Chrome Canary behind a flag on a compatible device. Would be ideal if there is an emulator for testing/debugging. I will give .render a try sometime today. Thanks.

playground avatar Jul 01 '18 12:07 playground

@ComFreek with .render it is getting "WebGL: INVALID_FRAMEBUFFER_OPERATION: drawElements: cannot render to a WebVR layer outside of a frame callback"

image

playground avatar Jul 03 '18 15:07 playground

Let's wait for answer at the linked issue. Unfortunately, "cannot render to a WebVR layer outside of a frame callback" also yields no helpful Google results. Do you know what the "frame callback" refers to?

ComFreek avatar Jul 08 '18 17:07 ComFreek

@ComFreek actually, if look close enough and zooming in, something did get placed there.

image

playground avatar Jul 10 '18 21:07 playground