三.js：纹理到数据纹理

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

我需要存储从网络摄像头抓取的帧，以便在一段时间（几毫秒到几秒）后显示它们。我可以在没有 Three.js 的情况下使用canvas and getImageData()。你可以找到jsfiddle 中的示例 http://jsfiddle.net/alessandro_pezzato/fZCJ3/embedded/result/.

我正在尝试找到一种无需画布但使用 Three.js 来完成此操作的方法Texture or DataTexture目的。这是我正在尝试的一个例子 http://jsfiddle.net/alessandro_pezzato/mJEVg/。问题是我找不到如何从Texture (image属于类型HTMLVideoElement）到另一个。

In rotateFrames()旧的帧应该丢失，新的帧应该替换，就像在 FIFO 中一样。但线

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

只是复制参考，而不是纹理数据。我猜DataTexture应该这样做，但我无法得到DataTexture出于一个Texture or HTMLVideoElement.

任何想法？

Warning:您必须有一个摄像头并允许浏览器使用它才能使示例正常工作。显然，您必须拥有更新的浏览器。

这是你要找的吗？

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

Edit:

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 中。

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;
    }
}

然后，这会将帧中的数据从一个纹理复制到另一个纹理。

新版本：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];
    }
}

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

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。