Personal tools


From MozillaWiki

Jump to: navigation, search


WebGL 2 prototype

The idea of "WebGL 2", that is, a variant of WebGL based on OpenGL ES 3.0, has been discussed for the past two years in the WebGL working group at Khronos (see this email). Interest in WebGL 2 has been on the rise recently in the WebGL working group, so we thought that it might be useful to start implementing a prototype of what WebGL 2 might look like. This is mostly just a naive WebGL-ification of the OpenGL ES 3.0 spec.

While this is being developed independently at Mozilla, this work is entirely public and the WebGL working group at Khronos is kept informed of these developments (see this email). The plan is for this work to accelerate the WebGL 2 standardization process at Khronos. For example, as Mozilla uses almost unmodified WebIDL as its interface definition language, this work is at least producing some machine-validated WebIDL for the WebGL 2 standardization process.

This WebGL 2 prototype is just that --- a prototype. It's insecure, relatively untested, and its API can change at any time. To prevent the real world from starting to rely on its API, this WebGL 2 prototype is only available in Nightly and (soon) Aurora, and not on the Beta and Release channels. Moreover, even on Nightly and Aurora, it is only available if a hidden preference has been manually added in about:config.


For anyone one who wants to tests and/or play with our WebGL 2 prototype, just be sure to add your email in CC list of the bug 894482. Feel free to report any WebGL 2 prototype's bugs by blocking 894492.

Playground - OpenGL extensions needed

To run the last WebGL 2 prototype, you will need the following extensions :

  • EXT_blend_minmax
  • {ARB,OES}_depth_texture
  • {ARB,EXT}_draw_buffers
  • {ARB,EXT,NV}_draw_instanced or ANGLE_instanced_arrays
  • OES_element_index_uint or desktop OpenGL
  • EXT_gpu_shader4
  • {ARB,NV,ANGLE}_instanced_arrays
  • ARB_occlusion_query or ARB_occlusion_query2 or EXT_occlusion_query_boolean
  • {ARB,OES}_packed_depth_stencil
  • OES_standard_derivatives or desktop OpenGL
  • {ARB,OES}_texture_float
  • OES_texture_float_linear or desktop OpenGL
  • {EXT,NV}_transform_feedback
  • {ARB,OES,APPLE}_vertex_array_object

If you can't run our WebGL 2 prototype because we have forgotten to support a similar OpenGL extension listed above, please feel free to contribute by filling in a bug blocking 894492. We would be happy to do necessary to enable you to be an active WebGL 2 contributor.

Specifics note:

  • Because EXT_packed_depth_stencil is blacklisted on Mac OS X 10.8 and before with Nvidia graphic card, WEBGL_depth_texture is not available on those OS X versions. Therefore WebGL 2 prototype is now only available on 10.9 for these mac users.

Playground - How to create a WebGL 2 context


Download the latest nightly or clone and build mozilla central by following this tutorial (the second solution would be longer).

Run it

Open your favorite command line editor and run the Firefox executable with followed parameters :

 -P webgl2_config -no-remote
  • Windows users : Actually, we are running WebGL on an ANGLE context that convert OpenGL ES 2 function calls to DirectX 11 calls. But we don't have the ANGLE update which provide an OpenGL ES 3 yet. Therefore, to force WebGL to use an OpenGL context on windows, set the environment variable MOZ_WEBGL_FORCE_OPENGL=1, before running Firefox.
 ./firefox.exe -P webgl2_config -no-remote
  • On mac :
 ./ -P webgl2_config -no-remote
  • Mozilla central :
 ./mach run -P webgl2_config -no-remote

That will let you run Firefox nightly in a separated configuration. This is important to run your nightly in a separated configuration, to not let WebGL 2 prototype's flags enabled on your everyday Firefox.

Configure it

Because WebGL 2 prototype is not secure at all, it's only available in nightlies and need to be enabled by a hidden flag. Beyond this point, your are running nightlies at your owns risks. We recommend you to do not use this nightly for something else than running WebGL 2 prototype code and keep using your default web browser for everyday use. In case of your default browser is Firefox, you will still be able to use it thanks by "-P webgl2_config".

  • Access to about:config in the url bar.
  • Right click -> New -> Boolean to create a new preference, name it webgl.enable-prototype-webgl2, and set it to true.

Note: You can also set webgl.enable-draft-extensions to true. That will let you use WEBGL_draw_buffers extension in WebGL 1.0.

Create the WebGL 2 prototype context

Javascript code :

 function createWebGL2Context(canvasId)
     var canvas = document.getElementById(canvasId);
     var gl = canvas.getContext("experimental-webgl2");
     if (!gl)
         // WebGL 2 not supported
         return false;
     if (!gl instanceof WebGL2RenderingContext)
         // unexpected rendering context.
         return false;
     return gl;

The test (!gl instanceof WebGL2RenderingContext) is just to make sure that this is a WebGL 2 context. But Firefox will return undefined or a valid WebGL2RenderingContext with a given "experimental-webgl2". For now, WebGL2RenderingContext inherit from WebGLRenderingContext. Therefore the test (gl instanceof WebGLRenderingContext) will also succeed.

WebGL 2 prototype shader

WebGL 2 prototype shader are only a GLSL 1.1 shader with #extension EXT_gpu_shader4 : enable. To get a WebGL 2 prototype shader, you just have to add "#version proto-200" at its very top. Everything defined before would be removed from the shader code. Not that any precision qualifier must be set in the code.

Vertex shader exemple :

 #version proto-200
 attribute vec3 vertexPosition;
 attribute vec3 vertexTangent;
 attribute vec3 vertexBitangent;
 attribute vec3 vertexNormal;
 attribute vec2 vertexUV;
 uniform mat4 modelMatrix;
 uniform mat4 viewMatrix;
 varying vec3 varyingTangent;
 varying vec3 varyingBitangent;
 varying vec3 varyingNormal;
 varying vec2 varyingUV;
 void main(void)
     gl_Position = viewMatrix * (modelMatrix * vec4(vertexPosition, 1.0));
     gl_Position.xy = gl_Position.xy * 0.5 + (float(gl_InstanceID) - 0.5);
     varyingTangent = (modelMatrix * vec4(vertexTangent, 0.0)).xyz;
     varyingBitangent = (modelMatrix * vec4(vertexBitangent, 0.0)).xyz;
     varyingNormal = (modelMatrix * vec4(vertexNormal, 0.0)).xyz;
     varyingUV = vertexUV;

Fragment shader exemple :

 #version proto-200
 uniform sampler2D albedoMap;
 uniform sampler2D normalMap;
 varying vec3 varyingTangent;
 varying vec3 varyingBitangent;
 varying vec3 varyingNormal;
 varying vec2 varyingUV;
 void main(void)
     vec3 albedo = texture2D(albedoMap, varyingUV).rgb;
     vec3 normal = texture2D(normalMap, varyingUV).rgb * 2.0 - 1.0;
     float specularFactor = pow((albedo.r + albedo.g + albedo.b) * 0.33, 2.0);
     float specularHardness = 2.0;
     vec3 spaceNormal = varyingTangent * normal.x +
                        varyingBitangent * normal.y +
                        varyingNormal * normal.z;
     gl_FragData[0] = vec4(albedo, 1.0);
     gl_FragData[1] = vec4(spaceNormal * 0.5 + 0.5, 1.0);
     gl_FragData[2] = vec4(specularFactor, specularHardness * 0.1, 0.0, 1.0);

For people who didn't recognize it yet, this two shaders code is part of a deferred shading's geometry pass, with normal mapping and instanced drawing.

Playground - WebGL extensions natively supported

Playground - Available features timeline

Playground - Known issues

  • gl.getParameter(gl.SHADING_LANGUAGE_VERSION) returns "WebGL GLSL ES 1.0"
  • Bad performance by using MOZ_WEBGL_FORCE_OPENGL=1 on Windows.
  • createQuery and deleteQuery generate a warning on desktop because ARB_occlusion_query might generate INVALIDE_OPERATION if one query is active.
  • gl.drawRangeElement don't check if indices are in [start,end] yet.

Playground - Useful links

Playground - Existing demos

To easily share WebGL 2 code between contributors and improve the experience, feel free to share your existing WebGL 2 demonstration by adding your URL right here. To do so : just fill a bug titled "wiki/Platform/GFX/WebGL2 - Add to existing demos" and blocking 894492 with a given URL to your WebGL 2 page. Please consider that running WebGL 2 might crashes on other users' platforms. Please prefer to load your demo with a button instead of at the page's loading, to let to the user a final chance to save his work on his others applications to prevent problems caused by driver or OS crashes. Your are running the following links at your owns risks.

Playground - Report a WebGL 2 bug

For contributors who want to report a bug, you can use the WebGL 2 bug report template. It automatically blocks 894492. Make sure to proceed all that steps :

  • Make sure that this bug have not already been reported.
  • Fill a quick summary beginning by "WebGL2 bug report - "
  • Fill a description of the bug.
    • With a copy of about:support
    • Any code or URL to a page showing the bug are very welcome!

Playground - Reported bugs by our contributors (blocking 894492)

ID Priority Summary Status Assigned to
898386 -- WebGL2 bug report -Firefox crashes in mozilla::WebGLContext::GenerateWarning with "MOZ_WEBGL_FORCE_OPENGL=1" UNCONFIRMED
900439 -- WebGL2 unable to initialize OpenGL on Linux/Nvidia GT 330M RESOLVED guillaume.abadie

Open; Resolved; Total (50% complete)


Development - Design decision

  • All WebGL functions must be implemented in WebGLContext
  • WebGL function member definitions of WebGLContext should be group by feature as OpenGL ES 3.0 quick reference card do into differents .cpp files
  • [ON TRACK] Move functions definition from WebGLContextGL.cpp to distinct cpp files grouped as same as quick reference card do
  • [ON TRACK] Restruct all .h lik WebGL1Context.h do

Development - Preliminary

  • [DONE] Add WebGL1Context inheriting from WebGLContext
  • [DONE] Add WebGL2Context C++ class inheriting WebGLContext
    • Only available in nightlies
    • Enable with about:config flag (webgl.enable-prototype-webgl2)
    • Add virtual func WebGLContext::IsWebGL2
    • Add WebGL2 IDL inheriting WebGL 1 IDL
    • Edit HTMLCanvasElement::GetContextHelper to allow experimental-webgl2
    • gl.getParameter(gl.VERSION) return "WebGL 2"
  • [CARRY OVER] Edit GLContext to allow getting a GL3 context; let WebGL 2 use it
    • On mac, all OpenGL contexts are shared to each others, therefor they all have to be the same version.
    • Current GFX shader not compatible with OpenGL 3.2 core profile
    • Would need to convert shader with ANGLE to the GLSL version we use.
  • [DONE] Bypass ANGLE shader compilation
    • Bypass only when the shader code contains #version experimental-webgl2
    • Add automatic provide GL_EXT_gpu_shader4

Development - High priority features

  • [DONE] Add existing WebGL 1 extensions as WebGL 2 features
    • WEBGL_draw_buffers
    • OES_vertex-array_object
  • [DEFERRED] ECT2 texture (need OpenGL 4.3 on mac)
  • [DEFERRED] EAC textures (need OpenGL 4.3 on mac)
  • [ON TRACK] sRGB textures (GL_EXT_texture_sRGB)
  • [ON TRACK] Multisample renderbuffers (GL_EXT_framebuffer_multisample)
  • [DEFERRED] Primitive restart with fixed index (need OpenGL 3.2 on mac)
  • [DONE] Min/max blend equations (GL_EXT_blend_minmax)
  • [DONE] Query objects
    • GL_ARB_occlusion_query
    • GL_EXT_occlusion_query_boolean
  • [WISHLIST] Transform feedback (GL_EXT_transform_feedback)
  • [DONE] Instanced Rendering (GL_ARB_draw_instanced)
  • [DONE] gl.vertexAttribDivisor (GL_ARB_instanced_array)
  • [DONE] gl.drawRangeElements (GL_EXT_draw_range_elements)

Development - Low priority features

  • [DEFERRED] Uniform buffer objects (need OpenGL 3.2 on mac)
  • [DEFERRED] Sampler objects (need OpenGL 4.3 on mac)
  • [ON TRACK] 3D textures
  • [ON TRACK] Shadow comparisons
  • [ON TRACK] Non-square and transposable uniform matrices
  • [ON TRACK] R and RG textures (GL_ARB_texture_rg)
  • [DEFERRED] Texture swizzles (need OpenGL 4.3 on mac)
  • [ON TRACK] Unrestricted NPOT textures (GL_ARB_texture_non_power_of_two)
  • [ON TRACK] Mipmap level/LOD tricks
  • [ON TRACK] New renderbuffer/texture formats
  • [ON TRACK] Half-float vertex attributes (GL_ARB_half_float_vertex)
  • [ON TRACK] Stretch blits
  • [ON TRACK] Framebuffer invalidation hints
  • [ON TRACK] Attach any mipmap level to a framebuffer
  • [ON TRACK] Additional pixel store data
  • [ON TRACK] Buffer to buffer copies
  • [ON TRACK] Texture storage

Implementation Bugs (Meta WebGL2 889977)

ID Priority Summary Status Assigned to
890049 -- WebGL2 Add WebGL1Context inheriting from WebGLContext RESOLVED guillaume.abadie
890311 -- WebGL2 Add WebGL2Context inheriting from WebGLContext RESOLVED guillaume.abadie
890379 -- WebGL2 Add existing WebGL 1 extensions as WebGL 2 features RESOLVED guillaume.abadie
890926 -- WebGL2 Min/max blend equations RESOLVED guillaume.abadie
891033 -- WebGL2 Edit GLContext to allow getting a GL3 context; let WebGL 2 use it NEW guillaume.abadie
891539 -- WebGL2 sRGB textures NEW guillaume.abadie
892169 -- WebGL2 Bypass ANGLE shader compilation RESOLVED guillaume.abadie
892546 -- WebGL2 Instanced Rendering RESOLVED guillaume.abadie
892978 -- WebGL2 Query objects (GL_ARB_occlusion_query) RESOLVED guillaume.abadie
893180 -- WebGL2 gl.vertexAttribDivisor (GL_ARB_instanced_array) RESOLVED guillaume.abadie
894482 -- [meta] WebGL2 prototype feed NEW guillaume.abadie
894492 -- [meta] WebGL2 prototype bugs support NEW guillaume.abadie
894740 -- WebGL conformance test update to 1.0.2 NEW guillaume.abadie
896254 -- WebGL2RenderingContext WebIDL interface should be disabled on release channels RESOLVED guillaume.abadie
898475 -- WebGL2 draw_range_elements NEW guillaume.abadie
898615 -- let WebGL use extension group queries RESOLVED guillaume.abadie
900199 -- Parse OpenGL registry xml to generates constants RESOLVED guillaume.abadie
902488 -- WebGL2 Occlusion queries optimization on desktop RESOLVED guillaume.abadie
903455 -- WebGL2 transform feedback - RASTERIZER_DISCARD RESOLVED guillaume.abadie
903480 -- WebGL2 transform feedback - Queries RESOLVED guillaume.abadie
903481 -- WebGL2 transform feedback - Buffers RESOLVED guillaume.abadie
903594 -- WebGL2 transform feedback objects NEW guillaume.abadie
905282 -- Add OpenGL constant prefixed by MOZ_GL_, next to the LOCAL_GL_ for incremental transition. RESOLVED guillaume.abadie
908232 -- WebGL2 RASTERIZER_DISCARD tracking RESOLVED guillaume.abadie
908316 -- WebGL2 factor query object's targets RESOLVED guillaume.abadie
908662 -- WebGL2 Refactor WebIDL RESOLVED guillaume.abadie
908841 -- WebGL2 Add more natively supported extensions RESOLVED guillaume.abadie
908985 -- WebGL2 bug on indexed binding RESOLVED guillaume.abadie
917505 -- Add ETC2 compressed texture format for WebGL NEW dglastonbury

Open; Resolved; Total (72.41% complete)