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.
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
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.
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.
Pixel.html (1.4 KB)
A different way