Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All
Expand Minimize

createShader method

Returns an empty vertex or fragment shader object based on the type specified.

IE11

 

Syntax

var retVal = WebGLRenderingContext.createShader(type);

Parameters

type [in]

Type: Number

Either gl.FRAGMENT_SHADER or gl.VERTEX_SHADER constants.

Return value

Type: WebGLShader

Shader object of type fragment or vertex shader.

Remarks

WebGL errorDescription
gl.INVALID_ENUMThe shader type is not an accepted value.

 

Examples

The following example gets shader code from a <script> tag in an HTML document, and creates a fragment or vertex shader. For more info on this example, see Get started with WebGL.


// Loads a shader from a script tag
// Parameters:
//   WebGL context
//   id of script element containing the shader to load
function getShader(gl, id) {
  var shaderScript = document.getElementById(id);

  // error - element with supplied id couldn't be retrieved
  if (!shaderScript) {
    return null;
  }

  // If successful, build a string representing the shader source
  var str = "";
  var k = shaderScript.firstChild;
  while (k) {
    if (k.nodeType == 3) {
      str += k.textContent;
    }
    k = k.nextSibling;
  }

  var shader;

  // Create shaders based on the type we set
  //   note: these types are commonly used, but not required
  if (shaderScript.type == "x-shader/x-fragment") {
    shader = gl.createShader(gl.FRAGMENT_SHADER);
  } else if (shaderScript.type == "x-shader/x-vertex") {
    shader = gl.createShader(gl.VERTEX_SHADER);
  } else {
    return null;
  }

  gl.shaderSource(shader, str);
  gl.compileShader(shader);

  // Check the compile status, return an error if failed
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.log(gl.getShaderInfoLog(shader));
    return null;
  }

  return shader;
}



See also

WebGLRenderingContext

 

 

Show:
© 2015 Microsoft