Three.js Cookbook

Not all browsers currently support WebGL. When you create a page that uses the THREE.WebGLRenderer object, it is a good idea to make sure that the browser supports WebGL. If a browser doesn't support it, this will result in all kinds of strange JavaScript errors in the JavaScript console and an empty screen for the end user. To make sure that your WebGL projects work as expected, we'll explain how to detect WebGL support in a browser in this recipe.

Getting ready

In this recipe, as an example, we will use the 01.04-detect-webgl-support.html file, which you can find in the sources provided with this book. If you open this file, you'll see the following result if your browser doesn't support WebGL:

Let's take a look at the recipe to create the preceding example.

How to do it...

To detect WebGL and create the message WebGL is not-supported, we need to perform the following steps:

First, we'll create the CSS for the pop up to show when WebGL isn't supported.
Then, we need to detect whether the browser WebGL is supported. For this, we'll write a method that returns the values true or false.
Finally, we'll use the result from the previous step to either show the pop up or just continue.
In the following section, we'll look at these steps in detail:

The first thing you need to do is set up the CSS that we'll use:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .black_overlay {
        display: none;
        position: absolute;
        top: 0;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 1001;
        opacity: .80;
      }

      .white-content {
        display: none;
        position: absolute;
        top: 25%;
        left: 25%;
        width: 50%;
        height: 70px;
        padding: 16px;
        border: 2px solid grey;
        background-color: black;
        z-index: 1002;
      }

      .big-message {
        width: 80%;
        height: auto;
        margin: 0 auto;
        padding: 5px;
        text-align: center;
        color: white;

        font-family: serif;
        font-size: 20px;
      }

    </style>
    <title></title>
  </head>
  <body>

As you can see, there is nothing special in this CSS. The only thing that we will do here is create a number of classes that we'll use to create a pop-up message and hide the background. Next, we will define the HTML that is used to create the pop ups.

The following snippet shows you the HTML code, which will contain the message. Using the CSS that we previously defined we can show or hide this element:
```
    
    <div id="lightbox" class="white-content">
    <div class="big-message" id="message">
    
    </div>
    <a href="javascript:void(0)" onclick="hideLightbox()">Close</a>
    </div>
    <div id="fade" class="black_overlay"></div>
```
As you can see, we just create a number of div elements that are currently hidden. When we detect that WebGL isn't supported this will be shown by the two div elements by changing their visibility.

Next, let's take a look at the JavaScript you need to add to detect WebGL. We'll create the following function for it:

    // loosely based on the http://get.webgl.org function detectWebGL() {

      // first create a canvas element
      var testCanvas = document.createElement("canvas");
      // and from that canvas get the webgl context
      var gl = null;

      // if exceptions are thrown, indicates webgl is null
      try {
        gl = testCanvas.getContext("webgl");
      } catch (x) {
        gl = null;
      }

      // if still null try experimental
      if (gl == null) {
        try {
        gl = testCanvas.getContext("experimental-webgl");
        } catch (x) {
        gl = null;
        }

    }
    // if webgl is all good return true;
    if (gl) {
      return true;
    } else {
      return false;
    }
}

As you can see, we create an HTML canvas element and then try to create a WebGL context with the getContext function. If this fails, the gl variable is set to null but if it succeeds, the gl variable will contain the WebGL context. If the gl variable isn't null, it will return true. On the hand, if it is, it will return false.

Now that we're able to detect whether a browser supports WebGL or not, we'll use this function to show a pop up. For this recipe, we'll also show you a pop up when WebGL is supported:

    var hasGl = detectWebGL();
    if (hasGl) {
      showLightbox("WebGL is supported");
    } else {
    showLightbox("WebGL is not-supported");
    }

    function showLightbox(message) {
      var lightBox = document.getElementById('light');
      lightBox.style.display = 'block';

      var fadeBox = document.getElementById('fade');
      fadeBox.style.display = 'block'

      var msg = document.getElementById('message');
      msg.textContent = message;
    }

    function hideLightbox() {
      var lightBox = document.getElementById('light');
      lightBox.style.display = 'none';

      var fadeBox = document.getElementById('fade');
      fadeBox.style.display = 'none'
    }

And that is it for this recipe. If we add this to a web page, a browser that supports WebGL shows a pop up with WebGL is supported, if no WebGL is available, a pop up is shown with the text WebGL isn't supported. Besides this approach, you can also use the detector object provided by Three.js at https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js. If you include this file in your JavaScript, you can detect WebGL by checking the webgl attribute of the Detector object.

Three.js Cookbook

By : Jos Dirksen

Three.js Cookbook

By: Jos Dirksen

Overview of this book

Related Content you might be interested in

Current Title:

Three.js Cookbook

Detecting WebGL support

Getting ready

How to do it...