PlayCanvas and Three.js on same canvas

Just a maybe crazy idea, would it be possible to put both on the same canvas?

You can definitely do this, technically, the browsers allows up to 16 WebGL contexts per page.

Though the question would be why since having two full blown WebGL engines rendering at the same time, the performance hit can be significant.


They can render to two different canvases on the same page. But they cannot render to the same canvas. First problem is that each engine gets a WebGL context from the provided canvas. And you can only get a single WebGL context from a canvas. So while both engines would query the same WebGL context from the canvas, PlayCanvas (and probably Three) shadows WebGL state (to avoid redundantly calling WebGL functions). And they would constantly be stepping on each others toes. So yeah, that wouldn’t work.