But these only cover the “destination end” of the intended copy operation, filling/replacing a rectangular area of the destination texture. A data buffer holding the source pixels still has to be filled using brute force, so to speak. I’m asking for the extraction from an existing source texture, too.
The image data are stored as Uint8ClampedArray. The array has a length of width*height*4.
Every four cell represent a pixel [ r, g, b, a ] ranging from 0 to 255.
I have taken a deeper look into this. Since I would like to do the compositing invisibly to the user, the use of an offscreen canvas came to my mind. Unfortunately I encountered this:
And in fact, the current browser support is too thin to further consider that idea at this point in time.
Any other ideas?
I have, btw., preliminarily solved my problem by using a dedicated PlaneMesh() for each sprite component, translating each to its final position and grouping them into a THREE.Group(). It works, but is obviously a little brute force, and will probably not scale well.
The extraction part from the source texture is currently accomplished through application of suitable uv-coordinates, relative to the source texture, and texturing the destination mesh with the source(!) material/texture.
JavaScript doesn’t care about how the element is styled or if it is append to DOM or not.
But, it does care about Object Property Height and Width, since that determines the size of the buffer.
The offscreen canvas was purposed to work with workers to not block the main thread. Mainly used to work with videos or very Hi Res images.
