pixi-projection: Rotating 3d cube

[CityLights]

Hi,
I am trying to project a rotating 3d cube to a 2d space. I understand that pixi-projection should help me achieve this. Despite my efforts to try and find documentation, YouTube videos, go through the source code, search this forum, search the Pixi wiki on GitHub.com and reverse-engineer this demo https://gameofbombs.github.io/pixi-bin/index.html?s=flip&f=cube.js&title=Cube, I didn't get very far. Perhaps my struggle stems from the fact that I don't understand the terminology at play. Terms such as "affine", "euler", "focus distance" and "near plane" are foreign to me.

I expect the pixi-projection API to allow me to define the position and orientation of my camera and the position and orientation of my subjects. I don't comprehend how the current implementation comes together to allow me to do this. For example what does the "setPlanes" method on the camera dictate and what are the expected parameters?

Are there any resources which can ease me into the terms and the concepts at play so I can make better sense of the source code in the examples provided?

@ivan.popelyshev Your guidance would be tremendously appreciated.

[ivan.popelyshev]

Hello, and 

Welcome to the forums!

Yes, that old demo is from my old fork. Yes, those experiments became pixi-projection later, it doesnt require fork anymore.

Unfortunately, if you dont have experience with 3d transform and cameras like in ThreeJS - I cant explain it in a few sentences  You have to learn 3d transforms in real 3d engine first, its natural that we dont have explanation for common things - only a few people use the plugin. If you dont like that state of things - you can affect it by making an article after you get  That's why its still experimental - why do I have to do all that stuff if people dont help enough? I improve it in places those users need. @jonforum made so many requests for it , and math became much easier because of him!

Pixi-projection deals mostly with sprites, so you have to make 6 sprites. I think for each side you need a Container3d that rotates your coord system in correct direction (X+, X-, Y+, Y-, Z+, Z-), then add a Sprite3d there with Z-axis shift. The other problem is how to sort those sprites. From one point of view, you can just go low-level and enable WebGL single-side rendering.  From another - you can just sort those sprites by their calculated normals, of course if you know what normal is and if you trace where is it stored in projection worldTransform after element updateTransform() calculates it.

I can make cube demo later.. tomorrow... or in week.. or in two weeks... or in a month, you know it, im lazy, no guarantees. You can ask @jonforumto do it instead

 

[ivan.popelyshev]

The fact that you have to learn things from "real" 3d renderers first doesnt mean pixi is worse than that and its better use threejs directly for Cube. If you ned PixiJS and only a few easy 3d effects - pixi-projection is better than trying to merge pixijs + threejs in one app (btw , i did that many times!). The real achievement of that plugin is that 2d and 3d API's co-exist, its very hard to do that. Usually when 3d elements are added, things become VERY hard. Usually 2d projects are completely ruined by it.

[jonforum]

i remember trying with webpack but tot success.
https://codesandbox.io/s/objective-brattain-4mt2y
 

You have some playground with es5 js i made,

https://www.pixiplayground.com/#/edit/CRZ6tB7_0eB2Y6Og9wocf

https://www.pixiplayground.com/#/edit/POz1H3nlOYOuRykFpo3kl

for fully cube rotation, dont know, i not need this in my game, but tree.js can maybe more a solution for full 3d rendering.