---
title: WebGLShader
slug: Web/API/WebGLShader
translation_of: Web/API/WebGLShader
---
<div>{{APIRef("WebGL")}}</div>

<div><strong>WebGLShader</strong> 는 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API">WebGL API</a> 의 일부이며 정점 혹은 프래그먼트 셰이더가 될 수 있다. {{domxref("WebGLProgram")}} 는 두 타입의 셰이더 모두를 요구한다.</div>

<div> </div>

<h2 id="설명">설명</h2>

<p><strong>WebGLShader</strong> 를 생성하려면 {{domxref("WebGLRenderingContext.createShader")}}를 사용한다. 그러고 나서는  {{domxref("WebGLRenderingContext.shaderSource()")}}를 사용해서 GLSL 소스 코드를 연결한다. 마지막으로{{domxref("WebGLRenderingContext.compileShader()")}}를 호출하고 셰이더를 컴파일한다. 이 시점에서 <strong>WebGLShader</strong> 는 여전히 사용할 수 있는 형식은 아니고{{domxref("WebGLProgram")}}에 부착되어야 한다.</p>

<pre class="brush: js">function createShader (gl, sourceCode, type) {
  // 셰이더 타입 gl.VERTEX_SHADER 또는 gl.FRAGMENT_SHADER 중 하나를 컴파일한다.
  var shader = gl.createShader( type );
  gl.shaderSource( shader, sourceCode );
  gl.compileShader( shader );

  if ( !gl.getShaderParameter(shader, gl.COMPILE_STATUS) ) {
    var info = gl.getShaderInfoLog( shader );
    throw "Could not compile WebGL program. \n\n" + info;
  }
}
</pre>

<p>셰이더 부착에 관한 정보는 {{domxref("WebGLProgram")}} 를 참고한다.</p>

<h2 id="예시들">예시들</h2>

<h3 id="정점_셰이더_생성하기">정점 셰이더 생성하기</h3>

<p>셰이더 소스 코드 문자열들을 작성하고 접근하는 많은 다른 방법들이 있다는 점에 주목하라. 여기의 예는 오직 설명을 목적으로 한다.</p>

<pre class="brush: js">var vertexShaderSource =
  "attribute vec4 position;\n"
  "void main() {\n"+
  "  gl_Position = position;\n"+
  "}\n";

// 위 예시로부터 createShader 함수를 사용한다.
var vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER)
</pre>

<h3 id="프래그먼트_셰이더_생성하기">프래그먼트 셰이더 생성하기</h3>

<pre class="brush: js">var fragmentShaderSource =
  "void main() {\n"+
  "  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n"+
  "}\n";

// 위 예시로부터 createShader 함수를 사용한다.
var fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER)
</pre>

<h2 id="명세들">명세들</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">명세</th>
   <th scope="col">상태</th>
   <th scope="col">코멘트</th>
  </tr>
  <tr>
   <td>{{SpecName('WebGL', "#5.8", "WebGLShader")}}</td>
   <td>{{Spec2('WebGL')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome("9")}}</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>{{CompatIE("11")}}</td>
   <td>{{CompatOpera("12")}}</td>
   <td>{{CompatSafari("5.1")}}</td>
  </tr>
  <tr>
   <td>Available in workers</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop(44)}} [1]</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>25</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>12</td>
   <td>8.1</td>
  </tr>
  <tr>
   <td>Available in workers</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile(44)}} [1]</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] This feature is behind a feature preference setting. In about:config, set <code>gfx.offscreencanvas.enabled</code> to <code>true</code>.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{domxref("WebGLProgram")}}</li>
 <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li>
 <li>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</li>
 <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li>
 <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
 <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
 <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
 <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
 <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li>
 <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
 <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
 <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
 <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li>
 <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li>
 <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li>
 <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
 <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
 <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
 <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
 <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li>
 <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
 <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
</ul>