Question

On my website I host a WebGL game. When the WebGL fails to initialize it just shows a huge empty space on the page. Is it possible to show something different here when the initialization fails?

Here’s the website:
http://www.pabloproductions.be/Planetoids.html At the top you can play the game, if you have webGL enabled.

Answer 1

All of the Three.js examples that I’ve seen come with ‘Detector.js’…Works well, reports if your browser or video card does not support WebGL. Check it out…
https://github.com/mrdoob/three.js/

I’m using his Dector.js on the development version of my personal site (not deployed yet), and using the results as well to load alternate content in the event that WebGL is not supported by a user’s browser. Take a look in any of the examples at the Three.js repository, Detector.js is in the js folder, and the code is called at the top of most of the examples (if not all of them). I use it like this

if (! Detector.webgl ) {
    // run the same old javascript that I've been using here
}

and a

if ( Detector.webgl ) {
  // remove the head so I can run some WebGL stuff here
}

etc, etc…

and the reporting section I do this (the append code is for my site, put what you like of course…Basically put whatever you need in the ‘if NOT’ condition

if ( ! Detector.webgl ) {
        var underText;//this holds the element that we will use to draw in
        underText = document.getElementById("webgl-box");

        $('.webgl-box').append('<p style="font-size: 14px;"><img src="<?= $this->baseUrl() ?>/images/red-x.png" /> No, This page does NOT detect support for WebGL<br />\n\
                                       Here are some resources to help you get started with WebGL</p>');
        $('.webgl-box').append(Detector.getWebGLErrorMessage());

        $('.webgl-box').append('<p style="font-size: 14px;">Firefox for Android also supports WebGL</p>');

        }

The Detector.getWebGLErrorMessage() is whats returned from the Dector.js, just look in the source of Detector.js and you will see whats going on, detector.js is pretty small and you can modify it to return whatever ‘message’ or anything that you need as well.

Nice game by the way 🙂