Encapsulation and Namespacing Questions


We produce rich media. We currently have a design that we want to use PlayCanvas for but are seeing some issues with its namespacing and encapsulation. We arent sure if these issues are related to our lack of understanding of the subtleties of the various implementation options so wanted to reach out and see if anyone has tried to do something like this and how they solved it.

The design is an inventory feed for Amazon Prime, on each row with a product that meets the consumer’s preferences, we are going to have a call to action to click through to the product page. Normally this would just be some typical html stuff but we want to implement our version of hyperplane that ‘flips’ horizontally to show a brand message on one side and a call to action on the other side. The user sees the brand message first, interacts with a flip, then sees the ‘go to product’ with a clickthrough.

I have the implementation done for a single instance but since the feed will show 10 products per page, I need to have the same 3D rendered in 10 divs that are setup when the rows for the inventory are created. I expected this wouldnt work out of the box so I modified the start script to make it able to find its scene on the page and do the app.configure to be relative to the scene. Despite this, I still have what looks like namespace bleed. I see similar behavior as this user saw:

The main thing that is blocking my experimentation right now is that I cant seem to get the PlayCanvas to load into its container without positioning absolutely on the page. So even when I position my divs in very different places on the page, I get the PlayCanvas directly atop one another. Here is my lab:


If anyone has any ideas for what I might be doing in the configurations that would make this ‘wrong’ or insight into how to get the play canvas scenes from the same project/app to load independently it would be much appreciated.

I’ll post any updates I run into while testing. My next steps are to try a few other techniques to force it to stay in its container and then moving on to just trying it as separate start scripts. If neither of those routes solve it, I will have to try cloning it multiple times and seeing it will work as long as the published apps are all different; effectively treating them like different PlayCanvas projects even though they are clones.


I just completed a simple test that seems to demonstrate that the mouse/touch event handlers are not encapsulated in a way to support multiple instances on the same page. I changed some of the display settings to get the scene that was ‘on top’ to go away. Even after setting the z indexes on the canvas and the div to the ‘top’, the PlayCanvas wasnt able to pick up any of the pointer interactions.

Im going to take a closer look at the namespacing for the app object, possibly if I make that object a bit cleaner for multiple instances it will setup the listeners specific to its own instance.

Another thing you could try perhaps is having each playcanvas div in its own iframe. That way each app is completely separate.

Ah, sorry, I hadnt mentioned. We actually cant rely on iframes due to constraints when delivering to mobile. Iframes dont necessarily have webGl enabled in the various mobile SDK’s. I would love it if we could just serve in frames since it solves a whole host of other problems including this one.



I completed a bunch of tests and nothing worked. My last test was to create separate published versions, self host, rename their start scripts, and namespace the variables in each start script so there was no chance of overlap.

After all that I have 2 problems,

  1. a ton of webGL errors about meshes that result in one of the two canvases being all messed up
  2. the pointer interactivity only works on one

Does anyone have any idea what I need to do to make this work this way or is it just not possible for PlayCanvas to work this way without using a frame to encapsulate the app?


Here is my latest lab link in case anyone wants to see the version that has 2 distinct projects loading but showing the same results as one project with 2 different scenes loading. I suggest viewing it with Chrome’s mobile simulator instead of as a typical desktop view.


Thanks again for your help and insights.