Getting Started - Three.js - page 16

Detecting WebGL support
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 sup-
ports 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-sup-
port.html file, which you can find in the sources provided with this topic. 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:
1. First, we'll create the CSS for the pop up to show when WebGL isn't suppor-
ted.
2. 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.