wayneparrott / ezar-poi

Simple Cordova AR point of interest demo using ezAR and awe.js
MIT License
3 stars 1 forks source link

Awe.js objects hidden by video overlay? #2

Open squio opened 7 years ago

squio commented 7 years ago

Platform: Nexus 5X, current Android N.

Once the video overlay is switched on the awe.js renderings are hidden on the view. Wild guess: do video and webgl share the same surface view?

Quick demo: in index.js initialize the video overlay after a couple of seconds:

bindEvents: function () {
    window.addEventListener('load', this.onLoad, false);
    //  document.addEventListener('deviceready', this.onDeviceReady, false);
    setTimeout(app.onDeviceReady, 10000);
},

Initially the awe.js scene is visible, once the video starts it is cleared and replaced by the live camera video.

ezartech commented 7 years ago

Interesting. awe.js is rendering into the cordova webview. The ezAR VideoOverlay's camera view is a textureview (surface view) residing below the cordova webview. The webview's background is set to transparent to reveal video on the cameraview below. Are you able to remotely debug your app using the chrome dev tools? If yes, are there any error msgs on the console?

My devices keep failing and I'm down to a nexus 5/android 6 atm. Will see if I can get some hands-on testing on a more recent device.

squio commented 7 years ago

Chrome dev tools lists the following output during Aws.js initialization:

libs/awe.js/js/awe-standard-dependencies.js?_=1496175659127:649 THREE.WebGLRenderer 74
libs/awe.js/js/plugins/awe.rendering_effects.js?_=1496175659127:340 Your browser is not VR Ready
(anonymous) @ libs/awe.js/js/plugins/awe.rendering_effects.js?_=1496175659127:340
libs/awe.js/js/awe-standard.js?_=1496175659127:3269 scene_ready
libs/awe.js/js/plugins/awe.gyro.js?_=1496175659127:75 enable gyro
libs/awe.js/js/plugins/awe.mouse.js?_=1496175659127:136 enable mouse
libs/awe.js/js/awe-standard-dependencies.js?_=1496175659127:813 THREE.Shape: Duplicate point 22.29:-0.05
triangulateShape @ libs/awe.js/js/awe-standard-dependencies.js?_=1496175659127:813
libs/awe.js/js/awe-standard-dependencies.js?_=1496175659127:808 THREE.ShapeUtils: Unable to triangulate polygon! in triangulate()
(anonymous) @ libs/awe.js/js/awe-standard-dependencies.js?_=1496175659127:808
libs/awe.js/js/awe-standard-dependencies.js?_=1496175659127:813 THREE.Shape: Duplicate point 30.65:-0.05
triangulateShape @ libs/awe.js/js/awe-standard-dependencies.js?_=1496175659127:813
libs/awe.js/js/awe-standard-dependencies.js?_=1496175659127:808 THREE.ShapeUtils: Unable to triangulate polygon! in triangulate()

But at that point the Awe.js scene is stillrendeing correctly. From the point the video overlay is enabled the preview screen in dev tools starts flickering between white and black without causing any error messages.

Tapping randomly on the screen (phone or dev tools preview) emits log lines which suggest that the Awe.js view is active but just not visible:

triangulate polygon! in triangulate()
(anonymous) @ libs/awe.js/js/awe-standard-dependencies.js?_=1496175659127:808
libs/awe.js/js/awe-standard.js?_=1496175659127:2129 loaded text geometry n
5awe-standard-object_clicked_or_focused.js?_=1496175659127:116 0
2awe-standard-object_clicked_or_focused.js?_=1496175659127:116 2
3awe-standard-object_clicked_or_focused.js?_=1496175659127:116 0
awe-standard.js?_=1496175659127:3970 complete 1
5awe-standard-object_clicked_or_focused.js?_=1496175659127:116 0

Some of these lines repeated for each registered tap..

ezartech commented 7 years ago

Thx for the update. One more thing to try. While debugging you can run js directly in the chrome dev tools console. While the camera is running please try stopping the camera and see if the three.js rendering issue disappears.

ezar.getActiveCamera().stop()

Then restart it.

ezar.getBackCamera().start() or ezar.getFrontCamera().start()

Anything interesting happening?

squio commented 7 years ago

Interestingly, after the ezar.getActiveCamera().stop() command the screen turns back into white/grey-ish as before but without the Awe.js content. Turning the front camera or back camera on afterwards just works but doesn't reveal any Awe.js content either.

I ran another experiment where I don't start any camera's but only initialize the video overlay; this also overwrites / disables the AR content:

onDeviceReady: function () {

    if (window.ezar) {
        ezar.initializeVideoOverlay(
            function () {
            //     ezar.getBackCamera().start();
            },
            function (err) {
                alert('unable to init ezar: ' + err);
            });
    } else {
        alert('Unable to detect the ezAR plugin');
    }

}
squio commented 7 years ago

Just verified this with an older Nexus 5 running Android 6.0.1. Exactly the same issue.