I'm having trouble articulating my question, but I have some images that might help clarify things. In the ones labeled 'bad aspect', you can see the video appearing skewed/warped/stretched. Both examples are based on the same demo project: https://github.com/google-ar/three.ar.js/blob/master/examples/spawn-at-surface.html I took screenshots on my smartphone using both apps while holding my phone in portrait mode and then turning it diagonally.
https://i.sstatic.net/j0Xk6.jpg
https://i.sstatic.net/4Dmne.jpg
https://i.sstatic.net/npzo2.jpg
https://i.sstatic.net/GqOUA.jpg
I believe the solution may lie here: https://i.sstatic.net/Oed1c.png
The drawingbufferheight is set to 4096, but I think it should be 5661, matching the viewportheight. I tried manually changing it but couldn't get it to work. Any suggestions or hints?
(Currently using three.js, three.ar.js, and the webVR API)
edit: added some code snippets:
this.renderer = new THREE.WebGLRenderer({ alpha: true});
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.autoClear = false;
this.canvas = this.renderer.domElement;
document.body.appendChild(this.canvas);
this.scene = new THREE.Scene();
// Creating the ARView, which is the object that handles
// the rendering of the camera stream behind the three.js
// scene
this.arView = new THREE.ARView(this.vrDisplay, this.renderer);