Ezar-cube webgl issue on some android devices

[rawatrob]

Hi, I follow these step and get an issues with android I share the warning message in below

_THREE.WebGLRenderer 75 three.min.js:676 THREE.WebGLRenderer: OES_texture_float extension not supported. get @ three.min.js:676 three.min.js:676 THREE.WebGLRenderer: OES_texture_float_linear extension not supported. get @ three.min.js:676 three.min.js:676 THREE.WebGLRenderer: OES_texture_half_float extension not supported. get @ three.min.js:676 three.min.js:676 THREE.WebGLRenderer: OES_texture_half_floatlinear extension not supported.

But if Same code I will check it on ios then it working perfect..

And second question how to use it geolocation base AR

[ezartech]

This could be a limitation with your android device as others have reported similar issue on older devices, e.g., S3 https://bugs.chromium.org/p/chromium/issues/detail?id=578065 I will investigate and consider an alternative renderer such as canvas renderer.

[mkaouri]

Threejs is workng fine on iOS 10 iphone 7. So, considered to try Babylonjs too, it's working fine on Safari but has failed on the webview of ezAR, only the babylonjs scene is displayed without rendered textures.

I hope you can test babylonjs on ezAR and advise your solution. Thanks.

[mkaouri]

Maybe I should wrap the babylonjs javascript code inside of a DOMContentLoaded event handler, to be sure that the whole DOM is loaded before doing anything else.

 window.addEventListener('DOMContentLoaded', function() {
        // your code here
    });

Lastly, you should implement a little canvas/window resize event handler, like this:

window.addEventListener('resize', function() {
    engine.resize();
});

I will test it and see the result.

[mkaouri]

If the above solution doesn't work for babylonjs, try to use bGUI extension. https://doc.babylonjs.com/extensions/bgui

bGUI is the only solution is to create the GUI directly in the HTML canvas. This library can also fit to some people who want to control the game GUI in javascript without the need of jQuery or manipulating DOM objects.

[mkaouri]

Issue has been solved. I had to call the render function after document.addEventListener('deviceready', this.onDeviceReady, false);. I don't know what is wrong with onDeviceReady function.

Anyway here's the working script:

var app = {
    init: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
        app.renderBabylonjs();
    },

    onDeviceReady: function() {
        ezar.initializeVideoOverlay(
            function() {
                ezar.getBackCamera().start();
            },
            function(err) {
                alert('Error:' + err);
            }
        )
    },

    renderBabylonjs: function() {

        if (BABYLON.Engine.isSupported()) {

            var canvas = document.getElementById("renderCanvas");
            var engine = new BABYLON.Engine(canvas, true);

            var scene = new BABYLON.Scene(engine);

            //set scene background transparent
            scene.clearColor = new BABYLON.Color4(0,0,0,0.0000000000000001);

            var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 1, -25), scene);
            camera.attachControl(canvas);

            var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

            var assetsManager = new BABYLON.AssetsManager(scene);
            var knot = BABYLON.Mesh.CreateTorusKnot("mesh", 2, 0.5, 128, 64, 2, 50, scene);

            var material = new BABYLON.StandardMaterial("mat", scene);
            knot.material = material;
            material.diffuseColor = new BABYLON.Color3(1.5, 0, 0);

            var alpha = 0;
            knot.scaling.y = 1.5;

            var renderLoop = function () {
                scene.render();
            };
            engine.runRenderLoop(renderLoop);

            scene.beforeRender = function() {
                knot.rotation.y = alpha;
                alpha += 0.03;
            };
        }
    }
}

app.init();