Tutorial #1: WebGL Browsers

C3DL 2.x+ uses webGL. As of the the writing of this tutorial, this is supported in the current release versions of some browsers, and will be included in an upcoming release of several browsers. This tutorial discusses where to get a webGL enabled browser and how to enable it. NOTE:  because you are installing nightly builds of some browsers, it is possible that any one particular build may crash.  If you are having problems with a build try one that was done at a different time or on a different day.

Minefield (firefox):

As of Firefox 4 WebGL is supported and turned on by default. In some cases, graphics cards or device drivers have been ‘black-listed’ and will not display WebGL content. While this is done with good reason, you can get around this by forcing WebGL to be enabled, but this can have unpredictable results. Prior to taking this step it is better to check if there is a new version of the drivers for your graphics card.
  • In the address bar type: about:config .  This will give you a page with a warning and a button.  Hit the “I’ll be careful, I promise!” button.

    aboutconfig

  • in the filter bar type webgl
  • for webgl.force_enabled set the value to true (double click on it) enablewebgl
  • You may also want to set the preferences devtools.errorconsole.enabled and webgl.verbose to true. These will allow you to see detailed error messages.
  • If you are testing files locally (as the rest of the tutorials require) you will also need to set the flag security.fileuri.strict_origin_policy to false in order for textures to show up properly. WARNING: This preference is a security measure that you will want to have on during normal browsing. When you are done testing, you will want to set it back to true. Alternatively, set up separate profiles for testing and normal browsing.

Webkit (Safari):

You can download webkit nightly from: http://nightly.webkit.org/
Note that Safari and Webkit will only allow WebGL content on OSX 10.6 or higher.

Enabling webGL for OS X

open a terminal and type the command:
In the ‘Develop’ menu there is an option labelled ‘Enable WebGL’: If it isn’t checked, click it.

WebGL will now be enabled.

Chrome:

  • Download Chrome from: http://www.google.com/chrome/index.html
  • Or download Chromium from http://commondatastorage.googleapis.com/chromium-browser-continuous/index.html. Choose the folder for your OS. Within that folder, the highest numbered folder will be the most recent build.
  • WebGL is enabled on Chrome by default, but if you are testing pages locally (such as the other tutorials posted here) you will need to start Chrome from the command line and use the flag ‘–allow-file-access-from-files’. Note that this is not recommended for normal browsing as access to files stored on your computer is normally restricted as a security feature.

Test Page:

Go to this url using one of the webGL enabled browsers above: http://www.c3dl.org/index.php/webgl-demos/cross-browser-orbiter/ If you see something that looks like the image below then you have successfully configured a browser supporting webGL:

orbiter

Related Articles