Problem using multiple canvases

[Qqwy]

I am trying to create a separate canvas as a 'back buffer' for handling collisions. However, Pixi.JS is acting weird as soon as I introduce a second PIXI.Renderer object. It seems that both renderers interfere with eachother, resulting in all objects being drawn to the second canvas, even the ones that should be drawn on the other canvas. This became even clearer to me when I changed the resolution of the second canvas.

 

Is this a bug or am I doing something extremely wrong?

 

Check out my current code here

 

Thanks,

 

Qqwy

[rich]

Is the renderer set to "auto detect"? If so it may be trying to create a 2nd WebGL instance - which isn't supported in most browsers atm.

[Qqwy]

Is the renderer set to "auto detect"? If so it may be trying to create a 2nd WebGL instance - which isn't supported in most browsers atm.

In my version of Firefox(23.0.1), I get an error as soon as I hit 16 webGL instances.(for whatever reason refreshing the page does not clear old instances), but this might indicate that multiple instances should work on one page.

I do not know. I have been unable to find any information on the internet about WebGL support on more than one canvas at one time.

 

EDIT: I viewed the example in other browsers. It seems to indeed be a WebGL problem. In Opera, where the example will default to the Canvas renderer, it works as intended.

[Qqwy]

After doing some more research, I've come to the conclusion that it is in fact NOT caused by WebGL but by the internals of Pixi.JS.

 

I tried creating two webGL canvases on the same page using plain WebGL (test here), and it worked fine.

 

Then I dug in the source of Pixi.JS, and I found some comments in the source of the source of the PIXI.WebGLRenderer class, stating that as of now, only ONE WebGLRenderer at a time can be used. This seems to be a hard-coded requirement that could be lifted by restructuring the code, but I don't know how much work that would be.

Are the developers aware of this issue at this time?

[Qqwy]

Just a quick follow up on this: I posted an issue about this on the github, and the developers responded. It seems very hard to change at this time, but is in the plans for the future.

They also told me that it is possible to render to a frameBuffer instead of directly to a canvas, which would work for my collision checking problem.

 

That is, as soon as I figure out how to do blending modes like the globalCompositeOperation() works in a native canvas context, and how I can read back pixel values from a frameBuffer in javascript similar to the getImageData() function in a native canvas context.

 

I created another topic about this question and one other, but they don't have to do with PIXI.js directly.

[FriedricH]

Any changes? I need to have 5 or 6 little WebGL canvases on my site but have only one working.