A guide to examining pixels in Three.js

Question

A guide to examining pixels in Three.js

I have a query about comparing two textures at a pixel level in three.js. I am unsure of how to achieve this as the documentation for Three.js does not provide clear answers, with some classes remaining undocumented.

In summary, I am looking to determine the difference between two images (for calculating a fitness value in my genetic algorithm).

Edit: I have received advice to include more details. Here is some additional information:

One of the textures is loaded from an image file using "loadTexture":

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

The second texture is generated by adding polygons to a separate scene and rendering that scene into a texture:

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 loop in the actual code.
renderer.setSize(256,256);
requestAnimationFrame( render );
renderer.render(bufferScene, camera, bufferTexture);

Thank you in advance for your assistance.

javascript three.js webgl

Answer 1

Answer №1

To compare textures, simply attach each texture to a render target and utilize the renderer.readRenderTargetPixels method to extract the pixels for each texture before performing a comparison.

Alternatively, you have the option to render both textures onto a separate render target with the help of a shader that distinguishes between the two textures. Afterwards, retrieve the pixel data from that render target using the renderer.readRenderTargetPixels function.

Answer 2

To compare textures, simply attach each texture to a render target and utilize the renderer.readRenderTargetPixels method to extract the pixels for each texture before performing a comparison.

Alternatively, you have the option to render both textures onto a separate render target with the help of a shader that distinguishes between the two textures. Afterwards, retrieve the pixel data from that render target using the renderer.readRenderTargetPixels function.

Answer 3

Answer №2

One option is to create a texture on canvas that matches the size of the original texture, then use gl.readPixels to obtain the pixel colors from the framebuffer. From there, you can compare the values on the CPU.

Another approach is to utilize GPU for pixel color subtraction and render the differences (subsequently using readPixels).

Answer 4

One option is to create a texture on canvas that matches the size of the original texture, then use gl.readPixels to obtain the pixel colors from the framebuffer. From there, you can compare the values on the CPU.

Another approach is to utilize GPU for pixel color subtraction and render the differences (subsequently using readPixels).

A guide to examining pixels in Three.js

Answer №1

Answer №2

Similar questions

What is the best way to update a prop value using a different function?

Achieving success with the "silent-scroll" technique

How to achieve multiplication in Javascript without utilizing the * operand

Discovering intersections between Polylines on Google Maps - a comprehensive guide

How can we transfer data using Routes in React applications?

Transitioning to Firebase Authentication

The function addClass() seems to be malfunctioning

Injecting services into AngularJS controllers helps to provide the necessary dependencies

The absence of the dark class in the body is still allowing the impactful influence of Tailwind

What is the best way to combine two nearly identical arrays/objects using underscorejs or a similar library?

"Attempting to access $scope within the $http call results in an

Content displayed in the center of a modal

The error property is not found in the type AxiosResponse<any, any> or { error: AxiosError<unknown, any>; }

Querying Denormalized Data in AngularFire 0.82: Best Practices and Strategies

Combining properties of JavaScript objects into one

What is the best way to detect a specific button press from an external component?

The use of Ajax post results in the retrieval of multiple arrays containing objects that possess various values

When using i18next interpolation in React components, the displayed output may show as [object Object]

Guide to dynamically inserting an audio file into a div with jQuery

The two CSS classes are styled with different border-color values, but only one is being applied correctly