Platform/GFX/WebGL2: Difference between revisions

From MozillaWiki
< Platform‎ | GFX
Jump to navigation Jump to search
(Replace with link to MDN.)
 
(40 intermediate revisions by 3 users not shown)
Line 1: Line 1:
== WebGL 2 prototype ==
Please see https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API#WebGL_2.
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 [https://www.khronos.org/webgl/public-mailing-list/archives/1208/msg00037.html 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 [https://www.khronos.org/webgl/public-mailing-list/archives/1307/msg00035.html 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 {{nbug|894482}}. Feel free to report any WebGL 2 prototype's bugs by blocking {{nbug|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 {{nbug|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 [http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-central/ latest nightly] or clone and build mozilla central with the --enable-debug flag by following [https://developer.mozilla.org/en/docs/Developer_Guide/Source_Code/Mercurial 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.
 
==== 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.
* Search for webgl.enable-draft-extensions and set it to true. That will let you use [http://www.khronos.org/registry/webgl/extensions/WEBGL_draw_buffers/ WEBGL_draw_buffers] extension in WebGL 1.0, and natively in WebGL 2.
* Right click -> New -> Boolean to create a new preference, name it webgl.enable-prototype-webgl2, and set it to true.
 
==== 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 [http://en.wikipedia.org/wiki/Deferred_shading deferred shading]'s geometry pass, with [http://en.wikipedia.org/wiki/Normal_mapping normal mapping] and instanced drawing.
 
=== Playground - Available features timeline ===
* [http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2013-07-24-03-02-04-mozilla-central/ Nightly 2013-07-24] (mozilla-central revision 2983ca6d4d1a)
** {{done|[http://developer.download.nvidia.com/opengl/specs/GL_EXT_gpu_shader4.txt GL_EXT_gpu_shader4] with "#version proto-200" prefix}}
** {{done|Multiple Rendering Targets (gl.drawBuffers in [http://www.khronos.org/registry/webgl/extensions/WEBGL_draw_buffers/ WEBGL_draw_buffers])}}
** {{done|Vertex Array Objects ([http://www.khronos.org/registry/webgl/extensions/OES_vertex_array_object/ OES_vertex_array_object])}}
** {{done|Min/max blend equations ([http://www.opengl.org/registry/specs/EXT/blend_minmax.txt EXT_blend_minmax])}}
* [http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2013-07-26-03-02-03-mozilla-central/ Nightly 2013-07-26] (mozilla-central revision 639f164cc46e)
** {{done|gl.drawArraysInstanced and gl.drawElementsInstanced ([http://www.opengl.org/registry/specs/ARB/draw_instanced.txt ARB_draw_instanced])}}
* [http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2013-07-31-03-02-03-mozilla-central/ Nightly 2013-07-31] (mozilla-central revision 2fcf08bde979)
** {{done|WebIDL fix, WebGL 2 would be available in all channels}}
* Up coming
** {{ok|Occlusion Queries ([http://www.khronos.org/registry/gles/extensions/EXT/EXT_occlusion_query_boolean.txt EXT_occlusion_query_boolean])}}
** {{ok|gl.vertexAttribDivisor ([http://www.opengl.org/registry/specs/ARB/instanced_arrays.txt ARB_instanced_arrays])}}
 
=== 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 ===
* [https://www.khronos.org/registry/webgl/specs/1.0/ WebGL 1.0 specifications]
* [http://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf WebGL 1.0 quick reference card]
* [http://www.khronos.org/registry/webgl/extensions/ WebGL extensions registry]
* [http://webglstats.com/ WebGL stats (webglstats.com)]
* [http://dxr.mozilla.org/mozilla-central/source/dom/webidl/WebGL2RenderingContext.webidl WebGL 2.0 rendering context's WebIDL]
* [https://bugzilla.mozilla.org/enter_bug.cgi?alias=&assigned_to=nobody%40mozilla.org&attach_text=&blocked=894492&bug_file_loc=http%3A%2F%2F&bug_severity=normal&bug_status=NEW&cf_blocking_b2g=---&cf_blocking_fennec=---&cf_crash_signature=&cf_status_b2g18=---&cf_status_b2g18_1_0_0=---&cf_status_b2g18_1_0_1=---&cf_status_b2g_1_1_hd=---&cf_status_firefox22=---&cf_status_firefox23=---&cf_status_firefox24=---&cf_status_firefox25=---&cf_status_firefox_esr17=---&cf_tracking_b2g18=---&cf_tracking_firefox22=---&cf_tracking_firefox23=---&cf_tracking_firefox24=---&cf_tracking_firefox25=---&cf_tracking_firefox_esr17=---&cf_tracking_firefox_relnote=---&cf_tracking_relnote_b2g=---&comment=&component=Canvas%3A%20WebGL&contenttypeentry=&contenttypemethod=autodetect&contenttypeselection=text%2Fplain&data=&defined_groups=1&dependson=&description=&flag_type-203=X&flag_type-37=X&flag_type-4=X&flag_type-41=X&flag_type-5=X&flag_type-607=X&flag_type-720=X&flag_type-721=X&flag_type-737=X&flag_type-781=X&flag_type-787=X&flag_type-791=X&flag_type-799=X&flag_type-800=X&flag_type-802=X&flag_type-809=X&form_name=enter_bug&keywords=&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=All&priority=--&product=Core&qa_contact=&rep_platform=All&requestee_type-203=&requestee_type-4=&requestee_type-41=&requestee_type-5=&requestee_type-563=&requestee_type-607=&requestee_type-781=&requestee_type-787=&requestee_type-791=&requestee_type-800=&short_desc=WebGL2%20bug%20report%20-%20MY%20SUMMARY&status_whiteboard=&target_milestone=---&version=unspecified WebGL 2.0 bug report template]
* [http://www.khronos.org/registry/gles/specs/3.0/es_spec_3.0.2.pdf OpenGL ES 3.0 specifications]
* [http://www.khronos.org/files/opengles3-quick-reference-card.pdf OpenGL ES 3.0 quick reference card]
* [http://developer.download.nvidia.com/opengl/specs/GL_EXT_gpu_shader4.txt GL_EXT_gpu_shader4]
* [http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/ 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 {{nbug|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 [https://bugzilla.mozilla.org/enter_bug.cgi?alias=&assigned_to=nobody%40mozilla.org&attach_text=&blocked=894492&bug_file_loc=http%3A%2F%2F&bug_severity=normal&bug_status=NEW&cf_blocking_b2g=---&cf_blocking_fennec=---&cf_crash_signature=&cf_status_b2g18=---&cf_status_b2g18_1_0_0=---&cf_status_b2g18_1_0_1=---&cf_status_b2g_1_1_hd=---&cf_status_firefox22=---&cf_status_firefox23=---&cf_status_firefox24=---&cf_status_firefox25=---&cf_status_firefox_esr17=---&cf_tracking_b2g18=---&cf_tracking_firefox22=---&cf_tracking_firefox23=---&cf_tracking_firefox24=---&cf_tracking_firefox25=---&cf_tracking_firefox_esr17=---&cf_tracking_firefox_relnote=---&cf_tracking_relnote_b2g=---&comment=&component=Canvas%3A%20WebGL&contenttypeentry=&contenttypemethod=autodetect&contenttypeselection=text%2Fplain&data=&defined_groups=1&dependson=&description=&flag_type-203=X&flag_type-37=X&flag_type-4=X&flag_type-41=X&flag_type-5=X&flag_type-607=X&flag_type-720=X&flag_type-721=X&flag_type-737=X&flag_type-781=X&flag_type-787=X&flag_type-791=X&flag_type-799=X&flag_type-800=X&flag_type-802=X&flag_type-809=X&form_name=enter_bug&keywords=&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=All&priority=--&product=Core&qa_contact=&rep_platform=All&requestee_type-203=&requestee_type-4=&requestee_type-41=&requestee_type-5=&requestee_type-563=&requestee_type-607=&requestee_type-781=&requestee_type-787=&requestee_type-791=&requestee_type-800=&short_desc=WebGL2%20bug%20report%20-%20MY%20SUMMARY&status_whiteboard=&target_milestone=---&version=unspecified WebGL 2 bug report template]. It automatically blocks {{nbug|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. Any code or URL to a page showing the bug are very welcome!
 
=== Playground - Reported bugs by our contributors (blocking {{nbug|894492}}) ===
* [https://bugzilla.mozilla.org/showdependencygraph.cgi?id=894492&display=tree&rankdir=TB WebGL 2 reported bugs tree]
<onlyinclude>
<bugzilla>
{
    "blocks": "894492",
    "include_fields": "id, priority, summary, status, assigned_to",
    "order": "bug_id"
}
</bugzilla>
</onlyinclude>
 
== Development ==
=== Development - Design decision ===
* All WebGL functions must be implemented in WebGLContext
* WebGL function member definitions of WebGLContext should be group by feature as [http://www.khronos.org/files/opengles3-quick-reference-card.pdf OpenGL ES 3.0 quick reference card] do into differents .cpp files
* {{ok|Move functions definition from WebGLContextGL.cpp to distinct cpp files grouped as same as quick reference card do}}
* {{ok|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"
* {{prev|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)}}
* {{ok|sRGB textures (GL_EXT_texture_sRGB)}}
* {{ok|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
* {{ok|Transform feedback (GL_EXT_transform_feedback)}}
* {{done|Instanced Rendering (GL_ARB_draw_instanced)}}
* {{done|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)}}
* {{ok|3D textures}}
* {{ok|Shadow comparisons}}
* {{ok|Non-square and transposable uniform matrices}}
* {{ok|R and RG textures (GL_ARB_texture_rg)}}
* {{deferred|Texture swizzles (need OpenGL 4.3 on mac)}}
* {{ok|Unrestricted NPOT textures (GL_ARB_texture_non_power_of_two)}}
* {{ok|Mipmap level/LOD tricks}}
* {{ok|New renderbuffer/texture formats}}
* {{ok|Half-float vertex attributes (GL_ARB_half_float_vertex)}}
* {{ok|Stretch blits}}
* {{ok|Framebuffer invalidation hints}}
* {{ok|Attach any mipmap level to a framebuffer}}
* {{ok|Additional pixel store data}}
* {{ok|Buffer to buffer copies}}
* {{ok|Texture storage}}
 
=== Implementation Bugs (Meta WebGL2 {{nbug|889977}}) ===
* [https://bugzilla.mozilla.org/showdependencygraph.cgi?id=889977&display=web&rankdir=TB WebGL 2 prototype implementation tree]
<onlyinclude>
<bugzilla>
{
    "blocks": "889977",
    "include_fields": "id, priority, summary, status, assigned_to",
    "order": "bug_id"
}
</bugzilla>
</onlyinclude>

Latest revision as of 00:06, 3 March 2020

Please see https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API#WebGL_2.

Retrieved from "https://wiki.allizom.org/index.php?title=Platform/GFX/WebGL2&oldid=1224482"