我如何存储和以后检索纹理在three.js?

Question

我想存储来自网络摄像头的帧，然后在THREE上显示这些(延迟的)帧。PlaneGeometry纹理。

我已经有一个网络摄像头框架封装在一个3。纹理子类，并可以将其应用于材质。现在我想缓冲这些帧并延迟它们:

**** pseudocode within tick() function ****
for (let i = 0; i < bufferedFrames.length - 1; i++) {
bufferedFrames[i] = bufferedFrames[i+1];
}
bufferedFrames[bufferedFrames.length - 1] = currentWebCamTexture;
// Now display delayed texture.
plane.material.map = bufferedFrames[0]; // Use a frame from the past.
plane.material.map.needsUpdate = true;
renderer.render(scene, camera)

不幸的是，似乎不可能存储旧帧。甚至三人。Texture的clone()方法声明克隆不会创建"深度拷贝"。图像的。因此，我并没有真正缓冲一个唯一帧数组。

目前我可以解决这个问题，如果我使用WebGLRenderTargets，即保持一个WebGLRenderTargets数组，并渲染一个场景，只包含我的中心摄像头帧。为了恢复纹理而重新渲染场景似乎很浪费。这是正确的做法吗?有没有更干净的方法?

Answer 1

RenderTargets是存储程序生成的纹理以供以后使用的唯一方法。从技术上讲，你可以将其复制到2D画布上，并将其存储在其他地方，但如果你想以60FPS的速度连续读取WebGL的颜色数据，那么用这种方法读取颜色数据是非常缓慢和低效的。

你不需要渲染整个场景。因为你只想复制帧而不需要任何3D转换，你可以用一个非常基本的相机直接渲染一个简单的平面网格:

// Build a plane mesh
const planeGeom = new THREE.PlaneGeometry(2, 2);
const planeMat = new THREE.MeshBasicMaterial({map: yourTexture});
const simplePlane = new THREE.Mesh(planeGeom, planeMat);
// Create simplest camera
const simpleCam = new THREE.Camera();
// Save texture to your renderTarget
renderer.setRenderTarget(yourRenderTarget);
renderer.render(simplePlane, simpleCam);