Platform/GFX/WebGL2

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.

Playground

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,EXT}_draw_buffers
{ARB,EXT,NV}_draw_instanced or ANGLE_instanced_arrays
EXT_gpu_shader4
{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.

Playground - How to create a WebGL 2 context

Download

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 :

 ./FirefoxNightly.app/Contents/MacOS/firefox -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 - Available features timeline

Nightly 2013-07-24 (mozilla-central revision 2983ca6d4d1a)
- [DONE] GL_EXT_gpu_shader4 with "#version proto-200" prefix
- [DONE] Multiple Rendering Targets (gl.drawBuffers in WEBGL_draw_buffers)
- [DONE] Vertex Array Objects (OES_vertex_array_object)
- [DONE] Min/max blend equations (EXT_blend_minmax)
Nightly 2013-07-26 (mozilla-central revision 639f164cc46e)
- [DONE] gl.drawArraysInstanced and gl.drawElementsInstanced (ARB_draw_instanced)
Nightly 2013-07-31 (mozilla-central revision 2fcf08bde979)
- [DONE] WebIDL fix, WebGL 2 would be available in all channels
Nightly 2013-08-07 (mozilla-central revision 9c91adcdc328)
- [ON TRACK] Occlusion Queries (EXT_occlusion_query_boolean)
- [ON TRACK] gl.vertexAttribDivisor (ARB_instanced_arrays)
Standby
- [ON TRACK] gl.drawRangeElements (EXT_draw_range_elements)

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 www.mydomain.com 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.

www.beFirstToPostHere.org

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)

WebGL 2 reported bugs tree

Full Query

ID	Priority	Summary	Status	Assigned to
898386	--	WebGL2 bug report -Firefox crashes in mozilla::WebGLContext::GenerateWarning with "MOZ_WEBGL_FORCE_OPENGL=1"	RESOLVED
900439	--	WebGL2 unable to initialize OpenGL on Linux/Nvidia GT 330M	RESOLVED	Guillaume Abadie
1053440	--	WebGL2 bug report - not context available under Mesa (ES3)	RESOLVED

3 Total; 0 Open (0%); 3 Resolved (100%); 0 Verified (0%);

Development

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.
  - This is getting fixed in bug 895597.
- 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
[ON TRACK] 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)

WebGL 2 prototype implementation tree