How to get pixel data from maps

Hello there! I have a some objects in my scene. Objects it’s a bufferGeometries with different maps: Map, bumpMap and lightMap. I want to make some changes in my scene use pixel data form object maps. What is the easiest way to get the pixel data from texture image?

Have you considered to copy the texture images onto a canvas and then use getImageData() to access them?

Yes, of course. But I didn’t find a solution to make it.
How I can copy objectMesh.material.lightMap to canvasTexture?

const ctx = document.createElement('canvas').getContext('2d');
document.body.appendChild(ctx.canvas);
ctx.canvas.width = ctx.canvas.height = 256;
const texture = new THREE.CanvasTexture(ctx.canvas);

The following live example reads image data from a given texture and output it to the browser console.

https://jsfiddle.net/q2fdu7p9/

The relevant code is:

const loader = new THREE.TextureLoader();
const texture = loader.load( 'https://threejs.org/examples/textures/uv_grid_opengl.jpg', ( texture ) => {

	const canvas = document.createElement( 'canvas' );
	canvas.width = texture.image.width;
	canvas.height = texture.image.height;
	
	const context = canvas.getContext( '2d' );
	context.drawImage( texture.image, 0, 0 );
	
	const data = context.getImageData( 0, 0, canvas.width, canvas.height );
	console.log( data );

} );
1 Like