Reading pixels from the offscreen framebuffer

We can go now to the offscreen buffer and read the color from the coordinates that we clicked on the canvas.

WebGL allows us to read back from a framebuffer using the readPixels function. As usual, having gl as the WebGL context variable:

Function

Description

gl.readPixels(x, y, width, height, format, type, pixels)

x and y: Starting coordinates. width, height: The extent of pixels to read from the framebuffer. In our example we are just reading one pixel (where the user clicks) so this will be 1,1. format: At the time of writing this book the only supported format is gl.RGBA. type: At the time of writing this book the only supported type is gl.UNSIGNED_BYTE. pixels: It is a typed array that will contain the results of querying the framebuffer. It needs to have sufficient space to store the results depending on the extent of the query (x,y,width,height). According to the WebGL specification at the time of writing this book it needs to...