javascript - 如何在webgl中获取纹理？没有Canvas.toDataUrl()

Question

我想从 webgl 获取纹理，就像我可以在 Canvas 上下文为 2d 时使用 getImageData() 一样。
我怎样才能从 webgl 上下文中获取纹理？

Answer 1

我知道三种可能性。重要的! For all these methods you must set preserveDrawingBuffer = true with webgl 。

数据网址

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

canvas.toDataURL(type, encoderOptions);

例如，如果您想允许您的客户进行某些应用程序“屏幕截图”，您可以使用此功能

Following two methods are low level and its origin is webgl.如果您想要修改纹理或计算新纹理(阴影)，您可以使用它们。

5.14.12 读回像素

当前帧缓冲区中的像素可以读回 ArrayBufferView 对象。

void readPixels(GLint x, GLint y, GLsizei 宽度, GLsizei 高度, GLenum 格式, GLenum 类型, ArrayBufferView? 像素)

5.14.8 纹理对象

纹理对象为纹理操作提供存储和状态...

void texImage2D(GLenum 目标、GLint 级别、GLenum 内部格式、GLint 边框、GLenum 格式、GLenum 类型、HTMLCanvasElement 元素)