[英]Three.js: texture to datatexture
我正在尝试在javascript中实现延迟的网络摄像头查看器,使用Three.js进行WebGL功能。
我需要存储从网络摄像头抓取的帧,所以它们可以在一段时间后显示(几毫秒到几秒)。 我可以使用canvas
和getImageData()
没有Three.js的情况下执行此操作。 你可以在jsfidle上找到一个例子 。
我试图找到一种方法来做到这一点没有画布,但使用Three.js Texture
或DataTexture
对象。 这是我正在尝试的一个例子 。 问题是我找不到如何将图像从Texture
( image
是HTMLVideoElement
类型) HTMLVideoElement
到另一个。
在rotateFrames()
函数中,较旧的帧应该丢失,而较新的帧应该更换,就像在FIFO中一样。 但行
frames[i].image = frames[i + 1].image;
只是复制引用,而不是纹理数据。 我想DataTexture
应该这样做,但我没能得到一个DataTexture
出的Texture
或HTMLVideoElement
。
任何想法?
警告:您必须拥有摄像头并允许浏览器使用它来使示例正常工作。 显然,您必须拥有更新的浏览器。
这是你在找什么?
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中。
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。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.