WebGL Browser Report

WebGL is a software interface for accessing graphics hardware from within a web browser without installing additional plug-ins. Based on OpenGL ES 2.0, HTML5 WebGL allows a programmer to specify the objects and operations involved in producing high-quality graphical images, specifically color images of 3D objects.

The following table describes what level of support WebGL provides your web browser, as well as the dump of a static WebGL parameters more or less related to a web browser identity.

WebGL Support Detection

Does Your Browser Supports WebGL?
Is WebGL Enabled in Your Browser?
Browser User-Agent:

WebGL Context Info

Supported Context Name(s)[webgl, experimental-webgl, moz-webgl, webkit-3d]
GL VersionVERSION
Shading Language VersionSHADING_LANGUAGE_VERSION
VendorVENDOR
RendererRENDERER

Vertex Shader

Max Vertex AttributesMAX_VERTEX_ATTRIBS
Max Vertex Uniform VectorsMAX_VERTEX_UNIFORM_VECTORS
Max Vertex Texture Image UnitsMAX_VERTEX_TEXTURE_IMAGE_UNITS
Max Varying VectorsMAX_VARYING_VECTORS
Best Float PrecisiongetShaderPrecisionFormat(VERTEX_SHADER)

Rasterizer

Aliased Line Width RangeALIASED_LINE_WIDTH_RANGE
Aliased Point Size RangeALIASED_POINT_SIZE_RANGE

Fragment Shader

Max Fragment Uniform VectorsMAX_FRAGMENT_UNIFORM_VECTORS
Max Texture Image UnitsMAX_TEXTURE_IMAGE_UNITS
Best Float PrecisiongetShaderPrecisionFormat(FRAGMENT_SHADER)

Framebuffer

RGBA Bits[RED_BITS, GREEN_BITS, BLUE_BITS, ALPHA_BITS]
Depth / Stencil Bits:[DEPTH_BITS, STENCIL_BITS]
Max Render Buffer SizeMAX_RENDERBUFFER_SIZE
Max Viewport DimensionsMAX_VIEWPORT_DIMS

Textures

Max Texture SizeMAX_TEXTURE_SIZE
Max Cube Map Texture SizeMAX_CUBE_MAP_TEXTURE_SIZE
Max Combined Texture Image UnitsMAX_COMBINED_TEXTURE_IMAGE_UNITS
Max AnisotropyMAX_TEXTURE_MAX_ANISOTROPY_EXT
Miscellaneous :
AntialiasinggetContextAttributes().antialias
Angle
Supported WebGL Extensions[OES_texture_float; OES_texture_half_float; WEBGL_lose_context; OES_standard_derivatives; OES_vertex_array_object; WEBGL_debug_renderer_info; WEBGL_debug_shaders; WEBGL_compressed_texture_s3tc; WEBGL_depth_texture; OES_element_index_uint; EXT_texture_filter_anisotropic; WEBGL_compressed_texture_atc; ANGLE_instanced_arrays; WEBGL_compressed_texture_pvrtc; EXT_color_buffer_half_float; WEBGL_color_buffer_float; EXT_frag_depth EXT_sRGB; EXT_draw_buffers; EXT_blend_minmax; OES_texture_float_linear; OES_texture_half_float_linear; WEBGL_compressed_texture_etc1; WEBGL_dynamic_texture; WEBGL_shared_resources]

How to Enable or Disable WebGL in Your Web Browser

Firefox WebGL

WebGL in Mozilla Firefox is supported and enabled by default since the Firefox 4 and the Firefox for Android 19.

To enable or disable WebGL in Firefox, follow the simple steps:

  1. In the address bar, type about:config, without any http:// or www
  2. Click the button labeled «I'll be careful, I promise!»
  3. In Search field, enter webgl.disabled string
  4. Toggle webgl.disabled to true to disable WebGL, or to false to enable WebGL, please do not confuse

Chrome WebGL

WebGL in Google Chorme and Chromium is supported and enabled by default since the Chorme version 8.

To disable or enable WebGL in Google Chrome for Windows, Linux, Mac OS X, Chrome OS, follow the simple steps:

  1. In the address bar, type chrome://flags
  2. Use the CTRL + F shortcut to find the flags with the name WebGL, there will be two almost identical flag
  3. The flag named Disable WebGL applies to Mac, Windows, Linux, Chrome OS
  4. Switch it to Enable to disable WebGL, or to Disable to enable WebGL, please do not confuse
  5. Changes will take effect only the next time you launch Google Chrome. Click to appeared button Relaunch Now

To disable or enable WebGL in Google Chrome Android:, follow the simple steps:

  1. There is another flag with the name of Enable WebGL which applies only to Android version of the Google Chrome
  2. Switch it to Enable to enable WebGL, or to Disable to disable WebGL

In addition, there are command-line switchers:

  1. --disable-webgl turn off the WebGL
  2. --disable-3d-apis turn off all client-visible 3D APIs, in particular the WebGL and the Pepper 3D

? Safari WebGL

WebGL is in Safari for Mac OS X since version 5.1, but it's disabled by default.

To enable WebGL in Apple Safari follow:

  1. In the Mac OS X Menu Bar click Safari sub-menu, and select Preferences
  2. Go to Advanced tab, and turn on Show Develop menu in menu bar check-box
  3. From now there is a new Develop sub-menu
  4. Here you can Enable WebGL or Disable WebGL. No need to restart Safari, just reload web page

To make WebGL works in WebKit Nightly Builds, in the Terminal.app just type the following command:

defaults write com.apple.Safari WebKitWebGLEnabled -bool YES

Opera WebGL

WebGL in Opera is supported and enabled by default since the first Opera 12 Wahoo snapshots.

To enable or disable WebGL in Opera, follow the simple steps:

  1. In the address bar, type opera:config, without any http:// or www
  2. In Quick find input-box, type webgl keyword
  3. If Enable WebGL user preference is exists, switch value to 1 to enable WebGL, or to 0 to disable WebGL
  4. Click to Save button

Also you can go straight to this option by using the anchor: opera:config#UserPrefs|EnableWebGL

× Internet Explore WebGL

It's not even announced, and current IE 10 also didn't supports WebGL. Only way to use WebGL for Internet Explorer — is to install third parties plug-ins such as IEWebGL or Chrome Frame.

How to Detect WebGL and Gather the WebGL Browser Identifiers

This is a proper javascript function to detect WebGL support, with all kind of experimental WebGL context names and with checking of special cases, such as blocking WebGL functions by the Tor Browser.

It will report one of the three WebGL capability states:

  • WebGL is enabled — return TRUE, or return WebGL object, if the first argument was passed
  • WebGL is disabled — return FALSE, you can change it if you need
  • WebGL is not implimented — return FALSE

  1. function webgl_detect(return_context)
  2. {
  3.     if (!!window.WebGLRenderingContext) {
  4.         var canvas = document.createElement("canvas"),
  5.              names = ["webgl", "experimental-webgl", "moz-webgl", "webkit-3d"],
  6.            context = false;
  7.         for(var i=0;i<4;i++) {
  8.             try {
  9.                 context = canvas.getContext(names[i]);
  10.                 if (context && typeof context.getParameter == "function") {
  11.                     // WebGL is enabled
  12.                     if (return_context) {
  13.                         // return WebGL object if the function's argument is present
  14.                         return {name:names[i], gl:context};
  15.                     }
  16.                     // else, return just true
  17.                     return true;
  18.                 }
  19.             } catch(e) {}
  20.         }
  21.         // WebGL is supported, but disabled
  22.         return false;
  23.     }
  24.     // WebGL not supported
  25.     return false;
  26. }

The following WebGL demo script shows the gathering of a web browser identifiers through the WebGL, as in the tables above.

  1. // We have to pass the first argument to the function,
  2. // it returns WebGL 3D Context object instead of boolean:
  3. var context = webgl_detect(1);
  4. if (context)
  5. {
  6.     var gl = context.gl;
  7.     // Getting WebGL Context Name:
  8.     console.log( "WebGL Context Name: " + context.name );
  9.     // Getting WebGL identifiers:
  10.     console.log( "WebGL Version: " + gl.getParameter(gl.VERSION) );
  11.     console.log( "Shading Language Version: " + gl.getParameter(gl.SHADING_LANGUAGE_VERSION) );
  12.     console.log( "WebGL Vendor: " + gl.getParameter(gl.VENDOR) );
  13.     console.log( "WebGL Renderer: " + gl.getParameter(gl.RENDERER) );
  14.     // full list of exportable WebGL variables can be found here:
  15.     // https://www.khronos.org/registry/webgl/specs/1.0/#WEBGLRENDERINGCONTEXT
  16.     // Enumeration of supported WebGL Extensions:
  17.     var ext = [];
  18.     try {
  19.         ext = gl.getSupportedExtensions();
  20.     }catch(e) {}
  21.     var ext_len = ext.length;
  22.     if (ext_len) {
  23.         var ext_list = "";
  24.         for(var i=0;i<ext_len;i++) {
  25.             if (ext_list.length) {
  26.                 ext_list += "; ";
  27.             }
  28.             ext_list += ext[i];
  29.         }
  30.         console.log( "Supported WebGL Extensions: " + ext_list );
  31.     }
  32.     // Some variables can be obtained only through the specific extensions ...
  33.     // Getting Max Anisotropy:
  34.     var max, e = gl.getExtension("EXT_texture_filter_anisotropic")
  35.         || gl.getExtension("WEBKIT_EXT_texture_filter_anisotropic")
  36.         || gl.getExtension("MOZ_EXT_texture_filter_anisotropic");
  37.     if (e) {
  38.         max = gl.getParameter(e.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
  39.         if (max === 0) {
  40.             max = 2;
  41.         }
  42.     } else {
  43.         max = "Not available";
  44.     }
  45.     console.log( "Max Anisotropy: " + max );
  46. }

Further Reading

  1. WebGL Specification
  2. WebGL Public Wiki
  3. WebGL Security white paper
  4. WebGLReport on Github
  5. WebGL and 3D graphics