Mixing 2D and 3D using Phaser and Three.js

[Serapth]

I got to wondering if it would be possible to render a 3D object in Phaser.  Obviously Phaser doesn't have this functionality built in, so I decided to try it using Three.js.   This is the result.  Just figured I would share separate to the tutorial series, in case anyone else what interested in trying it.

 

 

There are a few hacks to be aware of.  First, the canvas is flipped on Chrome, but oddly, not on Safari...   not sure why.  Second, the way I update the texture is brutal, there has to be a better way.  Third I did a this/that hack because I got sick of trying to get context working right with an anonymous method, one of Typescripts warts.  There is a better way, I just didn't bother searching further for it.

 

The code is written in typescript, but you can simply right click the running result to see the Javascript generated code.

 

The actual running example is here. If it's upside down, your browser doesn't flip the rendered results.  I've only tested Safari (no flip) and Chrome (flip)

[rich]

I've wondered how long it would be before someone tried this

[Serapth]

To be honest, I sorta thought I would find tons of people doing it already and was shocked when I found very little on the subject.  It's an increasingly common technique in games these days...  I hate to think though what the performance would be like on mine, especially with multiple realtime 3D objects live.  For dynamically generating sprites though the technique is perfectly viable since the calculations are done up front.

 

 

By the way, is there a better way to update the PIXI texture once the ThreeJS canvas changes, Rich?  There has to be, as the way I did it has the stench of evil about it.

[rich]

How did you do it?

[Serapth]

How did you do it?

renderThreeJS(target:Phaser.Sprite) {            if (this.renderer) {                this.renderer.render(this.scene, this.threeJSCamera);                if(target) {                    target.texture.destroy(true);                       target.setTexture(PIXI.Texture.fromCanvas(                        <HTMLCanvasElement>document.getElementById("hiddenContent")                            .children[0], PIXI.scaleModes.DEFAULT));                }            }        }

... yeah, not my finest hour.  It's called "it worked, good enough" coding.

[rich]

Are you rendering a ThreeJS scene into a Phaser canvas? Or the opposite?

[Serapth]

Are you rendering a ThreeJS scene into a Phaser canvas? Or the opposite?

 

Yeah, threeJS renders to a canvas, theoretically a hidden one.  The other oddity is, the render results were flipped on Chrome, like you get with a frame buffer.  This made complete sense to me, so I simply flipped the scene before rendering... then I discovered the results aren't flipped on Safari...  HTML...  figures.

[Serapth]

Still need to do the hackish destroy to get the texture to update, but I did discover I can create the Canvas in Phaser and never attach it to the dom, making the code much cleaner at least on the HTML side:

            this.canvasTarget = Phaser.Canvas.create(256,256,"renderHere");            this.renderer = new THREE.WebGLRenderer({ alpha: true, canvas:this.canvasTarget });

[lewster32]

There has to be, as the way I did it has the stench of evil about it.

 

Greatest quote I've ever read on these forums. Giggling uncontrollably.

[mwolfe]

While the post is a bid old, you have my thanks. It was helpful in getting animated 3D objects rendering onto canvas (needed to avoid WebGL for project requirements).
 
For the dirty part you spoke of I used this:

    this.owner.loadTexture(PIXI.Texture.fromCanvas(        this.tjsRenderer.domElement, PIXI.scaleModes.DEFAULT));

instead of calling destroy and then setting the texture. Similar obviously, but this eliminated the constant spam of WebGL errors I was getting in the console.

 

I also simply referenced the renderer, which was stored within that class, instead of searching out the dom element in the document every frame.

 

Cheers!

 

(edit: I should note that the .owner is due to a component based system in our engine, in this case its an extension of Phaser.Sprite)