Multiple visual sub-outputs?

[elsemieni]

Hi, I have a strange doubt. It's experimental anyways, so it doesn't matter too much if there's no a reasonable solution for this.

Let me explain this in a simple way: I'm trying to make Phaser interact with other image-processing libraries, in the way that can "feed" multiple visual outputs. Here's a little example of what I'm trying to explain:

Quote

• The main output, that everybody knowns, who phaser initializes at the init and put's in the DOM. And of course, renders things xD. Give it a example size: 640x480.
• Another output that renders other things in a 320x240 canvas, to send frame data somewhere...
• And another 160x120 output that render another thing in a canvas to send to some image processing library that generates another output.

 

To try to make that I came with the idea to use BitmapData to render the necessary stuff into it and take the canvas context. The results? Slow perfomance. Okay, so after that I switched to RenderTexture that is a lot much faster to render things, but yes: You need to handle with matrix transformation to do basic effects like transformations, any-anchor rotation, etc... And well... I concluded that I'm re-invent the wheel trying to implement basic features that there's already in Phaser, but that's not avaiable for the restrictions that BitmapData/RenderTexture has. Doing some FX to a sprite that takes 3-4 lines in normal-output Phaser, takes 30+ lines trying to render them in a one of those "alternative outputs".

So I came with the idea... Practically I need a "Phaser that renders in another stuff that's not the main output". Something similar like this. At simple researching I saw there's no a direct way to do this (maybe I'm wrong?). Also, I looked for a possibility to run multiple instances of Phaser in a once, but that's really convenient in pefomance-cost talking? Maybe one-instance can handle all of this and I'm not noticed?

Yes, it's kinda specific. Maybe the solution still relies in BitmapData's/RenderTextures, but I'm curious about this. 

Thanks in advance  

 

PD: The motivation of this is for try to "build" a mid-complex scene in Phaser that it renders in a "sub-output" in a Canvas to pass it to ThreeJS to put it in a Shape and renders it back to Phaser main output. Maybe there's more straighfoward manners to do that.

[rich]

Why not just take the main canvas that Phaser renders to, and then render to your smaller canvases directly from that? CanvasContext.drawImage will happily take a Canvas as its source input, so it'd only be one call per sub-canvas, as as it'd already exist in memory this has to be the fastest way. The downside is the canvas needs to be a 2d context and not WebGL, but if you're just using it as a texture in a 3D scene anyway that won't matter.