Textures smaller than 200x200 pixels do not render with Sprite3D

[CopyCat85]

Using pixiJS v7.2.4 with pixi3d v2.3.1

// Does not work
let a = new PIXI3D.Sprite3D(commonAssets.rabbit1); // 25x25 PNG
let b = new PIXI3D.Sprite3D(commonAssets.rabbit2); // 199x199 PNG

// Works!
let c = new PIXI3D.Sprite3D(commonAssets.rabbit3); // 200x200 PNG
let d = new PIXI3D.Sprite3D(commonAssets.rabbit4); // 400x400 PNG

Many thanks for any ideas. Amazing library!

[jnsmalm]

Are those smaller sprites not just behind the larger ones?

This works for me (just a 32x32 size sprite):

let sprite = app.stage.addChild(new PIXI3D.Sprite3D(PIXI.Texture.WHITE))

[CopyCat85]

Unfortunately not behind others either - I'm trying one at a time as well. The PIXI.Texture.WHITE (16x16) doesn't render on my PIXI3D.Container3D either. These sub 200x200 textures render fine on a normal 2D PIXI.Container. Thanks for the suggestion though, but I'm utterly stumped at the moment. This isn't a loader/browser issue - it feeeeeels like a PIXI3D.Container3D on PixiJS 7.2.4 issue.

[CopyCat85]

Tried refactoring this sample locally with 7.2.4 and 2.3.1 but bunny textures are not showing for me. Wondering if anyone else can validate my possible madness?

[jnsmalm]

Would it be possible for you to provide a complete reproducable example so I can debug?

[jnsmalm]

Tried refactoring this sample locally with 7.2.4 and 2.3.1 but bunny textures are not showing for me. Wondering if anyone else can validate my possible madness?

Are you running a local web server or are you just opening the html file in browser?

[CopyCat85]

Local web server. I will create an isolated demo and send you a zip. Thanks.

[CopyCat85]

Made a little demo. Needs a local web server... Hope this uploads! Thanks for looking! pixi3dtest-01.zip

We attempt to draw 2 textures with PIXI.JS - works fine. Next we try and draw the same two textures with PIXI3D - only the large one renders.

There should be 4 images on screen. I only see 3. If anyone see's all 4 textures, either me or my computer needs replacing.

[jnsmalm]

Seems it doesn't works so well with this:

PIXI.settings.ROUND_PIXELS = true; // Not sure if this does anything!

Remove that and it works, this setting isn't usable in 3D space anyways.

[CopyCat85]

Strange but true! Thank you for finding this. I didn't even consider the ROUND_PIXELS flag. I wonder why though.

[jnsmalm]

Found why this happens at https://github.com/jnsmalm/pixi3d/blob/fde244fc4054aeee4ad2c616ed4aea7e827785ab/src/sprite/projection-sprite.ts#L66

Maybe I should just disable that behaviour?

[CopyCat85]

I'm not seeing how your round-ing here can be causing small textures to not render. Personally I'm not understanding the | 0 bit myself. Also:

• The general use case for PIXI's ROUND_PIXELS is good esp. for crisp text.
• I do see a use case where you might want blocky 3D: low-res pixel art style 3D games.

[CopyCat85]

I think we're seeing a rounding issue when we have small fractional ranges of vert values. So my bunny texture's (16x16) input verts to this function are in the range of -0.07999999821186066 to 0.07999999821186066 - and your current expression will always give zero (0.0) - which is not what we want in one sense, but it is what round() does - and would explain why the texture is not visible. I'm wondering if the issue might be elsewhere in the calculation of the verts for small textures - or do we need to swap round() with something that preserves some of the significant digits somehow? (Just a thought.)

[CopyCat85]

Another thought... As you initially mentioned, in a 3D context, ROUND_PIXELS is not relevant. In the use case where you do want no interpolation in a 3D view, then really we should be rendering to a PIXI texture anyway. So, yes, I vote disable that behavior.

[CopyCat85]

Rendering a camera (even main) to a texture would be a very cool feature BTW.

[jnsmalm]

There is already a way to render to a texture, check https://api.pixi3d.org/classes/CompositeSprite.html and https://codesandbox.io/s/github/jnsmalm/pixi3d-sandbox/tree/master/post-processing-sprite