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




© 2016 Microsoft