能否轻松地从 WebGL 纹理对象创建 HTML 图像元素？

Question

能否轻松地从 WebGL 纹理对象创建 HTML 图像元素？

13

我想将我已经渲染的 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 ...
}

如果有一种方法可以做到这一点，我相信它在除了调试以外的其他情境下也会非常有用。我会继续尝试找到一种方法来实现它，但我感觉肯定已经有人尝试过了。

- wmrowan

我在寻找一种方法时看到了这个链接： https://dev59.com/WlPTa4cB1Zd3GeqPjG1M - uotonyh

你是否找到了一个方法？ - Jón Trausti Arason

3个回答

2

这里有一个运行node.js服务器与toDataURL()协同工作的示例，用于直接将多个图像传输到磁盘上： http://www.oampo.co.uk/2011/01/exporting-video-from-webgl/

- Jeremy Cowles

0

WebGL上下文是一个画布，有几种良好记录的方法可以从画布中获取图像，因此基本的方法将如下所示：

在全屏（或者称为全画布）四边形上绘制您的纹理。最好在事先调整画布大小，使画布与您要绘制的纹理图像具有1:1的像素比例。
使用类似于这里描述的方法来从画布中获取图像数据。

如果您只想保存图像，可能需要将其发送到服务器进行处理，但如果您只想在渲染该页面的同一页面上显示该图像，则可以将给定的dataURI设置为img标签的src属性，它应该正确显示。

- Toji

1

我正在努力使用第2步的方法从WebGL画布中获取图像。目前我得到的只是完全透明的.png图像。是否有什么我需要在我的画布中设置但我忽略了的东西？ - James Bedford

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nkron · Accepted Answer

你可以创建一个由纹理支持的framebuffer，然后使用gl.readPixels()从framebuffer中读取原始像素数据。一旦你获取到了像素数据，你就可以使用ImageData将它们复制到一个2D画布中。然后，通过将图像的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;
}