Search code examples
javascriptandroidthree.jswebvrarcore

Three.ar.js bad aspect ratio creating stretched image?

Don't really know how to formulate the question but i got some pictures that might make things clear. In the ones i conveniently called 'bad aspect' you can see the video being a bid skewed/warped/stretched. The good and the bad one are based off the same demo project: https://github.com/google-ar/three.ar.js/blob/master/examples/spawn-at-surface.html I made printscreens on my smartphone with both apps where i hold my phone in portrait mode and then turn it diagonally.

good aspect1

good aspect2

bad aspect1

bad aspect2

And i think the clue can be found here: enter image description here

It makes drawingbufferheight into 4096 and i think it should be 5661, like the viewportheight. Tried changing it manually but i can't seem to make that work. Any ideas or clues?

(Using three.js, three.ar.js and the webVR API)

edit: some code:

    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);
Solution

  • it's not relevant anymore, i use another version now as they released a fix. What exactly happened remains a mystery