Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining

WebGLTexture object

Represents WebGL Texture object. It is used for images or cube maps when rendering shapes.




  <canvas id="canvas"></canvas>
  var gl = document.getElementById("canvas").getContext("experimental-webgl");
  var newTexture = gl.createTexture(); 

DOM Information

Inheritance Hierarchy



The WebGLTexture object does not define any members.


The following example creates a texture object. This example shows just one way of getting a texture. The example that this is from uses a canvas as a source of a texture. More commonly you would use an image object as a source. For more info on this example, see Get started with WebGL.

// Create a texture object that will contain the image.
var texture = gl.createTexture();

// Bind the texture the target (TEXTURE_2D) of the active texture unit.
gl.bindTexture(gl.TEXTURE_2D, texture);

// Flip the image's Y axis to match the WebGL texture coordinate space.
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
// Set the parameters so we can render any size image.        
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

  // Upload the resized canvas image into the texture.
//    Note: a canvas is used here but can be replaced by an image object. 
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);

See also




© 2015 Microsoft