Как сравнить пиксели в 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

Вы можете прикрепить каждую текстуру к цели рендеринга, затем вызвать renderer.readRenderTargetPixels, чтобы получить пиксели для каждой текстуры, а затем сравнить.

ИЛИ

Вы могли бы передать и текстуры в другую цель визуализации с использованием шейдеров, что дифференциалы в 2 текстуры, а затем считывать пиксели из этой цели визуализации с помощью renderer.readRenderTargetPixels

Answer 2

Вы можете нарисовать текстуру на холсте того же размера, что и текстура, и прочитать цвет пикселей из фреймбуфера с помощью gl.readPixels. После этого вы можете сравнить значения в CPU.

Также вы можете выполнять вычитание цветов пикселей в графическом процессоре и визуализацию (а затем readPixels).