|
|
| (28 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 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. 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 [http://www.khronos.org/registry/webgl/extensions/WEBGL_draw_buffers/ 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 [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}}
| |
| * [http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2013-08-07-03-02-16-mozilla-central/ Nightly 2013-08-07] (mozilla-central revision 9c91adcdc328)
| |
| ** {{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])}}
| |
| * Standby
| |
| ** {{ok|gl.drawRangeElements ([http://www.opengl.org/registry/specs/EXT/draw_range_elements.txt 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 ===
| |
| * [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.
| |
| ** 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 {{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)}}
| |
| * {{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)}}
| |
| * {{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>
| |