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

I have tried the method written in this post:
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

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

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

:rofl:ok well, I thought there would be a better way. My programmer case is to get the pixel data in the 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

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

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

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

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

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


Screen_Capture (1)

Pixel.html (1.4 KB)

A different way

1 Like