如何比较 Three.js 中的像素

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

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

处的值

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

Answer 2

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

或

您可以使用区分这两个纹理的着色器将两个纹理渲染到另一个渲染目标，然后使用 renderer.readRenderTargetPixels

从该渲染目标读取像素

如何比较 Three.js 中的像素

How to compare pixels in Three.js

javascript

webgl

three.js