3d building

[webdeveloper_issy]

Hi,

 

I want to make an 2d topdown game that will have 3d buildings/depth.
Similar to GTA2.

 

What is the best way to build an 3d building?

I have found an 3d box that is made with PIXIjs V1.5

 

But I don't really understand their code. It's in the attachment. (force render in canvas to make it work)

I have never worked with 3d or 3d engines.

Can it be made with PIXI.js and also being able to render in canvas and WebGL?

Kind regards

 

3DPixi.zip

[ivan.popelyshev]

3d sprites

https://github.com/gameofbombs/pixi.js

https://gameofbombs.github.io/pixi-bin/index.html

But no, Canvas cant possibly render that. Canvas doesn't have 3d projections

But that's not a problem, you can just turn off your Sprite3d instances for canvas renderer, and leave only 2d stuff in the stage.

[webdeveloper_issy]

Thank you for your help &  the links! 

The code I added in the attachment shows an 3d box that renders on the canvas.

Canvas can render it but is not made for it.

 

[webdeveloper_issy]

Pixijs v4 will be adding 2.5d support on both canvas and webgl right? 

If so I would like to donate to support you guys

[ivan.popelyshev]

Yeah, there will be support of 2.5d in master pixi branch, and the fork i mentioned is like 3-rd iteration of it. It will take time before @Mat Groves simplifies it enough to be merged in master.

You have to understand that the problem with 3d on canvas2d is that you have to divide every quad into a big number of triangles to render it precisely enough. Its slow and has artifacts, it will certainly not go into master, it will stay as a plugin and only if someone will be ready to code it. Projections are that tricky.

For now you can use my fork, it has a pair of examples with it.

[webdeveloper_issy]

Hi,

I became a patreon and supported the PIXI.js project to have the 2.5d support working.
I can understand that it is tricky.

So i will wait until pixijs has 2.5d/3d support, before I invest allot of programming hours trying to do it myself.

Thank you for your time!

[Milton]

Combining Phaser and Three.js to make 2.5D games.

Obviously it would work the same when just using Pixi.

[webdeveloper_issy]

Hi Milton,

 

Thank you so much for your help!

It *looks* exactly like how I want it.
I have also thought about Three.js, however there are issues that would be difficult to tackle.
For example, if you want players to go on a higher ground you can't really change the z-index.

But if it's implemented in pixi.js I can just re-order the childrens within a container to set the player on top of a building. 

[Milton]

I'm not sure I understand. You just use Three.js to render anything you want in 3D. You use that as the texture of a Pixi sprite. Re-order all you like..
The demo does everything in 1 sprite (Layer), but it shouldn't be too difficult to adapt.

[ivan.popelyshev]

@Milton @webdeveloper_issy 

That thing will be slow, the correct way is to share context between ThreeJS and PIXI. Someone did it, solution was in gitter chat, I can search it for you?

And again. We already have custom working pixi version for this kind of stuff, and it is compatible with v4. It also has built-in z-index/z-order mechanism, you dont have to move children on top. https://gameofbombs.github.io/pixi-bin/index.html?s=flip&f=cards.js&title=Cards , can you just use it instead of waiting official one? Binaries are here: https://github.com/gameofbombs/pixi-bin/tree/master/bin

[webdeveloper_issy]

@ivan.popelyshev any estimates as to when the official PIXI.js source will have PIXI.flip / PIXI 3d / your code?

I am using PIXI v3, I can take the risk to work with custom code but that wouldn't be beneficial if I put hours of code into it and find out the official PIXI.js source has it but it is built another way than your custom code is.

I can wait 2/3 weeks for programming 3d buildings for an more stable(?)/official release.

[ivan.popelyshev]

 

1 hour ago, webdeveloper_issy said:

@ivan.popelyshev any estimates as to when the official PIXI.js source will have PIXI.flip / PIXI 3d / your code?

I am using PIXI v3, I can take the risk to work with custom code but that wouldn't be beneficial if I put hours of code into it and find out the official PIXI.js source has it but it is built another way than your custom code is.

I can wait 2/3 weeks for programming 3d buildings for an more stable(?)/official release.

I had v3 version of that code, but I think I removed that branch completely when I ported it to v4. Official PIXI will look like that, at least "Sprite3d" and "sprite.euler" , "camera" will stay the same. As for z-order, https://github.com/pixijs/pixi-display possibly will be integrated into v4, and it works with 3d version too.

Yes, in two weeks we'll know approximation of when official 3d will be implemented. Those experiments were started a year ago, I dont think it will beome official this month.

[psyrendust]

@ivan.popelyshev Has there been an update on an approximation of when the official 3d implementation will roll into pixi v4?

[webdeveloper_issy]

@ivan.popelyshev any updates? 

[prvi_treti]

Is it me or was there even one single 3D element in whole GTA2 game? Isn't it far easier just to use prerendered assets combined with mimicking very basic 3D geometry?

 

 

[webdeveloper_issy]

@mUnduli how can i mimick 3d buildings? Any example code for me?

[prvi_treti]

Well, in theory what you need is either drawing building on canvas or applying texture to basic geometry. So these links might give some insight for start imo.

http://www.kevs3d.co.uk/dev/phoria/test0uv.html

http://stackoverflow.com/questions/4774172/image-manipulation-and-texture-mapping-using-html5-canvas

http://www.irrlicht3d.org/pivot/entry.php?id=1329

Canvas renderer of Three.JS may also give an idea.

PS : Actually I'd like to see pixi.js having an UV mapping feature but doubt it's planned in short-mid-any term

[tywang2006]

it will be good if it can be added to latest pixijs