WebXR Polyfill broken with latest three.js

Questions
1

I’m not sure at what point it stopped working. The project seems to be vacant and I tried to depreciated it but got complaints. I’ve narrowed it down which features the polyfill stops working on. The equi video and stereo video. With equi video the distorter is black and when exiting rendering is broken and complains about a buffer missing. With sterep video the right eye flashes then dissapears.

The rollercoaster example is the only one I found to be working so far. Any ideas before continue to debug ?

These can be tested on Firefox desktop with webxr disabled

https://dev.electroteque.org/three/examples/webxr_vr_rollercoaster.html

Stereo video right eye is broken. Any stereo video setup is missing the right eye

http://dev.electroteque.org/three/examples/webxr_vr_video.html

equi video, no distortion rendering is black then returns as a black frame. Rendering breaks.

http://dev.electroteque.org/three/examples/webgl_video_panorama_equirectangular.html

1 Like
2

not really, you just need to scroll away from blackness, but of course the result is incorrect. the console says renderer.setSize call is blocked, so maybe that has a part in it :thinking:

3

I just caught that. So it is a camera position problem. That code is updating the camera position from mouse events. Its the examples in the repository. Its warping the rendering upwards when scrolling.

Its scrolling between eyes so not seperated. Its mono.

When exiting there is this error and no render. Like the vertex buffer is removed

WebGL warning: drawElementsInstanced: Vertex attrib array 0 is enabled but has no buffer bound. 31
After reporting 32, no further warnings will be reported for this WebGL context.

No idea about the stereo render the right eye disappears.

4

I have another demo with the same problem. But it displays in the “WebXR chrome extension” but I found after orbit controls rotation it shows up starting at the floor position.

http://dev.electroteque.org/three/examples/webgl_video_panorama_corrected.html

5

I found this framebuffer config works in WebXR I think. But existing causes framebuffer errors. So there is a bug setting buffers back up.

http://dev.electroteque.org/three/examples/webxr_vr_video2.html

I’m not sure if mono works. Its the same texture across both eyes

http://dev.electroteque.org/three/examples/webgl_video_panorama_corrected2.html

window.polyfill = new WebXRPolyfill({
		  webvr: true,
  cardboard: true,
		   allowCardboardOnDesktop: true,
		   cardboardConfig: {
			DIRTY_SUBMIT_FRAME_BINDINGS: true
		   }
		   
		});
6

Still working on this. This might have something to do with it also pretty bad. But there is a strange buffer problem

 CardboardVRDisplay.prototype.onResize_ = function (e) {
            	    if (this.layer_) {
            	      var gl = this.layer_.source.getContext('webgl');
            	      if (!gl) gl = this.layer_.source.getContext('experimental-webgl');
            	      if (!gl) gl = this.layer_.source.getContext('webgl2');
            	      var cssProperties = ['position: absolute', 'top: 0', 'left: 0',
            	      'width: 100vw', 'height: 100vh', 'border: 0', 'margin: 0',
            	      'padding: 0px', 'box-sizing: content-box'];
            	      gl.canvas.setAttribute('style', cssProperties.join('; ') + ';');
            	      safariCssSizeWorkaround(gl.canvas);
            	    }
            	  };
7

After hours of debugging. I was able to produce an AB test with Babylon. Aframe uses threejs. It works with Babylon therefore it’s something added into threejs that broke before 2020.

https://dev.electroteque.org/three/babylon/index.html

8

I cannot rotate the camera after I click the glasses, is that supposed to be like that

9

I’m looking back at that as people are expecting the IOS polyfill to be available. Nobody wants to touch it. It removes the right eye for the stereo video example but no buffer error.