Jump to content

Problem using multiple canvases


Recommended Posts

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





Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 year later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...