我想将我已经渲染的 WebGLTexture 对象转换成一个 HTML 图像元素。这样可以显示离屏渲染的结果以便进行调试。与我的当前调试方法——将纹理渲染到全屏四边形相比,这应该更容易实现。
在 WebGL 中,从图像元素创建纹理非常容易:
在 WebGL 中,从图像元素创建纹理非常容易:
var image = new Image();
image.src = "myImg.jpg";
// image loads...
var texture = gl.createTexture();
gl.bindTexture(texture);
gl.texImage2D(_gl.TEXTURE_2D, 0, _gl.RGBA, _gl.RGBA, _gl.UNSIGNED_BYTE, image);
图片加载和解码完全由系统自动处理。
有没有类似简单的方法来实现相反的操作?即:
// This doesn't work
var img = new Image(texture);
// But maybe this could
var img = createImageFromTexture(texture);
function createImageFromTexture(texture) {
// ... some combination of tricks ...
}
如果有一种方法可以做到这一点,我相信它在除了调试以外的其他情境下也会非常有用。我会继续尝试找到一种方法来实现它,但我感觉肯定已经有人尝试过了。