I’m adding shader effects to a massive scene (Sprite containing many, many children). It works great in the OpenGL renderer, but I’m looking for software fallback mechanisms for canvas.
Manipulating all of the objects and their pixels inside of the Sprite is super non-performant so I devised another way.
I’m drawing the main Sprite with bitmapData.draw, adding pixel effects to the (much smaller) result and putting it over the main scene.
Is there any better way to do it? Can caching as bitmap be somehow used in this case?
Only thing I can think of off the top of my head is to use bitmapdata.lock() and bitmapdata.unlock() before/after modifying a big chunk of pixels in your destination bitmap. I doubt there is much real gain though.
Older HTML5 code we used had lock/unlock as a difference between setting to the canvas directly (unlocked) or to an image data buffer (locked). The act of locking/unlocking would create the image data or set this back to the source canvas. Makes sense.
In practice, people would lock and unlock when doing something we could otherwise perform using Canvas drawImage (which is about the fast Canvas API). Locking hurt performance.
Otherwise would loop and read/write every pixel in a Canvas, without locking, which performed terrible when using getImageData and putImageData for each pixel
In the end, I wrote a system where it tries to anticipate what format is best, and if it gets image data, it only pushes back if it is modified. lock and unlock are really non-ops now
Perhaps you could take advantage of everything drawing to one canvas in the end (in the case of the canvas renderer), and do something to manipulate the renderSession.context directly?
