Question

我在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);

提前谢谢。

Answer 1

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

OR

您可以使用着色器将两个纹理渲染到另一个渲染目标，该着色器使用renderer.readRenderTargetPixels

来区分2个纹理，然后从该渲染目标中读取像素

Answer 2

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

此外，你可以在GPU上执行像素颜色的减法并渲染差异（然后是readPixels）。

如何比较Three.js中的像素

2 个答案: