Is there a way to get the pixel data of the Texture without going through the canvas？

Questions
1

I have tried the method written in this post：
https://discourse.threejs.org/t/how-to-get-pixel-data-from-maps/25966/3
It created a 2D canvas context and call the following code:

context.drawImage( texture.image, 0, 0 );
const data = context.getImageData( 0, 0, canvas.width, canvas.height );

It looks like the Texture.Image already has data in it, creating a canvas just uses its context to transform the data, I have not programmed in the web in the past, maybe I don’t have a deep understanding of canvas

2

If the browser can decode the image format you can use:

EDIT: You DO need a canvas element to extract data.

3

:rofl:ok well, I thought there would be a better way. My programmer case is to get the pixel data in the material.map(a Texture type), do some pixel-by-pixel replacement operations on it, and then fill it back. Having to go through the canvas in this case makes me wonder

4

May be this How to get texture color at intersection with Raycast? - #8 by Chaser_Code

5

It looks like the solutions inside is by rendering the texture to a RenderTexture and then calling renderer.readRenderTargetPixels to get pixel data, This looks about the same to me as using canvas

6

I would recommend just using a canvas. Any other solutions will be more complicated, bringing in external libraries instead of using the image processing tools the Browser provides for you.

1 Like
7

Thanks for advice, yeh, I’m already testing using canvas to get image pixel data and processing, it looks like I’m just not used to web development

8

At the moment, this is the fastest, and most efficient method.

Summary

Screen_Capture (1)

Pixel.html (1.4 KB)

A different way

1 Like