Mozilla’s WebGL2: an experimental WebGL implementation based on OpenGL ES 3.0

WebGL 2 prototype

We call WebGL 2 prototype the implementation of an experimental WebGL implementation based on OpenGL ES 3.0. This prototype have not been submitted to Khronos Group, but its purpose is to introduce the idea of an officially specified WebGL 2.0 API. Currently, using WebGL 2 Prototype is not secure and will be only available on Nightlies. The developer playing with our WebGL 2 prototype is using it at his owns risks of security and crashes (Gecko crashes, driver crashes and even OS crashes). Your are the only responsible for any lost works, caused damages. Mozilla Corporation and/or Mozilla Foundation can change, add, remove paragraphes of this wiki and the implementation's features at anytime.

The user who doesn't browse with a nightly or didn't enable the WebGL 2 prototype usage before doesn't fear any crashes by running a WebGL 2 code. Javascript will just fail/generate warnings and errors. We recommend to users who want to run a WebGL 2 prototype with a configured nightly to save all their work before, and do not proceed to any kind of transactions (software/driver updates, git/hg/svn commit/push and so on ...). Just in case, be sure to understand and never forget that running a WebGL 2 prototype have to be considered as crashing your computer even it doesn't.

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
• 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

DON'T TRY IT YET. Still waiting for a patch landing.

Download

Download the latest nightly. Or you can clone and build mozilla central with the --enable-debug flag by following this tutorial (the second way might be much longer).

Run it

Open your favorite command line editor and type :

> firefox -P webgl2_config -no-remote

That will open the Firefox nightly in a separated configuration called "webgl2_config".

Configure it

Because WebGL 2 prototype isn't 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 normal 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 and enter webgl.enable-prototype-webgl2. Make sure that it's set to true. To disable WebGL 2 prototype, just set it to false, and you won't be able to create WebGL 2 context anymore.

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 (coming with 892546). Here is the beginning of the WebGL 2's power. =)

Playground - Available features timeline

• Nightly 2013-07-24
  • [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)
• Up coming
  • [ON TRACK] gl.drawArraysInstanced and gl.drawElementsInstanced (ARB_draw_instanced)
  • [ON TRACK] Occlusion Queries (only ANY_SAMPLES_PASSED in EXT_occlusion_query_boolean)
  • [ON TRACK] gl.vertexAttribDivisor (ARB_instanced_array)

Playground - Known issues

• gl.getParameter(gl.SHADING_LANGUAGE_VERSION) returns "WebGL GLSL ES 1.0"

Playground - Useful links

• WebGL 1.0 specifications
• WebGL 1.0 quick reference card
• WebGL extensions registry
• WebGL stats (webglstats.com)
• WebGL 2.0 rendering context's WebIDL
• OpenGL ES 3.0 specifications
• OpenGL ES 3.0 quick reference card
• GL_EXT_gpu_shader4
• Firefox nightlies download page

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 - Reported bugs by our contributors (blocking 894492)

• WebGL 2 reported bugs tree

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)
• [WISHLIST] gl.vertexAttribDivisor (GL_ARB_instanced_array)
• [WISHLIST] 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