如何在 three.js 中存储和稍后检索纹理？

Question

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

我已经在 THREE.Texture 子类中封装了一个网络摄像头框架，可以将其应用于 material。现在我想缓冲这些帧并延迟它们：

**** 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)

遗憾的是，它似乎无法存储旧帧。甚至 THREE.Texture 的 clone() 方法也声明克隆不会创建图像的“深拷贝”。因此，我并没有真正缓冲一系列独特的帧。

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

Answer 1

RenderTargets 是存储 procedurally-generated 纹理供以后使用的唯一方法。从技术上讲，您可以将其复制到 2D canvas，并将其存储在其他地方，但是如果您想以 60FPS 的速度连续读取颜色数据，用这种方法从 WebGL 读取颜色数据非常缓慢且效率低下。

您不需要渲染整个场景。由于您只想复制帧而不进行任何 3D 变换，因此您可以直接使用 a very basic camera:

渲染一个简单的平面网格

// 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);

如何在 three.js 中存储和稍后检索纹理？

How can I store and later retrieve Textures in three.js?

three.js

rendertarget