Error creating WebGL context in Chrome but not in Android Browser

Question

I have built a very simple web GL site using Three.js which shows a spinning cube. When i run the site on my Android phone through the default android browser, the site works fine. However, when I use Chrome, i see the error:

Error creating WebGL context
THREE.WebGLRenderer
Uncaught TypeError: Cannot read property 'getShaderPrecisionFormat' of null

Im using Chrome v40.0.2214.109 and Android 4.1.2. I also tried with Chrome Beta and saw the same error. I need the site to work on Chrome on Android in other to be able to use the Chrome Developer Tools on the desktop. Any ideas?

UPDATE

When i go to http://get.webgl.org/ in Chrome for Android I get the message:

Hmm. While your browser seems to support WebGL, it is disabled or unavailable.

I then went to about:flags in Chrome for Android and saw that WebGL was disabled by default. I enabled and restarted but still i see "Hmm. While your browser seems to support WebGL...". I tried enabling other flags but to no avail. Eventually, i enabled every flag in Chrome for Android but still I see the message above. That link above works perfectly in Android Browser and Firefox for Android. Can anyone explain why WebGL will not work with Chrome for Android on Android v4.1.2?

Answer 1

Chrome has a blacklist for some devices and won't let the render to work properly on such chipsets. https://www.khronos.org/webgl/wiki/BlacklistsAndWhitelists#Chrome_on_Android You should have added the gpu you're using in the question. By the way, I have an android device with stock browser version 4.1.2 an it works flawlessly. Forget chrome, my experience with webgl on it is really negative. I wouldn't recommend it both on mobile and desktop. Also, if your demos are working on stock browser, they will work everywhere else thus I think that it's better to develop with it. Up to today (07/14/2015), the situation isn't changed and even firefox is better.

EDIT : you can try to activate some flags in Chrome Dev for android to force WebGL , but if you happen to be on a Mali400 or a PowerVR SGX 540, you will not have any luck even with the flags activated.

Answer 2

Here is a callback for the case you can't render webgl context:

var supportsWebGL = ( function () {
    try {
        return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' );
    } catch( e ) {
        return false;
    }
} )();

if(supportsWebGL){
    console.log("support");
}else{
    console.log("no support");
}