Different behavior in desktop, mobile vs. aframe, three.js - Githubissues

jeromeetienne / AR.js

Efficient Augmented Reality for the Web - 60fps on mobile!

MIT License

15.79k stars 2.22k forks source link

Different behavior in desktop, mobile vs. aframe, three.js #23

Closed PyryM closed 7 years ago

PyryM commented 7 years ago

If the sourceWidth, sourceHeight, displayWidth, and displayHeight are set the same in the aframe wrapper and the pure three.js version, in desktop (win10 x64, chrome 56.0.2924.87) both produce nearly identical outputs as you would expect (3js on left, aframe on right): aframe_vs_3js

In mobile (OnePlusOne, android 6.0.1), however, the same two webpages produce drastically different outputs (3js on left, aframe on right): aframe_vs_3js_mobile

Note that, in addition to the different aspect ratio and cropping, the aframe version seems to be at a lower resolution.

The two webpages are: https://jeromeetienne.github.io/AR.js/three.js/examples/mobile-performance.html https://hypogeum.info/misc/aframe_arjs_lowquality.html

The aframe example is exactly the example code from the readme, except with the settings changed to mirror the three.js mobile example:

<a-scene stats embedded artoolkit='sourceType: webcam; sourceWidth: 240; sourceHeight: 180; maxDetectionRate: 30; detectionMode: mono'>

jeromeetienne commented 7 years ago

i think i understand what is happening.

three.js examples got the display issue fixed (cc @blq) but the aframe doesnt have it yet.

jeromeetienne commented 7 years ago

Discussion with fredrick - open the webcam with the displayWidth, not the sourceWidth
- this.parameters.displayWidth
- maxWidth: this.parameters.sourceWidth
- source is influence resolution/performance of videoTexture (e.g. refraction, marker cloak)
- so full screen for normal demo, but when performance related (aka when using video as texture) then tune down the resolution

jeromeetienne commented 7 years ago

TODO in context, change sourceWidth/sourceHeight by canvas height

reevaluate all the options in aframe-ar

jeromeetienne commented 7 years ago

@PyryM it should work now. tell me how it goes

<a-scene stats embedded artoolkit='sourceType: webcam; sourceWidth: 240; sourceHeight: 180; maxDetectionRate: 30; detectionMode: mono'>

change sourceWidth into canvasWidth, and the same for canvasHeight

jeromeetienne commented 7 years ago

i did a mobile-performance for a-frame too

https://github.com/jeromeetienne/AR.js/blob/master/aframe/examples/mobile-performance.html

PyryM commented 7 years ago

Now it looks pretty similar in both threejs vs aframe on mobile: in landscape they are identical, and in portrait they seem to be at the same base resolution, but with slightly different cropping.

jeromeetienne commented 7 years ago

perfect. thanks for reporting this