---
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>