What Is WebGL and How to Enable It in Any Browser.
A couple of months ago I was working on my master’s project in computer science. I needed to create a wireframe for a web page. Well, I visited a couple of sites like ShaderToy, WebGL Earth, etc. to understand how graphical rendering works. But I was greeted with a message: “WebGL is disabled in your browser.” A couple of googling it turns out that WebGL is disabled by default in most browsers. So this is how you enable WebGL in your browser.
What is WebGL? Why do you need it?
Before we move on to enabling WebGL, let’s understand what WebGL is. WebGL now allows your browser to perform 2D and 3D rendering without installing additional plugins. It also allows the browser to use the hardware GPU to do the graphics processing instead of your CPU. This means that graphical rendering will perform better, and most importantly, it will work.
First of all, your browser must support WebGL. The exact way to check this is to simply visit this website. If you receive the message “Your browser supports WebGL,” we can continue to enable it.
So, if you are developing graphics on the web or writing scripts to render graphics in the browser, it will greatly improve performance. Also, it will kill the dependency on third party plugins.
How to enable WebGL in your browser
The way to enable WebGL depends on the browser you are using. Below is a method to enable WebGL in Chromium based browsers, Mozilla Firefox and Safari.
1. Google Chrome
Since Google Chrome is Chromium based, this method will work in most Chromium based browsers like Brave, Vivaldi, Opera, etc. Just make sure you are using the latest version of Google Chrome. To find your version of Chrome, click the menu icon in the upper right corner, click Help, and then About Google Chrome.
Assuming you are running the latest version of Chrome, we now need to allow Chrome to use our hardware GPU to do graphics computing. To do this, go to Chrome settings by typing “chrome: // settings” in the address bar.
On the settings page, scroll down to the Advanced hyperlink. Click on it to open the advanced settings of Google Chrome.
When Chrome’s advanced settings appear, go to the bottom of the page. You will see “Use hardware acceleration when available” under the “System” section. Click on the slider next to it to enable GPU hardware acceleration. Post this, you will see a Restart button appears. Click on it for Google Chrome to restart and apply the settings. Make sure there are no loaded or unsaved documents on other Chrome tabs.
After restarting Chrome, navigate to the Chrome checkboxes to enable WebGL. Enter “chrome: // flags” in the address bar.
In the Chrome Flags menu, find WebGL. You will see a flag titled “WebGL 2.0 Compute”, click the dropdown next to it and select “Enabled.” Post this, you will see a popup at the bottom asking you to restart Google Chrome. To do this, click the “Restart Now” button.
For Chrome Android and Chrome Mac, “Draft WebGL Extensions” must be enabled.
2. Mozilla Firefox
If you are using Mozilla Firefox, enabling webGl is quite simple and consists of two steps. Go to the settings menu by typing about: config in the address bar.
In the Settings menu, search for “webgl.force-enabled”. By default, the Preference is set to false. Double click on it to change the value to true. Restart Firefox for the changes to take effect.
Safari hides options for enabling WebGL under Developer Options & Experimental Features. So, to enable WebGL on Mac, we must first enable Developer Options. To do this, open the Safari browser and click Safari in the top menu bar. In the advanced menu, click on “Settings”.
When the Preferences dialog box opens, switch to the Advanced tab. At the bottom, check the “Show development menu in menu bar” option. This will enable developers or experimental Safari features. You should see a Develop option on the top menu bar.
Click on the “Development” menu and go to “Experimental Features”. On the advanced menu, click WebGL 2.0 to enable it. Restart your browser and Safari will have WebGL enabled.
Remember that most websites will still display graphics in the browser since the plugins have already been added to the web server. However, the graphics will be unstable and take much longer. Even if you are not a graphics developer, I would recommend that you enable WebGL to improve your graphics experience on the web.
Alternatively, if for privacy reasons you want to disable WebGL, you can disable it using the settings above, or use the ScriptSafe extension to block WebGL fingerprints.
If you have further problems or questions, let me know in the comments below.
What Is WebGL and How to Enable It in Any Browser