javascript - 如何在 Three.js 中不在 Canvas 上实际渲染场景的情况下获取场景的像素数据？

Question

我想知道如果我要正常渲染一个场景，我是否基本上可以得到将在 Canvas 上渲染的像素(作为数组缓冲区)，但实际上没有做尚未在 Canvas 上渲染它们。如果是，怎么办？

我真的没有任何代码可以做这样的事情，因为我不知道它是否可能。 (另外，我对 Three.js 还很陌生)

Answer 1

几乎是:您可以将场景渲染成 THREE.WebGLRenderTarget并使用 renderer.readRenderTargetPixels()访问呈现的数据。我知道的唯一区别是它将没有抗锯齿。

所以像这样:

const rt = new THREE.WebGLRenderTarget(rendererWidth, rendererHeight);
renderer.render(scene, camera, rt);

// w/h: width/height of the region to read
// x/y: bottom-left corner of that region
const buffer = new Uint8Array(w * h * 4);
renderer.readRenderTargetPixels(rt, x, y, w, h, buffer);

现在，如果您只想渲染您感兴趣的一小部分屏幕，您可以使用 scissor-testing :

renderer.setScissor(x, y, w, h);
renderer.setScissorTest(true);

renderer.render(scene, camera, rt);

renderer.setScissor(0, 0, rendererWidth, rendererHeight);
renderer.setScissorTest(false);