WebGL Is Supported By Most Browsers — Most of the Time

Working through yesterday’s post I found it necessary to test the code in multiple browsers and, when it failed, to use the debuggers to figure out where. The different examples I’ve put together for this site and for last week’s presentation all run and ran fine on Firefox, which is where I do most of my work. Everything worked in IE and Edge as well. Nothing worked in Chrome or Opera, even though everything worked in both last week.

That’s right — now you see it, now you don’t.

Exactly why things do or do not work is dependent on two major things: details of the latest browser version (particularly in how it leverages any GPU in the system for hardware acceleration) and the version of the WebGL and Three.js libraries themselves. As of today the failures always occur when trying to create the renderer object.

Within the Three.js code the code for creating the renderer object is here, and the variable _gl ends up with a value of null and throws an exception.

This happens regardless of which (current) version of Three.js I use, with some possibilities shown below:

What’s really mystifying is that this worked in Chrome sometimes and not other times. It never works in Opera, but did last week when I was giving the presentation.

There are a couple of ways to test to see whether your browser supports WebGL. On is to go to this site:

https://get.webgl.org

It tries to initialize a simple animation of a rotating cube. If you don’t see the cube then WebGL isn’t working on your browser on your system. The page gives you a link you can use to get more information about your browser but it only leads to a dead end when you do this in Opera.

There’s also a page that tells you how to include an upfront test in your own code that allows you to provide a message that WebGL has failed. I actually used the Detector.js version I found here, but any of the tests should work.

If you run into problems one of the other important things you can do is check the status of your display drivers. When I examined my graphics drivers on Windows 10 64-bit I found an error and went ahead an deleted and re-installed the driver. Surprise of surprises, WebGL and Three.js now work in all browsers on Windows. I know it has also worked reliably on iOS.

Interestingly, however, and I remember this from testing on my 3rd gen iPad a while back, the default background color is actually white in 3D scenes, unless you explicitly set it to something else, like in this example:

Obviously this has to happen after the 3D renderer is successfully initialized.

Here’s the test code I’ve been using, which is a slight rearrangement of one of the examples I included in my presentation:

A direct link to this is here. Don’t forget to grab a copy of Detector.js if you want to test this on your own system.

Bottom line: don’t be afraid to dig into any of this stuff. This technology is proven and should be fairly stable. If it doesn’t work it’s very likely that something in your system is out of whack.

This entry was posted in Software and tagged , . Bookmark the permalink.

Leave a Reply