Revision 825421 of WebGLProgram

<p><span style="line-height:19.0909080505371px">{{APIRef("WebGL")}} {{draft}}</span><br />
 The&nbsp;<strong>WebGLProgram</strong>&nbsp;is a combination of two&nbsp;compiled {{domxref("WebGLShader")}}s&nbsp;consisting of a&nbsp;vertex shader and a fragment shader (both&nbsp;written in GLSL). These are&nbsp;then linked&nbsp;into a usable program.</p>

<pre class="brush: js">
var program = gl.createProgram();

//Attach pre-existing shaders
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
  var info = gl.getProgramInfoLog(program);
  throw "Could not compile WebGL program. \n\n" + info;
}
</pre>

<p>See <span style="line-height:19.0909080505371px">{{domxref("WebGLShader")}}</span>&nbsp;for information on creating the vertexShader and fragmentShader in the above example.</p>

<h2 id="Using_the_program">Using the program</h2>

<p>The steps to actually do some work with the program involve <span style="line-height:19.0909080505371px">telling the GPU to use the program,</span>&nbsp;binding the appropriate data and configuration options, and then finally drawing something to the screen.</p>

<pre class="brush: js">
// Use the program
gl.useProgram(program);

// Bind existing attribute data
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.enableVertexAttribArray(attributeLocation);
gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0);

// Draw a single triangle
gl.drawArrays(gl.TRIANGLES, 0, 3);
</pre>

<h2 id="Deleting_the_program">Deleting the program</h2>

<p>If there is an error compiling the program or you wish to delete an existing program, then it is as simple as running {{domxref("WebGLRenderingContext.deleteProgram()")}}. This frees the memory of the compiled program, and invalidates the name associated with the program.</p>

<pre class="brush: js">
gl.deleteProgram(program);
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('WebGL', "#5.6", "WebGLProgram")}}</td>
   <td>{{Spec2('WebGL')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

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

<ul>
 <li>{{domxref("WebGLShader")}}</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>