path: root/files/ko/web/api/webgl_api/index.html

---
title: WebGL
slug: Web/API/WebGL_API
tags:
  - 3D
  - 3D Graphics
  - API
  - Advanced
  - Graphics
  - JavaScript
  - Media
  - Overview
  - Reference
  - WebGL
  - WebGL API
translation_of: Web/API/WebGL_API
---
<div>{{WebGLSidebar}}</div>

<p><strong>WebGL</strong>(Web Graphics Library)은 플러그인을 사용하지 않고 웹 브라우저에서 상호작용 가능한 3D와 2D 그래픽을 표현하기 위한 JavaScript API입니다. WebGL은 HTML5 {{HTMLElement("canvas")}} 요소에서 사용할 수 있는, OpenGL ES 2.0을 대부분 충족하는 API를 제공합니다.</p>

<p>WebGL은 <a href="https://www.mozilla.org/ko/firefox/new/">Firefox</a> 4+, <a href="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/fr/safari/">Safari</a> 5.1+, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 11+, <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a> build 10240+에서 사용할 수 있습니다. 그러나 사용자 장치의 하드웨어도 WebGL 기능을 지원해야 합니다.</p>

<p>{{HTMLElement("canvas")}} 요소는 <a href="/ko/docs/Web/API/Canvas_API">캔버스 API</a>를 사용해 웹 페이지에서 2D 그래픽을 그릴 때도 사용됩니다.</p>

<h2 class="Documentation" id="참고서">참고서</h2>

<h3 id="표준_인터페이스">표준 인터페이스</h3>

<div class="index">
<ul>
 <li>{{domxref("WebGLRenderingContext")}}</li>
 <li>{{domxref("WebGL2RenderingContext")}}</li>
 <li>{{domxref("WebGLActiveInfo")}}</li>
 <li>{{domxref("WebGLBuffer")}}</li>
 <li>{{domxref("WebGLContextEvent")}}</li>
 <li>{{domxref("WebGLFramebuffer")}}</li>
 <li>{{domxref("WebGLProgram")}}</li>
 <li>{{domxref("WebGLQuery")}}</li>
 <li>{{domxref("WebGLRenderbuffer")}}</li>
 <li>{{domxref("WebGLSampler")}}</li>
 <li>{{domxref("WebGLShader")}}</li>
 <li>{{domxref("WebGLShaderPrecisionFormat")}}</li>
 <li>{{domxref("WebGLSync")}}</li>
 <li>{{domxref("WebGLTexture")}}</li>
 <li>{{domxref("WebGLTransformFeedback")}}</li>
 <li>{{domxref("WebGLUniformLocation")}}</li>
 <li>{{domxref("WebGLVertexArrayObject")}}</li>
</ul>
</div>

<h3 id="확장">확장</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_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")}} {{experimental_inline}}</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="이벤트">이벤트</h3>

<ul>
 <li><code><a href="/ko/docs/Web/API/HTMLCanvasElement/webglcontextlost_event">webglcontextlost</a></code></li>
 <li><code><a href="/ko/docs/Web/API/HTMLCanvasElement/webglcontextrestored_event">webglcontextrestored</a></code></li>
 <li><code><a href="/ko/docs/Web/API/HTMLCanvasElement/webglcontextcreationerror_event">webglcontextcreationerror</a></code></li>
</ul>

<h3 id="상수와_자료형">상수와 자료형</h3>

<ul>
 <li><a href="/ko/docs/Web/API/WebGL_API/Constants">WebGL 상수</a></li>
 <li><a href="/ko/docs/Web/API/WebGL_API/Types">WebGL 자료형</a></li>
</ul>

<h3 id="WebGL_2">WebGL 2</h3>

<p>WebGL 2는 {{domxref("WebGL2RenderingContext")}} 인터페이스를 통해 제공되는 WebGL 메이저 업데이트다. OpenGL ES 3.0 을 기반으로 하며 다음과 같은 특징을 포함한다:</p>

<ul>
 <li><a href="/ko/docs/Web/API/WebGL2RenderingContext/texImage3D">3D textures</a>,</li>
 <li><a href="/ko/docs/Web/API/WebGLSampler">Sampler objects</a>,</li>
 <li><a href="/ko/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects">Uniform Buffer objects</a>,</li>
 <li><a href="/ko/docs/Web/API/WebGLSync">Sync objects</a>,</li>
 <li><a href="/ko/docs/Web/API/WebGLQuery">Query objects</a>,</li>
 <li><a href="/ko/docs/Web/API/WebGLTransformFeedback">Transform Feedback objects</a>,</li>
 <li>WebGL 2의 핵심이 된 확장 기능: <a href="/ko/docs/Web/API/WebGLVertexArrayObject">Vertex Array objects</a>, <a href="/ko/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced">instancing</a>, <a href="/ko/docs/Web/API/WebGL2RenderingContext/drawBuffers">multiple render targets</a>, <a href="/ko/docs/Web/API/EXT_frag_depth">fragment depth</a>.</li>
</ul>

<p><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> 데모도 참고.</p>

<h2 class="Documentation" id="안내서와_자습서">안내서와 자습서</h2>

<h3 id="안내서">안내서</h3>

<dl>
 <dt><a href="/ko/docs/Web/API/WebGL_API/Data">WebGL의 데이터</a></dt>
 <dd>WebGL 코드를 작성할 때 사용하는 변수, 버퍼와 그 외 다른 형태의 데이터를 알아봅니다.</dd>
 <dt><a href="/ko/docs/Web/WebGL/WebGL_best_practices" title="WebGL/WebGL best practices">WebGL 우수 사례</a></dt>
 <dd>WebGL 콘텐츠의 품질, 성능, 안정성을 높일 수 있는 팁과 제안입니다.</dd>
 <dt><a href="/ko/docs/Web/WebGL/Using_Extensions" title="WebGL/Using_Extensions">확장 사용</a></dt>
 <dd>WebGL 확장을 사용하는 법을 알아봅니다.</dd>
</dl>

<h3 id="자습서">자습서</h3>

<dl>
 <dt><a href="/ko/docs/Web/API/WebGL_API/Tutorial">WebGL 자습서</a></dt>
 <dd>초심자를 위한 WebGL 핵심 개념입니다. WebGL을 접해보지 않았다면 여기서 시작해보세요.</dd>
</dl>

<h3 id="예제">예제</h3>

<dl>
 <dt><a href="/ko/docs/Web/API/WebGL_API/Basic_2D_animation_example">기초 WebGL 2D 애니메이션 예제</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="/ko/docs/Web/API/WebGL_API/By_example">예제로 알아보는 WebGL</a></dt>
 <dd>A series of live samples with short explanations that showcase WebGL concepts and capabilities. The examples are sorted according to topic and level of difficulty, covering the WebGL rendering context, shader programming, textures, geometry, user interaction, and more.</dd>
</dl>

<h3 id="고급_자습서">고급 자습서</h3>

<dl>
 <dt><a href="/ko/docs/Web/API/WebGL_API/WebGL_model_view_projection">WebGL 모델 뷰 프로젝션</a></dt>
 <dd>A detailed explanation of the three core matrices that are typically used to represent a 3D object view: the model, view and projection matrices.</dd>
 <dt><a href="/ko/docs/Web/API/WebGL_API/Matrix_math_for_the_web">웹을 위한 행렬 계산</a></dt>
 <dd>A useful guide to how 3D transform matrices work, and can be used on the web — both for WebGL calculations and in CSS3 transforms.</dd>
</dl>

<h2 class="Related_Topics" id="참고자료">참고자료</h2>

<ul>
 <li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">Raw WebGL: An introduction to WebGL</a> A talk by Nick Desaulniers that introduces the basics of WebGL. This is a great place to start if you've never done low-level graphics programming.</li>
 <li><a href="http://www.khronos.org/webgl/">Khronos WebGL site</a> The main web site for WebGL at the Khronos Group.</li>
 <li><a href="http://learningwebgl.com/blog/?page_id=1217">Learning WebGL</a> A site with tutorials on how to use WebGL.</li>
 <li><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL Fundamentals</a> A basic tutorial with fundamentals of WebGL.</li>
 <li><a href="http://webglplayground.net/">WebGL playground</a> An online tool for creating and sharing WebGL projects. Good for quick prototyping and experimenting.</li>
 <li><a href="http://www.webglacademy.com/">WebGL Academy</a> An HTML/JavaScript editor with tutorials to learn basics of webgl programming.</li>
 <li><a href="http://webglstats.com/">WebGL Stats</a> A site with statistics about WebGL capabilities in browsers on different platforms.</li>
</ul>

<h3 id="Libraries">Libraries</h3>

<ul>
 <li><a href="https://github.com/toji/gl-matrix">glMatrix</a> is a JavaScript matrix and vector library for high-performance WebGL apps.</li>
 <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> is a WebGL framework for data visualization, creative coding, and game development.</li>
 <li><a href="http://www.pixijs.com/">Pixi.js</a> is a fast, open-source 2D WebGL renderer.</li>
 <li><a href="https://playcanvas.com/">PlayCanvas</a> is an open-source game engine.</li>
 <li><a href="http://sylvester.jcoglan.com/">Sylvester</a> is an open-source library for manipulating vectors and matrices. Not optimized for WebGL but extremely robust.</li>
 <li><a href="https://threejs.org/">three.js</a> is an open-source, fully featured 3D WebGL library.</li>
 <li><a href="https://phaser.io/">Phaser</a> is a fast, free and fun open source framework for Canvas and WebGL powered browser games</li>
</ul>

<h2 class="Related_Topics" id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('WebGL')}}</td>
   <td>{{Spec2('WebGL')}}</td>
   <td>Initial definition. Based on OpenGL ES 2.0</td>
  </tr>
  <tr>
   <td>{{SpecName('WebGL2')}}</td>
   <td>{{Spec2('WebGL2')}}</td>
   <td>Builds on top of WebGL 1. Based on 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 class="Related_Topics" id="브라우저_호환성">브라우저 호환성</h2>

<h3 id="WebGL_1">WebGL 1</h3>



<p>{{Compat("api.WebGLRenderingContext", 0)}}</p>

<h3 id="WebGL_2_2">WebGL 2</h3>

<p>{{Compat("api.WebGL2RenderingContext", 0)}}</p>

<h3 id="호환성_노트">호환성 노트</h3>

<p>브라우저 이외에 GPU 자체도 기능을 제공합니다. 따라서 예를들면 S3 텍스처 압축(S3TC)은 오직 테그라 기반 테블렛에서 사용가능합니다.</p>

<h3 id="게코_노트">게코 노트</h3>

<h4 id="WebGL_디버깅과_테스팅">WebGL 디버깅과 테스팅</h4>

<p>Gecko 10.0 {{geckoRelease("10.0")}}을 사용하면 WebGL의 호환성을 테스트 목적으로 제어할수 있도록 두 가지 환경설정을 할 수 있습니다.</p>

<dl>
 <dt><code>webgl.min_capability_mode</code></dt>
 <dd>Boolean 속성으로 참일 경우 최소 호환성 모드로 사용 가능합니다. <span style="line-height: 1.5;">이 모드에서 WebGL는 오직 최소한의 기능만 설정하고 WebGL 명세에서 필요한 기능만 지원하도록 설정되어 집니다. 이는 WebGL코드가 어떠한 디바이스나 브라우저에서 작동이 된다는 것을 보장합니다. 기본값으로는 거짓으로 설정되어 있습니다.</span></dd>
 <dt><code>webgl.disable_extensions</code></dt>
 <dd>Boolean 속성으로 참일 경우 WebGL 확장을 비활성화 하고 기본값은 거짓입니다.</dd>
</dl>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li><a href="/ko/docs/Web/API/Canvas_API">Canvas API</a></li>
 <li><a href="/ko/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Compatibility info about WebGL extensions</a></li>
</ul>