How To Get Texture In Webgl?without Canvas.todataurl()

I want to get texture from webgl just like i can use getImageData()when the canvas context is 2d. how can i get texture form webgl context?

Solution 1:

I know three possibilities. Important! For all these methods you must set preserveDrawingBuffer = true with webgl.

To data url

First one is high level method toDataURL and its origin is javascript

canvas.toDataURL(type, encoderOptions);

You can use this for example if you want to allow your client to do some app "screenshot"

Following two methods are low level and its origin is webgl. You can use them if you want to for example modify texture or calculate new texture (shadows).

5.14.12 Reading back pixels

Pixels in the current framebuffer can be read back into an ArrayBufferView object.

void readPixels(GLint x, GLint y, GLsizei width, GLsizei height, GLenum format, GLenum type, ArrayBufferView? pixels)

5.14.8 Texture objects

Texture objects provide storage and state for texturing operations ...

void texImage2D(GLenum target, GLint level, GLenum internalformat, GLint border, GLenum format, GLenum type, HTMLCanvasElement element)