如何比较 Three.js 中的像素答案

【问题标题】：How to compare pixels in Three.js如何比较 Three.js 中的像素
【发布时间】：2016-10-25 16:33:06
【问题描述】：

我在three.js 中有两个纹理，我想在像素级别进行比较。但我不知道该怎么做。 Three.js 文档没有回答我的问题。确实有些类没有记录。

简而言之，我想计算 2 张图像的不同之处（在我的遗传算法中计算适应度值）。

编辑：有人告诉我应该提供更多信息。我们开始吧。

一个纹理来自使用“loadTexture”加载的图像：

        referenceTexture = THREE.ImageUtils.loadTexture('images/tia1.jpg'); //256px*256px image

获得另一个我将一些多边形添加到第二个场景，然后我将该场景渲染为纹理：

var bufferScene = new THREE.Scene();
var bufferTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter,format: THREE.RGBAFormat});
bufferScene.add(triangle) //This is a bucle in the real code.
renderer.setSize(256,256);
requestAnimationFrame( render );
renderer.render(bufferScene, camera, bufferTexture);

提前谢谢你。

【问题讨论】：

您的问题有点过于笼统，无法准确回答。如果你有你正在尝试做的最少的示例代码，那将会有所帮助。如果没有代码或特定的 API 接口名称，很难猜出您要询问的是 Three.js API 的哪一部分。

标签： javascript three.js webgl

【解决方案1】：

您可以将每个纹理附加到渲染目标，然后调用renderer.readRenderTargetPixels 以获取每个纹理的像素，然后进行比较。

或

您可以使用区分这 2 个纹理的着色器将这两个纹理渲染到另一个渲染目标，然后使用 renderer.readRenderTargetPixels 从该渲染目标中读取像素

【讨论】：

谢谢。我想我会尝试第一个选项，因为着色器很复杂。两种方法都一样好还是第二种方法更快？

【解决方案2】：

您可以在与纹理大小相同的画布上绘制纹理，并使用gl.readPixels 从帧缓冲区读取像素颜色。之后，您可以在 CPU 上比较值。

您还可以在 GPU 上执行像素颜色减法并渲染差异（然后读取像素）。

【讨论】：

我无法绘制画布，因为我需要在屏幕上显示两种纹理。