Как сравнивать пиксели в Three.js

#javascript #three.js #webgl

Вопрос:

У меня есть две текстуры в three.js это я хотел бы сравнить на уровне пикселей. Но я понятия не имею, как это сделать. Three.js документация не отвечает на мой вопрос. Действительно, некоторые классы недокументированы.

Чтобы быть кратким, я хочу вычислить, насколько отличаются два изображения (для вычисления значения пригодности в моем генетическом алгоритме).

Редактировать: мне сказали, что я должен предоставить больше информации. Поехали.

Одна текстура взята из изображения, которое загружается с помощью «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);

Заранее благодарю вас.

1. Ваш вопрос слишком общий, чтобы на него можно было дать точный ответ. Было бы полезно, если бы у вас был минимальный пример кода того, что вы пытаетесь сделать. Без кода или конкретных названий интерфейсов API трудно угадать, какая часть Three.js API, о котором вы спрашиваете.

Ответ №1:

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

или

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

Ответ №2:

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

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