I have added a 3D layer to my BlankTemplate, in this example text and ui are rendered with PIXI and 3D layer by ThreeJS
This short demo show all libs I have merged to build my FrameWork
- Hammer for gesture
- Howler for sound
- isMobile to detect the context
- pixi for 2d
- proton for 2d particles (disabled for the moment, due to performance issue on mobile)
- ThreeJS for 3D
- TweenMax for tweening
I like the way Adobe build stage3D for Flash
Here I use the same idea (even if i just had Stage3D )
First I render the 3D layer (THREEJS) and then I copy the result to the 2d layer (PIXI) just before redering it.
Another way to do it is to position the Pixi canvas on the top of the canvas that run THREEJS ; I belive copying the context one canvas to another is quicker but i don’t have run perf test.
last thing, for both PIXI and THREE I use 2d context canvas (not webGL) so it should work everywhere !