WebGL (Web Graphics Library) és una API Javascript per renderitzar gràfics interactius 3D i 2D en qualsevol navegador web compatible sense la utilització d'extensions. WebGL ho porta a terme introduint una API que s'adapta molt a OpenGL ES 2.0 i que pot utilitzar-se en elements <canvas> d'HTML5.
Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ i Internet Explorer 11+, suporten WebGL; malgrat això, el dispositiu de l'usuari ha de disposar de maquinari que suporti aquestes característiques.
L'element <canvas> s'utilitza també en Canvas 2D per realitzar gràfics 2D en pàgines web.
Referència
Interfícies estàndard
Extensions
ANGLE_instanced_arraysEXT_blend_minmaxEXT_color_buffer_floatEXT_color_buffer_half_floatEXT_disjoint_timer_queryEXT_frag_depthEXT_sRGBEXT_shader_texture_lodEXT_texture_filter_anisotropicOES_element_index_uintOES_standard_derivativesOES_texture_floatOES_texture_float_linearOES_texture_half_floatOES_texture_half_float_linearOES_vertex_array_objectWEBGL_color_buffer_floatWEBGL_compressed_texture_astcWEBGL_compressed_texture_atcWEBGL_compressed_texture_etcWEBGL_compressed_texture_etc1WEBGL_compressed_texture_pvrtcWEBGL_compressed_texture_s3tcWEBGL_compressed_texture_s3tc_srgbWEBGL_debug_renderer_infoWEBGL_debug_shadersWEBGL_depth_textureWEBGL_draw_buffersWEBGL_lose_context
Events
Constants i tipus
WebGL 2
WebGL 2 és una actualització important de WebGL a la que s'accedeix mitjançant la interfície WebGL2RenderingContext. Està basat en OpenGL ES 3.0 i algunes de les seves millores són:
- Textures 3D,
- Objectes Sampler,
- Objectes Uniform Buffer,
- Objectes Sync,
- Objectes Query,
- Objectes Transform Feedback,
- Algunes extensions que ara formen part de WebGL 2: Objectes Vertex Array, instanciació, múltiples objectius de render, profunditat dels fragments.
Vegeu també l'entrada al blog "WebGL 2 aterra en el Firefox" i webglsamples.org/WebGL2Samples per unes quantes demostracions.
Guies i tutorials
- Tutorial de WebGL: Una guia de conceptes bàsics de WebGL per a novells. Un bon lloc per on començar si no tens experiència prèvia en WebGL.
- Bones pràctiques en WebGL: Consells i suggeriments per millorar el teu contingut WebGL content.
- Utilitzant extensions: Com utilitzar les extensions que estan disponibles a WebGL.
Tutorials avançats
- Projecció model vista de WebGL: Una explicació detallada de les tres matrius bàsiques que s'utilitzen habitualment per representar una vista d'objectes 3D: Les matrius de model, vista i projecció.
- Matemàtiques de matrius per a web: Una útil guia sobre com les matrius de transformació 3D funcionen, i es poden utilitzar al web — tant per càlculs WebGL com per transformacions en CSS3.
Recursos
- WebGL cru: Una introducció a WebGL Una conferència d'en Nick Desaulniers que introdueix els conceptes bàsics de WebGL. Aquest és un bon lloc de partida si mai has realitzat programació de gràfics a baix nivell.
- Web de WebGL de Khronos La web principal de WebGL al grup Khronos.
- Aprenent WebGL Un lloc amb tutorials sobre com utilitzar WebGL.
- Fonaments de WebGL Un tutorial bàsic sobre els fonaments de WebGL.
- Pati d'esbarjo de WebGL Una eina online per crear i compartir projectes WebGL. Bona per fer prototips ràpids i experimentar.
- Acadèmia de WebGL Un editor HTML/JavaScript amb tutorials per aprendre els conceptes bàsics de la programació WebGL.
- Estadístiques WebGL Stats Un lloc web amb estadístiques sobre les capacitats WebGL dels navegadors en diferents plataformes.
Llibraries
- glMatrix Llibreria JavaScript de matrius i vectors per produir aplicacions WebGL d'alt rendiment
- Sylvester Una llibreria de codi obert per manipular vectors i matrius. No optimitzada per WebGL però extremadament robusta.
Especificacions
| Especificacions | Estat | Comentari |
|---|---|---|
| WebGL 1.0 | Recommendation | Definició inicial. Basat en OpenGL ES 2.0 |
| WebGL 2.0 | Editor's Draft | Ampliació de WebGL 1. Basat en OpenGL ES 3.0. |
| OpenGL ES 2.0 | Standard | |
| OpenGL ES 3.0 | Standard |
Compatibilitat de navegadors
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| Característica | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Suport bàsic | 9 | (Yes) | 4.0 (2.0) | 11 | 12 | 5.1 |
| WebGL 2 | 56 | No support | 51 (51) | No support | 43 | No support |
| Característica | Chrome per Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Suport bàsic | 25 | (Yes) | 4 | No support | 12 | 8.1 |
| WebGL 2 | ? | ? | ? | ? | ? | ? |
Notes de compatibilitat
A més del navegador, la pròpia GPU ha de suportar la característica. Per exemple, la compressió de textures S3 (S3TC) només està disponible en tauletes basades en el chipset Tegra. La majoria de navegadors fan disponible el context WebGL a través del nom de context webgl, però els navegadors antics el fan disponible a través del nom experimental-webgl també. La versió WebGL 2 és totalment retro compatible i utilitza el nom webgl2.
Notes sobre Gecko
Debugant i testant WebGL
Començant amb Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), hi ha dues preferències disponibles que et permeten controlar les capacitats WebGL per testar:
webgl.min_capability_mode- Una propietat booleana que, quan és certa, habilita un mode de capacitats mínimes. Quan aquest mode està actiu, WebGL està configurat per suportar només el conjunt mínim de funcionalitats que marca l'especificació de WebGL. Això permet comprovar que el codi WebGL funcionarà en qualsevol dispositiu o navegador, independentment de les capacitats d'aquest. És
falseper defecte. webgl.disable_extensions- Una propietat booleana que, quan és certa, desactiva totes les extensions WebGL. És
falseper defecte.