Texture Checker Upload

A tiny checkerboard array is uploaded into a WebGL texture and sampled by the next draw.

Program

Textures move image data into GPU memory. This lesson assumes the shader program and textured quad from earlier setup are active, then focuses on the texture state introduced here.

texture_checker_upload.html

<canvas id="gl" width="320" height="180"></canvas>
<script>
  const gl = document.querySelector("#gl").getContext("webgl");
  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  const pixels = new Uint8Array([255,255,255,255, 20,20,20,255, 20,20,20,255, 255,255,255,255]);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
  gl.drawArrays(gl.TRIANGLES, 0, 6);
</script>

texture A texture stores image data for shaders to sample.

active draw setup The texture upload step depends on the shader and geometry setup established earlier in the WebGL book.

texImage2D texImage2D uploads pixel data into the bound texture.