I have a webgl canvas sandwiched in between two 2D canvases (background and foreground). Since no animation or camera movement is needed, I am only rendering (one frame) when a change to meshes or textures takes place, so it is very lightweight and I am trying to keep it that way. However, if I could somehow mask my webgl canvas without much trouble, this will save me a ton of work on my dynamic foreground canvas…
What is the quickest, easiest, and lightest* way to mask my webgl content in a situation like this? Can I somehow getImageData from a webgl renderTarget and use that to drawImage into this middle canvas (after making it 2D), and do my masking as I would any other 2d canvas content?.. Or should I do this via postprocessing in three? If postprocessing, can we just assign a gray image to mask the render? Sorry, I had trouble finding helpful info for this particular need…
*I’d love to keep this running efficiently (no crashes) on wussies like iPad2 etc.
Please help guys!