webgl - 可以从 WebGL 纹理对象轻松创建 HTML 图像元素吗？

Question

我想要一个我已经渲染的 WebGLTexture 对象并使用它来创建一个 HTML 图像元素。目标是为了调试目的显示离屏渲染过程的结果。它应该比将纹理渲染到全屏四边形(我目前的调试方法)容易得多。

在 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 ...
}

如果有办法做到这一点，我相信它在调试之外的环境中很有用。我会继续看看我是否能找到一种方法来做到这一点，但我觉得之前有人不得不尝试过。

Answer 1

您可以创建一个 framebuffer由纹理支持，然后使用 gl.readPixels() 从帧缓冲区中读取原始像素数据.获得数据像素后，您可以使用 ImageData 将它们复制到 2D Canvas 上。 .然后你可以通过将图像的 src 属性设置为 canvas.toDataURL() 来构造一个图像。 .

function createImageFromTexture(gl, texture, width, height) {
    // Create a framebuffer backed by the texture
    var framebuffer = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);

    // Read the contents of the framebuffer
    var data = new Uint8Array(width * height * 4);
    gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, data);

    gl.deleteFramebuffer(framebuffer);

    // Create a 2D canvas to store the result 
    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    var context = canvas.getContext('2d');

    // Copy the pixels to a 2D canvas
    var imageData = context.createImageData(width, height);
    imageData.data.set(data);
    context.putImageData(imageData, 0, 0);

    var img = new Image();
    img.src = canvas.toDataURL();
    return img;
}