Beginner questions

[paganaye]

Hi Guys
I have trouble understanding the documentation so I am asking 3 three questions.

I am writing a game with Pixi.js this week and I am enjoying it.
Now I'd like to add a little bit of 3D.
On the photo below, I'd like the entire floor to be skewed to a trapeze while the tree, the characters and various fences stay upward.
I installed pixi3D and managed to display some 3D elements:

I can see a blank cube extracted from your getting started page.
It got me started. Thanks cube.
Then I can see a plane with a grass texture and a quad with a tree texture.
I use a StandardMaterial and set the baseColorTexture to my tree Pixi (classic) texture.
The texture was created from a basetexture that contains multiple images.
It looks like the Standard Material and quad is showing the entire texture and not the small portion of it.

So my first question is :
(1) How can I make the quad only display the top left quarter of the texture.

My second question is:
My floors are composed of 1 to 5 semi transparent textures on top of each other. Sometimes they are animated (the water is).
(2) how I can create a quad to show 4 or 5 textures.

Third and last question.
(3) I expect to display up to 2000 tiles on the screen adding more and deleting others as the player moves and the camera with it.

Does it seem realistic to you?
Do you think Pixi3D is a good match for what I am trying to do?

I am not sure you'll have the time to reply, in any case thank you for your good work.

[paganaye]

    let treeSprite = Sprite.from(treeTexture);
    let treeMaterial = new StandardMaterial();
    treeMaterial.baseColorTexture = this.game.renderer.generateTexture(treeSprite);

This gets my tree cropped and displayed.
Then by changing my plane.material repeatedly I got my water animated.

This raise a new issue.
Why does the texture transparency shows as black.

[jnsmalm]

Hello,

1. Unfortunatly the StandardMaterial doesn't support spritesheets right now, I would like to add that but didn't have the time yet. Either you need to have your image in correct size (not in a spritesheet) or you have to create your own material (which would not be that difficult if you know a bit about how shaders work.) You can check the simple example at https://github.com/jnsmalm/pixi3d/blob/develop/examples/src/color-material.js to understand how to create your own material.

2. You need to create your own material/shader as explained above.

3. This requires batching the sprites to reduce the number of draw calls. StandardMaterial does support instancing, but not when rendering different textures. What is needed here is something very similar to PixiJS regular sprite batching, but in 3D.

The shorter answer is that you need to create your custom material/shader. If you give me a few days maybe I have the time to create something.

For the black background in textures, try:

treeMaterial.alphaMode = "blend"

[paganaye]

Thanks for your reply. To be fair, the learning curve to pixi3d is a bit steep for me today.
At this stage I am probably going to use the pixi-projection library. I can see it is less potent than pixi3d would be but It looks like it is a faster journey for me at this stage. This is what I managed to do with pixi projection. It is not far to where I want to go : https://codepen.io/paganaye/pen/ZEyWaMN Thanks you still. Continue the good work.

[jnsmalm]

Yes, pixi-projection is probably a better fit :)

[jnsmalm]

Just wanted to let you know that Pixi3D now supports sprites in 3D, which may be a good fit for your game if you are still interested. Sprites in 3D works just like regular PixiJS 2D sprites, but in 3D space. It's not yet released (will soon), but if you want you can build it yourself.

git clone ...
npm install
npm run build

You will find pixi3d.js and pixi3d.min.js in the dist folder. If you want to see an example of how to use the sprites you can check https://github.com/jnsmalm/pixi3d/blob/develop/examples/src/sprites.js

Here is some random performance results:

Mac M1
8000 60 fps moving sprites
25000 60 fps non moving sprites

iPhone 12
7000 60 fps moving sprites
13000 60 fps non moving sprites

Old weak android
2000 30 fps moving sprites
4000 30fps non moving sprites