1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
|
---
title: 'L''API WebGL: Gràfics 2D i 3D al web'
slug: Web/API/WebGL_API
tags:
- Avançat
- Gràfics
- Media
- WebGL
translation_of: Web/API/WebGL_API
---
<div>{{WebGLSidebar}}</div>
<div class="summary">
<p>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 {{HTMLElement("canvas")}} d'HTML5.</p>
</div>
<p><a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+ i <a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie" title="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 11+, suporten WebGL; malgrat això, el dispositiu de l'usuari ha de disposar de maquinari que suporti aquestes característiques.</p>
<p>L'element {{HTMLElement("canvas")}} s'utilitza també en <a href="/en-US/docs/Web/API/Canvas_API">Canvas 2D</a> per realitzar gràfics 2D en pàgines web.</p>
<h2 id="Referència">Referència</h2>
<h3 id="Interfícies_estàndard">Interfícies estàndard</h3>
<div class="index">
<ul>
<li>{{domxref("WebGLRenderingContext")}}</li>
<li>{{domxref("WebGL2RenderingContext")}} {{experimental_inline}}</li>
<li>{{domxref("WebGLActiveInfo")}}</li>
<li>{{domxref("WebGLBuffer")}}</li>
<li>{{domxref("WebGLContextEvent")}}</li>
<li>{{domxref("WebGLFramebuffer")}}</li>
<li>{{domxref("WebGLProgram")}}</li>
<li>{{domxref("WebGLQuery")}} {{experimental_inline}}</li>
<li>{{domxref("WebGLRenderbuffer")}}</li>
<li>{{domxref("WebGLSampler")}} {{experimental_inline}}</li>
<li>{{domxref("WebGLShader")}}</li>
<li>{{domxref("WebGLShaderPrecisionFormat")}}</li>
<li>{{domxref("WebGLSync")}} {{experimental_inline}}</li>
<li>{{domxref("WebGLTexture")}}</li>
<li>{{domxref("WebGLTransformFeedback")}} {{experimental_inline}}</li>
<li>{{domxref("WebGLUniformLocation")}}</li>
<li>{{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}</li>
</ul>
</div>
<h3 id="Extensions">Extensions</h3>
<div class="index">
<ul>
<li>{{domxref("ANGLE_instanced_arrays")}}</li>
<li>{{domxref("EXT_blend_minmax")}}</li>
<li>{{domxref("EXT_color_buffer_float")}}</li>
<li>{{domxref("EXT_color_buffer_half_float")}}</li>
<li>{{domxref("EXT_disjoint_timer_query")}}</li>
<li>{{domxref("EXT_frag_depth")}}</li>
<li>{{domxref("EXT_sRGB")}}</li>
<li>{{domxref("EXT_shader_texture_lod")}}</li>
<li>{{domxref("EXT_texture_filter_anisotropic")}}</li>
<li>{{domxref("OES_element_index_uint")}}</li>
<li>{{domxref("OES_standard_derivatives")}}</li>
<li>{{domxref("OES_texture_float")}}</li>
<li>{{domxref("OES_texture_float_linear")}}</li>
<li>{{domxref("OES_texture_half_float")}}</li>
<li>{{domxref("OES_texture_half_float_linear")}}</li>
<li>{{domxref("OES_vertex_array_object")}}</li>
<li>{{domxref("WEBGL_color_buffer_float")}}</li>
<li>{{domxref("WEBGL_compressed_texture_astc")}}</li>
<li>{{domxref("WEBGL_compressed_texture_atc")}}</li>
<li>{{domxref("WEBGL_compressed_texture_etc")}}</li>
<li>{{domxref("WEBGL_compressed_texture_etc1")}}</li>
<li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li>
<li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li>
<li>{{domxref("WEBGL_compressed_texture_s3tc_srgb")}}</li>
<li>{{domxref("WEBGL_debug_renderer_info")}}</li>
<li>{{domxref("WEBGL_debug_shaders")}}</li>
<li>{{domxref("WEBGL_depth_texture")}}</li>
<li>{{domxref("WEBGL_draw_buffers")}}</li>
<li>{{domxref("WEBGL_lose_context")}}</li>
</ul>
</div>
<h3 id="Events">Events</h3>
<ul>
<li>{{Event("webglcontextlost")}}</li>
<li>{{Event("webglcontextrestored")}}</li>
<li>{{Event("webglcontextcreationerror")}}</li>
</ul>
<h3 id="Constants_i_tipus">Constants i tipus</h3>
<ul>
<li><a href="/en-US/docs/Web/API/WebGL_API/Constants">WebGL constants</a></li>
<li><a href="/en-US/docs/Web/API/WebGL_API/Types">WebGL types</a></li>
</ul>
<h3 id="WebGL_2">WebGL 2</h3>
<p>WebGL 2 és una actualització important de WebGL a la que s'accedeix mitjançant la interfície {{domxref("WebGL2RenderingContext")}}. Està basat en OpenGL ES 3.0 i algunes de les seves millores són:</p>
<ul>
<li><a href="/en-US/docs/Web/API/WebGL2RenderingContext/texImage3D">Textures 3D</a>,</li>
<li><a href="/en-US/docs/Web/API/WebGLSampler">Objectes Sampler</a>,</li>
<li><a href="/en-US/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects">Objectes Uniform Buffer</a>,</li>
<li><a href="/en-US/docs/Web/API/WebGLSync">Objectes Sync</a>,</li>
<li><a href="/en-US/docs/Web/API/WebGLQuery">Objectes Query</a>,</li>
<li><a href="/en-US/docs/Web/API/WebGLTransformFeedback">Objectes Transform Feedback</a>,</li>
<li>Algunes extensions que ara formen part de WebGL 2: <a href="/en-US/docs/Web/API/WebGLVertexArrayObject">Objectes Vertex Array</a>, <a href="/en-US/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced">instanciació</a>, <a href="/en-US/docs/Web/API/WebGL2RenderingContext/drawBuffers">múltiples objectius de render</a>, <a href="/en-US/docs/Web/API/EXT_frag_depth">profunditat dels fragment</a>s.</li>
</ul>
<p>Vegeu també l'entrada al blog <a href="https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/">"WebGL 2 aterra en el Firefox"</a> i <a href="http://webglsamples.org/WebGL2Samples/">webglsamples.org/WebGL2Samples</a> per unes quantes demostracions.</p>
<h2 id="Guies_i_tutorials">Guies i tutorials</h2>
<ul>
<li><a href="/en-US/docs/Web/API/WebGL_API/Tutorial">Tutorial de WebGL</a>: 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.</li>
<li><a href="/en-US/docs/Web/API/WebGL_API/WebGL_best_practices">Bones pràctiques en WebGL</a>: Consells i suggeriments per millorar el teu contingut WebGL content.</li>
<li><a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">Utilitzant extensions</a>: Com utilitzar les extensions que estan disponibles a WebGL.</li>
</ul>
<h3 id="Tutorials_avançats">Tutorials avançats</h3>
<ul>
<li><a href="/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection">Projecció model vista de WebGL</a>: 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ó.</li>
<li><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matemàtiques de matrius per a web</a>: 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.</li>
</ul>
<h2 id="Recursos">Recursos</h2>
<ul>
<li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">WebGL cru: Una introducció a WebGL</a> 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.</li>
<li><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Web de WebGL de Khronos</a> La web principal de WebGL al grup Khronos.</li>
<li><a href="http://learningwebgl.com/blog/?page_id=1217" title="http://learningwebgl.com/blog/">Aprenent WebGL</a> Un lloc amb tutorials sobre com utilitzar WebGL.</li>
<li><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">Fonaments de WebGL</a> Un tutorial bàsic sobre els fonaments de WebGL.</li>
<li><a href="http://webglplayground.net" title="http://webglplayground.net">Pati d'esbarjo de WebGL</a> Una eina online per crear i compartir projectes WebGL. Bona per fer prototips ràpids i experimentar.</li>
<li><a href="http://www.webglacademy.com" title="http://www.webglacademy.com">Acadèmia de WebGL</a> Un editor HTML/JavaScript amb tutorials per aprendre els conceptes bàsics de la programació WebGL.</li>
<li><a href="http://webglstats.com/">Estadístiques WebGL Stats</a> Un lloc web amb estadístiques sobre les capacitats WebGL dels navegadors en diferents plataformes.</li>
</ul>
<h3 id="Llibraries">Llibraries</h3>
<ul>
<li><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a> Llibreria JavaScript de matrius i vectors per produir aplicacions WebGL d'alt rendiment</li>
<li><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a> Una llibreria de codi obert per manipular vectors i matrius. No optimitzada per WebGL però extremadament robusta.</li>
</ul>
<h2 id="Especificacions">Especificacions</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificacions</th>
<th scope="col">Estat</th>
<th scope="col">Comentari</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('WebGL')}}</td>
<td>{{Spec2('WebGL')}}</td>
<td>Definició inicial. Basat en OpenGL ES 2.0</td>
</tr>
<tr>
<td>{{SpecName('WebGL2')}}</td>
<td>{{Spec2('WebGL2')}}</td>
<td>Ampliació de WebGL 1. Basat en OpenGL ES 3.0.</td>
</tr>
<tr>
<td>{{SpecName('OpenGL ES 2.0')}}</td>
<td>{{Spec2('OpenGL ES 2.0')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('OpenGL ES 3.0')}}</td>
<td>{{Spec2('OpenGL ES 3.0')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilitat_de_navegadors">Compatibilitat de navegadors</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suport bàsic</td>
<td>9</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("2.0")}}</td>
<td>11</td>
<td>12</td>
<td>5.1</td>
</tr>
<tr>
<td>WebGL 2</td>
<td>56</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoDesktop("51")}}</td>
<td>{{CompatNo}}</td>
<td>43</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome per Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suport bàsic</td>
<td>25</td>
<td>{{CompatVersionUnknown}}</td>
<td>4</td>
<td>{{CompatNo}}</td>
<td>12</td>
<td>8.1</td>
</tr>
<tr>
<td>WebGL 2</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h3 id="Notes_de_compatibilitat">Notes de compatibilitat</h3>
<p>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 <code>webgl</code>, però els navegadors antics el fan disponible a través del nom <code>experimental-webgl</code> també. La versió <a href="/en-US/docs/Web/API/WebGL2RenderingContext">WebGL 2</a> és totalment retro compatible i utilitza el nom <code>webgl2</code>.</p>
<h3 id="Notes_sobre_Gecko">Notes sobre Gecko</h3>
<h4 id="Debugant_i_testant_WebGL">Debugant i testant WebGL</h4>
<p>Començant amb Gecko 10.0 {{geckoRelease("10.0")}}, hi ha dues preferències disponibles que et permeten controlar les capacitats WebGL per testar:</p>
<dl>
<dt><code>webgl.min_capability_mode</code></dt>
<dd>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 <code>false</code> per defecte.</dd>
<dt><code>webgl.disable_extensions</code></dt>
<dd>Una propietat booleana que, quan és certa, desactiva totes les extensions WebGL. És <code>false</code> per defecte.</dd>
</dl>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Canvas_API">Canvas</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Informació de compatibilitat sobre les extensions de WebGL</a></li>
</ul>
|