Pixi Projection 3D Surface

[b10b]

I've been having fun with pixi-projection and familiarised myself with the examples, classes and underlying code.  I've been able to create a Camera3d, emultated a Skybox, added some billboard Sprite3ds, all good.

Next I wanted to create a Surface (defined by a tri or quad of x,y,z).   For example

            [{x: 0, y: 0, z: 0},
            {x: 100, y: 0, z: 0},
            {x: 100, y: 0, z: 100},
            {x: 0, y: 20, z: 100},]

I didn't find an in-built way to achieve this, or an approach to modify the underlying z vertices of Sprite3D?  Did I miss something?

So I brute forced an approach using 4 x Sprite3ds to represent the "corners", transformed them with the Camera3d, then using toGlobal() passed their Points to Sprite2D.mapSprite() to render a projection.  Success, despite being a hacky blend of 2D in 3D.  I was even able to include the result in a Container3d with other Sprite3ds in such a way that it all made sense and could be transformed as a whole and zSorted based on getDepth().  However z-clipping remains problematic.

Is there a better approach?  I'm hoping someone more familiar with the plugin would be able to point me to a lower-level solution

 

Edit: I've removed the need for the 4 x Sprite3ds in the brute force approach (by using the respective proj.local Matrices) ... so I'm confident this can now be done, but still feels a bit hacky.

Edited June 13, 2020 by b10b

[ivan.popelyshev]

For surface, you need your own Mesh3d because there's no such class in pixi-projection. This is an experimental project, and people who use it should look in sources, understand code, and write their own extensions. It should be much easier than doing your 3d from scratch or trying to port other 3d engines to pixi core.

Yes, Im planning on porting whole threejs to pixi later

In general, the problem of joining 2d and 3d objects in the same scene is big. Every time someone tries that - easy 2d API gets ruined by heavy 3D, or 3D becomes a mess. It took huge amount of my hours to make that architecture on pixi that doesnt require big changes in core and introduces billboards without ruining API. @jonforum helped a lot with his tests.

As far as i know, one of best solutions of 2d/3d are AwayJS and I'll definitely port something from them too.

[b10b]

Thank you @ivan.popelyshev and @jonforum for your work.  From a new-user perspective I think Pixi-projection is special because it is an easy and intuitive fit with the existing Pixijs workflow - so it adds an extra dimension to 2D games with little cost or reskilling.  I will continue with my experiment ... already very close, will have something by eod.

Yes, some bridges between PixiJS and ThreeJS would be a powerful combo for those seeking full-featured 3D.  I see some good examples for returning a renderTexture back from Threejs to Pixijs, so perhaps only a pixi.Texture -> three.Texture is the minimum needed to complete the loop and share resources between the two?

[ivan.popelyshev]

> because it is an easy and intuitive fit with the existing Pixijs workflow - so it adds an extra dimension to 2D games with little cost or reskilling

Thank you for kind words! Yes, that's why it took so long  I'll quote your words later, somewhere...

[ivan.popelyshev]

So far, this is the best project that uses pixi-projection in production : https://mkbatman.lenta.ch/