Jump to content

Pixi Projection 3D Surface


Recommended Posts

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 by b10b
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...