Mixing in 3D elements

[richpixel]

I know that Phaser is a 2D engine but I'm wondering if there might be some way to render 3D into a Sprite or DisplayObject?

 

Our game would benefit from having a simple 3D element (a texture mapped wheel). It wouldn't work to do canned spritesheet animations for this case. Are the popular engines threejs and Babylon flexible enough to render into a Bitmap - or some other object that I can use as a texture for a Phaser sprite? Or perhaps some other way? Does Phaser offer a way to do a bitmap fill of a polygon that is drawn with a Graphics object?

 

Thanks

 

[rich]

You could use three.js, which can render to a canvas. It could render to a 'hidden' (i.e. not on the dom) canvas which you use as a Phaser sprite texture. Kinda overkill, but would certainly work I reckon.

[dirkk0]

Is there any code snippet for this available? 

 

Btw - this works very well the other way round, i.e. displaying a Phaser texture on a 3D object, see here:

http://dl.dropboxusercontent.com/u/728316/tquery/test.html

 

(using Jerome's very cool idea)

 

 

(also from

)

[Will]

You could use three.js, which can render to a canvas. It could render to a 'hidden' (i.e. not on the dom) canvas which you use as a Phaser sprite texture. Kinda overkill, but would certainly work I reckon.

 

How would one use a canvas as a sprite texture?

[richpixel]

How would one use a canvas as a sprite texture?

 

I'd also be interested in this

[rich]

Basically like this:

this.canvas = Phaser.Canvas.create(this.game.width, this.game.height, '', true);this.context = this.canvas.getContext('2d');this.baseTexture = new PIXI.BaseTexture(this.canvas);this.texture = new PIXI.Texture(this.baseTexture);this.textureFrame = new Phaser.Frame(0, 0, 0, this.game.width, this.game.height, 'debug', game.rnd.uuid());this.sprite = this.game.add.sprite(0, 0, this.texture, this.textureFrame);

Now draw whatever you like to the local context. In WebGL mode you'll need to push the updated context to the GPU:

PIXI.updateWebGLTexture(this.baseTexture, this.game.renderer.gl);

The 2nd parameter ought to be the renderSession really, but the above will work if just one render session is in effect.

[rich]

Just to add that the Phaser.Frame parameters above are taken from the Debug class, so edit them as needed (see the constructor docs for details).

[wayfinder]

As far as I can tell, three.js doesn't render to a canvas rendertarget, only WebGL. Is there a way to use that with a Phaser game in canvas mode?

[richpixel]

The eventual target of the WebGL renderer is a canvas ... renderer.domElement.

 

Also, three.js has a CanvasRenderer

[wayfinder]

Ahh, I guess I misunderstood the documentation. Three.js only has a native WebGLRenderTarget implementation, but it's possible to use its canvas renderer and draw to a phaser bitmapdata object?

[dss]

I was able to add 3D elements into phaser using your suggestion rich. Here's the tutorial

[Polywelder]

I know it's kinda rich of me to say, but I strongly suggest programming the effect yourself. It's a great learning experience if you have the time.

Here's a fantastic basic tutorial for a super fast quasi-3d effect (Even though it's in Scratch, the math applicable anywhere): https://scratch.mit.edu/projects/25977969/

Here's a much more thorough 3d graphics programming tutorial series (using Pseudo-code): http://gamedevelopment.tutsplus.com/tutorials/lets-build-a-3d-graphics-engine-points-vectors-and-basic-concepts--gamedev-8143

And finally, this video series by Computerphile is a fantastic introductory walkthrough on the whole 3d rendering process: