Three.js：纹理到datatexture [英] Three.js: texture to datatexture

问题描述

我正在尝试在javascript中实现延迟的网络摄像头查看器，使用Three.js进行WebGL功能。

I'm trying to implement a delayed webcam viewer in javascript, using Three.js for WebGL capabilities.

我需要存储从网络摄像头抓取的帧，所以他们可以在一段时间后显示（几毫秒到几秒）。我可以在没有Three.js的情况下使用 canvas 和 getImageData（）来完成此操作。你可以找到关于jsfidle的一个例子。

I need to store frames grabbed from webcam, so they can be shown after some time (some milliseconds to some seconds). I'm able to do this without Three.js, using canvas and getImageData(). You can find an example on jsfidle.

我试图在没有画布的情况下找到一种方法，但是使用Three.js 纹理或 DataTexture 对象。 这是我正在尝试的一个例子。问题是我找不到如何从纹理复制图像（图像的类型为 HTMLVideoElement ）到另一个。

I'm trying to find a way to do this without canvas, but using Three.js Texture or DataTexture object. Here an example of what I'm trying. The problem is that I cannot find how to copy the image from a Texture (image is of type HTMLVideoElement) to another.

在 rotateFrames（）函数中，旧帧应该丢失，更新的帧应该更换，就像在FIFO中一样。但行

In rotateFrames() function the older frame should be lost and newer should replace, like in a FIFO. But the line

frames[i].image = frames[i + 1].image;

只是复制参考，而不是纹理数据。我猜 DataTexture 应该这样做，但我无法从<$ c $中获得 DataTexture c>纹理或 HTMLVideoElement 。

is just copying the reference, not the texture data. I guess DataTexture should do this, but I'm not able to get a DataTexture out of a Texture or HTMLVideoElement.

任何想法？

警告：您必须拥有一台摄像头并允许浏览器使用它来运行示例。显然，你必须有一个更新的浏览器。

Warning: you must have a camera and allow the browser to use it to get examples working. And obviously, you must have an updated browser.

推荐答案

这是你想要的吗？

http://fiddle.jshell.net/m4Bh7/10/

编辑：

function onFrame(dt) {
    if (video.readyState === video.HAVE_ENOUGH_DATA) { /* new frame available from webcam */
        context.drawImage(video, 0, 0,videoWidth,videoHeight);
        frames[framesNum - 1].image.data = new Uint8Array(context.getImageData(0,0,videoWidth, videoHeight).data.buffer);
        frames[framesNum - 1].needsUpdate = true;
    }
}

这是最重要的部分：它制作副本框架并将其保存为dataTexture中的数据。

This is the most important part: It makes a copy of the frame and saves it as a data in a dataTexture.

function rotateFrames() {
    for (var i = 0; i != framesNum - 1; ++i) {
/*
         * FIXME: this does not work!
         */
        frames[i].image.data = frames[i + 1].image.data;
        frames[i].needsUpdate = true;
    }
}

然后将数据从纹理复制到纹理中帧。

This copies then the data from texture to texture in the frames.

新版本：http：//fiddle.jshell.net/hWL2E/4/

new version:http://fiddle.jshell.net/hWL2E/4/

function onFrame(dt) {
    if (video.readyState === video.HAVE_ENOUGH_DATA) { /* new frame available from webcam */
        context.drawImage(video, 0, 0,videoWidth,videoHeight);
         var frame = new THREE.DataTexture(new Uint8Array(context.getImageData(0,0,videoWidth, videoHeight).data.buffer) ,videoWidth,videoHeight);
        frames[framesNum - 1] = frame;
        frames[framesNum - 1].needsUpdate = true;
        sprites[framesNum - 1].map = frames[framesNum - 1];
    }
}

它为视频图像的每一帧生成一个新纹理。

It generates a new texture every frame for the video images.

function rotateFrames() {
    for (var i = 0; i != framesNum - 1; ++i) {
/*
         * FIXME: this does not work!
         */
        frames[i] = frames[i + 1];
        sprites[i].map = frames[i];

    }
}

这就是它变得更好的原因。因为它重用了所使用的纹理，意味着它不需要重新发送到GPU。

this is what makes it better. Becuase it reuses the textures that were used, means that it doesn't need to be resent to the GPU.

这篇关于Three.js：纹理到datatexture的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！