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
|
---
title: 'WebGL: 2D and 3D graphics for the web'
slug: Web/API/WebGL_API
translation_of: Web/API/WebGL_API
---
<div><font><font>{{WebGLSidebar}}</font></font></div>
<div class="summary">
<p><span class="seoSummary"><font><font>WebGL (ห้องสมุดกราฟิกเว็บ) เป็น JavaScript API สำหรับการแสดงผลกราฟิก 3 มิติและ 2D แบบโต้ตอบที่มีประสิทธิภาพสูงภายในเว็บเบราว์เซอร์ที่รองรับโดยไม่ต้องใช้ปลั๊กอิน </font><font>WebGL ทำได้โดยการแนะนำ API ที่สอดคล้องกับ OpenGL ES 2.0 อย่างใกล้ชิดซึ่งสามารถใช้ในองค์ประกอบ HTML5 {{HTMLElement ("canvas")}} </font></font></span><font><font>ความสอดคล้องนี้ทำให้ API สามารถได้รับประโยชน์จากการเร่งความเร็วของกราฟิกฮาร์ดแวร์ที่อุปกรณ์ของผู้ใช้ใช้</font></font></p>
</div>
<p><font><font>รองรับ WebGL ใน</font></font><a href="/en-US/Firefox" title="Firefox 4 สำหรับนักพัฒนา"><font><font>Firefox</font></font></a><font><font> 4+, </font></font><a href="https://www.google.com/chrome/"><font><font>Google Chrome</font></font></a><font><font> 9+, </font></font><a href="https://www.opera.com/"><font><font>Opera</font></font></a><font><font> 12+, </font></font><a href="https://www.apple.com/safari/"><font><font>Safari</font></font></a><font><font> 5.1+, </font></font><a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie"><font><font>Internet Explorer</font></font></a><font><font> 11+ </font><font>และ</font></font><a href="https://www.microsoft.com/en-us/edge"><font><font>Microsoft Edge</font></font></a><font><font> build 10240+; </font><font>อย่างไรก็ตามอุปกรณ์ของผู้ใช้จะต้องมีฮาร์ดแวร์ที่รองรับคุณสมบัติเหล่านี้</font></font></p>
<p><font><font>{{anch ("WebGL 2")}} API แนะนำการสนับสนุนชุดคุณลักษณะ OpenGL ES 3.0 เป็นส่วนใหญ่ </font><font>มีให้ผ่านทาง {{domxref ("WebGL2RenderingContext")}} ส่วนต่อประสาน</font></font></p>
<p><font><font>องค์ประกอบ {{HTMLElement ("canvas")}} ยังถูกใช้โดย</font></font><a href="/en-US/docs/Web/API/Canvas_API"><font><font>Canvas API</font></font></a><font><font>เพื่อทำกราฟิก 2D บนหน้าเว็บ</font></font></p>
<h2 id="การอ้างอิง"><font><font>การอ้างอิง</font></font></h2>
<h3 id="อินเตอร์เฟสมาตรฐาน"><font><font>อินเตอร์เฟสมาตรฐาน</font></font></h3>
<div class="index">
<ul>
<li><font><font>{{domxref ( "WebGLRenderingContext")}}</font></font></li>
<li><font><font>{{domxref ( "WebGL2RenderingContext")}}</font></font></li>
<li><font><font>{{domxref ( "WebGLActiveInfo")}}</font></font></li>
<li><font><font>{{domxref ( "WebGLBuffer")}}</font></font></li>
<li><font><font>{{domxref ( "WebGLContextEvent")}}</font></font></li>
<li><font><font>{{domxref ( "WebGLFramebuffer")}}</font></font></li>
<li><font><font>{{domxref ( "WebGLProgram")}}</font></font></li>
<li><font><font>{{domxref ( "WebGLQuery")}}</font></font></li>
<li><font><font>{{domxref ( "WebGLRenderbuffer")}}</font></font></li>
<li><font><font>{{domxref ( "WebGLSampler")}}</font></font></li>
<li><font><font>{{domxref ( "WebGLShader")}}</font></font></li>
<li><font><font>{{domxref ( "WebGLShaderPrecisionFormat")}}</font></font></li>
<li><font><font>{{domxref ( "WebGLSync")}}</font></font></li>
<li><font><font>{{domxref ( "WebGLTexture")}}</font></font></li>
<li><font><font>{{domxref ( "WebGLTransformFeedback")}}</font></font></li>
<li><font><font>{{domxref ( "WebGLUniformLocation")}}</font></font></li>
<li><font><font>{{domxref ( "WebGLVertexArrayObject")}}</font></font></li>
</ul>
</div>
<h3 id="ส่วนขยาย"><font><font>ส่วนขยาย</font></font></h3>
<div class="index">
<ul>
<li><font><font>{{domxref ( "ANGLE_instanced_arrays")}}</font></font></li>
<li><font><font>{{domxref ( "EXT_blend_minmax")}}</font></font></li>
<li><font><font>{{domxref ( "EXT_color_buffer_float")}}</font></font></li>
<li>{{domxref("EXT_color_buffer_half_float")}}</li>
<li>{{domxref("EXT_disjoint_timer_query")}}</li>
<li>{{domxref("EXT_float_blend")}} {{experimental_inline}}</li>
<li>{{domxref("EXT_frag_depth")}}</li>
<li>{{domxref("EXT_sRGB")}}</li>
<li>{{domxref("EXT_shader_texture_lod")}}</li>
<li>{{domxref("EXT_texture_compression_bptc")}}</li>
<li>{{domxref("EXT_texture_compression_rgtc")}}</li>
<li>{{domxref("EXT_texture_filter_anisotropic")}}</li>
<li>{{domxref("OES_element_index_uint")}}</li>
<li>{{domxref("OES_fbo_render_mipmap")}}</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("OVR_multiview2")}}</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><code><a href="/en-US/docs/Web/API/HTMLCanvasElement/webglcontextlost_event">webglcontextlost</a></code></li>
<li><code><a href="/en-US/docs/Web/API/HTMLCanvasElement/webglcontextrestored_event">webglcontextrestored</a></code></li>
<li><code><a href="/en-US/docs/Web/API/HTMLCanvasElement/webglcontextcreationerror_event">webglcontextcreationerror</a></code></li>
</ul>
<h3 id="Constants_and_types">Constants and types</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 is a major update to WebGL which is provided through the {{domxref("WebGL2RenderingContext")}} interface. It is based on OpenGL ES 3.0 and new features include:</p>
<ul>
<li><a href="/en-US/docs/Web/API/WebGL2RenderingContext/texImage3D">3D textures</a>,</li>
<li><a href="/en-US/docs/Web/API/WebGLSampler">Sampler objects</a>,</li>
<li><a href="/en-US/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects">Uniform Buffer objects</a>,</li>
<li><a href="/en-US/docs/Web/API/WebGLSync">Sync objects</a>,</li>
<li><a href="/en-US/docs/Web/API/WebGLQuery">Query objects</a>,</li>
<li><a href="/en-US/docs/Web/API/WebGLTransformFeedback">Transform Feedback objects</a>,</li>
<li>Promoted extensions that are now core to WebGL 2: <a href="/en-US/docs/Web/API/WebGLVertexArrayObject">Vertex Array objects</a>, <a href="/en-US/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced">instancing</a>, <a href="/en-US/docs/Web/API/WebGL2RenderingContext/drawBuffers">multiple render targets</a>, <a href="/en-US/docs/Web/API/EXT_frag_depth">fragment depth</a>.</li>
</ul>
<p>See also the blog post <a href="https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/">"WebGL 2 lands in Firefox"</a> and <a href="http://webglsamples.org/WebGL2Samples/">webglsamples.org/WebGL2Samples</a> for a few demos.</p>
<h2 id="Guides_and_tutorials">Guides and tutorials</h2>
<p>Below, you'll find an assortment of guides to help you learn WebGL concepts and tutorials that offer step-by-step lessons and examples.</p>
<h3 id="Guides">Guides</h3>
<dl>
<dt><a href="/en-US/docs/Web/API/WebGL_API/Data">Data in WebGL</a></dt>
<dd>A guide to variables, buffers, and other types of data used when writing WebGL code.</dd>
<dt><a href="/en-US/docs/Web/API/WebGL_API/WebGL_best_practices">WebGL best practices</a></dt>
<dd>Tips and suggestions to help you improve the quality, performance, and reliability of your WebGL content.</dd>
<dt><a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">Using extensions</a></dt>
<dd>A guide to using WebGL extensions.</dd>
</dl>
<h3 id="Tutorials">Tutorials</h3>
<dl>
<dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial">WebGL tutorial</a></dt>
<dd>A beginner's guide to WebGL core concepts. A good place to start if you don't have previous WebGL experience.</dd>
</dl>
<h3 id="Examples">Examples</h3>
<dl>
<dt><a href="/en-US/docs/Web/API/WebGL_API/Basic_2D_animation_example">A basic 2D WebGL animation example</a></dt>
<dd>This example demonstrates the simple animation of a one-color shape. Topics examined are adapting to aspect ratio differences, a function to build shader programs from sets of multiple shaders, and the basics of drawing in WebGL.</dd>
<dt><a href="/en-US/docs/Web/API/WebGL_API/By_example">WebGL by example</a></dt>
<dd><font><font>ชุดตัวอย่างสดพร้อมคำอธิบายสั้น ๆ ที่แสดงแนวคิดและความสามารถของ WebGL </font><font>ตัวอย่างจะถูกจัดเรียงตามหัวข้อและระดับความยากซึ่งครอบคลุมบริบทการเรนเดอร์ WebGL, การโปรแกรม shader, พื้นผิว, เรขาคณิต, การโต้ตอบกับผู้ใช้และอื่น ๆ</font></font></dd>
</dl>
<h3 id="บทเรียนขั้นสูง"><font><font>บทเรียนขั้นสูง</font></font></h3>
<dl>
<dt><a href="/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection"><font><font>การฉายมุมมองโมเดล WebGL</font></font></a></dt>
<dd><font><font>คำอธิบายโดยละเอียดของเมทริกซ์หลักสามตัวที่โดยทั่วไปใช้เพื่อแสดงมุมมองวัตถุสามมิติ: แบบจำลองมุมมองและเมทริกซ์การฉายภาพ</font></font></dd>
<dt><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web"><font><font>คณิตศาสตร์เมทริกซ์สำหรับเว็บ</font></font></a></dt>
<dd><font><font>คู่มือที่มีประโยชน์เกี่ยวกับการทำงานของเมทริกซ์การแปลง 3D และสามารถใช้บนเว็บได้ - ทั้งสำหรับการคำนวณ WebGL และในการแปลง CSS3</font></font></dd>
</dl>
<h2 id="ทรัพยากร"><font><font>ทรัพยากร</font></font></h2>
<ul>
<li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage"><font><font>Raw WebGL: คำแนะนำเกี่ยวกับ WebGL</font></font></a><font><font>คำ</font><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage"><font>บรรยาย</font></a><font>โดย Nick Desaulniers ที่แนะนำพื้นฐานของ WebGL </font><font>นี่เป็นจุดเริ่มต้นที่ดีหากคุณไม่เคยเขียนโปรแกรมกราฟิกระดับต่ำมาก่อน</font></font></li>
<li><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/"><font><font>เว็บไซต์ Khronos WebGL เว็บไซต์</font></font></a><font><font>หลักสำหรับ WebGL ที่ Khronos Group</font></font></li>
<li><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/"><font><font>WebGL Fundamentals</font></font></a><font><font>บทช่วยสอนพื้นฐานพร้อมพื้นฐานของ WebGL</font></font></li>
<li><a href="http://webglplayground.net" title="http://webglplayground.net"><font><font>สนามเด็กเล่น WebGL</font></font></a><font><font>เครื่องมือออนไลน์สำหรับการสร้างและแบ่งปันโครงการ WebGL </font><font>เหมาะสำหรับการสร้างต้นแบบอย่างรวดเร็วและการทดสอบ</font></font></li>
<li><a href="http://www.webglacademy.com" title="http://www.webglacademy.com"><font><font>WebGL Academy</font></font></a><font><font>เครื่องมือแก้ไข HTML / JavaScript พร้อมบทช่วยสอนเพื่อเรียนรู้พื้นฐานของการเขียนโปรแกรม webgl</font></font></li>
<li><a href="http://webglstats.com/"><font><font>สถิติ WebGL</font></font></a><font><font>เว็บไซต์ที่มีสถิติเกี่ยวกับความสามารถของ WebGL ในเบราว์เซอร์บนแพลตฟอร์มต่างๆ</font></font></li>
</ul>
<h3 id="ห้องสมุด"><font><font>ห้องสมุด</font></font></h3>
<ul>
<li><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix"><font><font>glMatrix</font></font></a><font><font>เป็นเมทริกซ์ JavaScript และไลบรารีเวกเตอร์สำหรับแอป WebGL ประสิทธิภาพสูง</font></font></li>
<li><a href="http://senchalabs.github.com/philogl/"><font><font>PhiloGL</font></font></a><font><font>เป็นเฟรมเวิร์ก WebGL สำหรับการสร้างภาพข้อมูลการสร้างโค้ดและการพัฒนาเกม</font></font></li>
<li><a href="http://www.pixijs.com/"><font><font>Pixi.js</font></font></a><font><font>เป็นตัวเรนเดอร์ WebGL 2D แบบโอเพนซอร์สที่รวดเร็วและรวดเร็ว</font></font></li>
<li><a href="https://playcanvas.com/"><font><font>PlayCanvas</font></font></a><font><font>เป็น</font><font>นเกมโอเพนซอร์ซ</font></font></li>
<li><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/"><font><font>Sylvester</font></font></a><font><font>เป็นห้องสมุดโอเพนซอร์ซสำหรับจัดการเวกเตอร์และเมทริกซ์ </font><font>ไม่ได้รับการปรับให้เหมาะสมกับ WebGL แต่มีความแข็งแกร่งมาก</font></font></li>
<li><a href="https://threejs.org/"><font><font>three.js</font></font></a><font><font>เป็นไลบรารี 3D WebGL แบบโอเพนซอร์สที่มีคุณลักษณะครบถ้วน</font></font></li>
<li><a href="https://phaser.io/"><font><font>Phaser</font></font></a><font><font>เป็นเฟรมเวิร์กโอเพนซอร์สที่รวดเร็วและสนุกสำหรับเกมเบราว์เซอร์ที่ขับเคลื่อนด้วย Canvas และ WebGL</font></font></li>
<li><a href="https://github.com/redcamel/RedGL2"><font><font>RedGL</font></font></a><font><font> เป็นไลบรารี 3D WebGL แบบโอเพ่นซอร์ส</font></font></li>
<li><a href="https://kitware.github.io/vtk-js/"><font><font>vtk.js</font></font></a><font><font> เป็นห้องสมุด JavaScript สำหรับการสร้างภาพทางวิทยาศาสตร์ในเบราว์เซอร์ของคุณ</font></font></li>
</ul>
<h2 id="ข้อมูลจำเพาะ"><font><font>ข้อมูลจำเพาะ</font></font></h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col"><font><font>สเปค</font></font></th>
<th scope="col"><font><font>สถานะ</font></font></th>
<th scope="col"><font><font>คิดเห็น</font></font></th>
</tr>
</thead>
<tbody>
<tr>
<td><font><font>{{SpecName ( 'WebGL')}}</font></font></td>
<td><font><font>{{Spec2 ( 'WebGL')}}</font></font></td>
<td><font><font>คำจำกัดความเบื้องต้น </font><font>อ้างอิงจาก OpenGL ES 2.0</font></font></td>
</tr>
<tr>
<td><font><font>{{SpecName ( 'WebGL2')}}</font></font></td>
<td><font><font>{{Spec2 ( 'WebGL2')}}</font></font></td>
<td><font><font>สร้างบน WebGL 1. ขึ้นอยู่กับ OpenGL ES 3.0</font></font></td>
</tr>
<tr>
<td><font><font>{{SpecName ('OpenGL ES 2.0')}}</font></font></td>
<td><font><font>{{Spec2 ('OpenGL ES 2.0')}}</font></font></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="Browser_compatibility">Browser compatibility</h2>
<h3 id="WebGL_1">WebGL 1</h3>
<div>
<p>{{Compat("api.WebGLRenderingContext", 0)}}</p>
<h3 id="WebGL_2_2">WebGL 2</h3>
<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
<p>{{Compat("api.WebGL2RenderingContext", 0)}}</p>
</div>
<h3 id="Compatibility_notes">Compatibility notes</h3>
<p><font><font>นอกเหนือจากเบราว์เซอร์แล้ว GPU เองยังต้องการการสนับสนุนคุณสมบัติ </font><font>ตัวอย่างเช่น S3 การบีบอัดพื้นผิว (S3TC) มีเฉพาะในแท็บเล็ตที่ใช้ Tegra เท่านั้น </font><font>เบราว์เซอร์ส่วนใหญ่ทำให้บริบท WebGL พร้อมใช้งานผ่าน</font></font><code>webgl</code><font><font>ชื่อบริบท แต่</font><font>เบราว์เซอร์ที่</font><font>เก่ากว่านั้นต้องการ</font></font><code>experimental-webgl</code><font><font>เช่นกัน </font><font>นอกจากนี้การที่จะเกิดขึ้น</font></font><a href="/en-US/docs/Web/API/WebGL2RenderingContext"><font><font>WebGL 2</font></font></a><code>webgl2</code><font><font>เป็นอย่างถอยหลังได้และจะมีชื่อบริบท</font></font></p>
<h3 id="บันทึกตุ๊กแก"><font><font>บันทึกตุ๊กแก</font></font></h3>
<h4 id="การแก้ไขข้อบกพร่องและการทดสอบ_WebGL"><font><font>การแก้ไขข้อบกพร่องและการทดสอบ WebGL</font></font></h4>
<p><font><font>เริ่มต้นด้วย Gecko 10.0 {{geckoRelease ("10.0")}} มีการตั้งค่าสองแบบที่ให้คุณควบคุมความสามารถของ WebGL สำหรับการทดสอบ:</font></font></p>
<dl>
<dt><code>webgl.min_capability_mode</code></dt>
<dd><font><font>คุณสมบัติบูลีนที่เมื่อ</font></font><code>true</code><font><font>เปิดใช้งานโหมดความสามารถขั้นต่ำ </font><font>เมื่ออยู่ในโหมดนี้ WebGL จะได้รับการกำหนดค่าให้สนับสนุนชุดคุณลักษณะขั้นต่ำเปลือยและความสามารถที่จำเป็นตามข้อกำหนด WebGL เท่านั้น </font><font>วิธีนี้ช่วยให้คุณมั่นใจได้ว่ารหัส WebGL ของคุณจะทำงานบนอุปกรณ์หรือเบราว์เซอร์ใด ๆ โดยไม่คำนึงถึงความสามารถของพวกเขา </font><font>นี่คือ</font></font><code>false</code><font><font>ค่าเริ่มต้น</font></font></dd>
<dt><code>webgl.disable_extensions</code></dt>
<dd><font><font>คุณสมบัติบูลีนที่เมื่อ</font></font><code>true</code><font><font>ปิดใช้งานส่วนขยาย WebGL ทั้งหมด </font><font>นี่คือ</font></font><code>false</code><font><font>ค่าเริ่มต้น</font></font></dd>
</dl>
<h2 id="ดูสิ่งนี้ด้วย"><font><font>ดูสิ่งนี้ด้วย</font></font></h2>
<ul>
<li><a href="/en-US/docs/Web/API/Canvas_API"><font><font>Canvas API</font></font></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility"><font><font>ข้อมูลความเข้ากันได้เกี่ยวกับส่วนขยาย WebGL</font></font></a></li>
</ul>
|
