Real-Time 3D Graphics with WebGL 2 - Second Edition

Creating a Texture to Store Colors

The code to create a texture should be pretty straightforward after reading Chapter 7, Textures:

const canvas = document.getElementById('webgl-canvas');const { width, height } = canvas;const texture = gl.createTexture();gl.bindTexture(gl.TEXTURE_2D, texture);gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);

The only difference is that we do not have an image to bind to the texture, so when we call gl.texImage2D, the last argument is null. This is because we are allocating space to store colors for the offscreen framebuffer.

It's important to note that the width and height of the texture are set to the canvas size. This is because we want to ensure that the offscreen ...