Dabbling. How do I apply a filter to a billboard sprite?

[tonyfirgun]

Greetings! I was attempting to add a filter to a 3d billboard sprite but I ran into problems so I must be doing this completely wrong and not understanding. I would love if anyone could lead me in the right direction please!

this.charContainer = this.engine.stage.addChild(new PIXI.Container())

        let texture = PIXI.Texture.from('./images/sprite.png')
        this.sprite = this.charContainer.addChild(new PIXI3D.Sprite3D(texture, 0))
        this.sprite.billboardType = PIXI3D.SpriteBillboardType.spherical

        let postProcessingSprite = this.engine.stage.addChild(new PIXI3D.CompositeSprite(this.engine.renderer, { objectToRender: this.charContainer }))

        postProcessingSprite.filters = [PIXIFILTERS.OutlineFilter]

I've also tried adding a filter directly to the 3d billboard sprite which didn't work either. for some reason, the sprite completely vanishes after applying the filter
this.sprite.filters = [new PIXIFILTERS.ColorOverlayFilter( [1, 0, 0], [0, 0, 1], 0.001 )]

also offtopic question, how would I go upon using this serverside? I'm trying to create a mesh on both client and server for authoritative purposes but I can't import PIXI because it gives error:
PIXI3D\node_modules\@pixi\core\dist\cjs\core.js:1 ReferenceError: HTMLImageElement is not defined

[jnsmalm]

Hello!

You were very close. You should not add the sprite3d to the stage as it's instead rendered using the CompositeSprite.

let sprite = new Sprite3D(Texture.from("assets/png-clipart-football-football.png"))

let compositeSprite = app.stage.addChild(new CompositeSprite(
  app.renderer as Renderer, { objectToRender: sprite }))

compositeSprite.filters = [new filters.BlurFilter()]

Adding filters directly to sprite3d without using CompositeSprite won't work unfortunately. Not sure why you would need a mesh server side if you don't intend to render it. If you do intend to render it server side you can check out @pixi/node which is a package which enabled PixiJS/Pixi3D on there server - it was was pretty difficult to get it working though (for me at least).

[tonyfirgun]

Hello Jens, thank you for your reply and also thank you for creating pixi3d & allowing others to use it

I'm not quite sure why but I'm getting errors when doing that. This is the exact code:

this.spriteTexture = PIXI.Texture.from('./images/sprite.png')

        let sprite = new PIXI3D.Sprite3D(this.spriteTexture)

        let compositeSprite = this.engine.stage.addChild(new PIXI3D.CompositeSprite(
            this.engine.renderer, { objectToRender: sprite }))

this is the error:

Also the other thing - it's because I was hoping to be able to load up mesh data so that the game server can be authoritative with collisions. Let's say I had an exported 3D scene, I would hope the server had that mesh data also so that it could validate or deny client commands. I do wonder how I'll go about that now

[jnsmalm]

Are you sure this.engine.renderer has been created before creating the CompositeSprite? Also, which version of PixiJS are you using?

[jnsmalm]

About the collisions on server, are you planning g to do full mesh (triangle) collisions or using a sphere/box for computing collisions? If you just use sphere/box you can get the size of the model/mesh by using the getBoundingBox method https://api.pixi3d.org/classes/Model.html#getBoundingBox and then store the result in a file or something you can read server side. Thank something like that would be easier and you don't need full PixiJS/PIxi3D to do it serverside either.

[tonyfirgun]

Are you sure this.engine.renderer has been created before creating the CompositeSprite? Also, which version of PixiJS are you using?

Yeah, CompositeSprite is after the Application was created. I'm using PixiJS 6.x because of trouble getting Pixi 7 running - it wasn't able to find the node module to import though I did a npm install:
import * as PIXI from "pixi3d/pixi7"

[jnsmalm]

You can check the example at https://codesandbox.io/s/github/jnsmalm/pixi3d-sandbox/tree/master/post-processing-sprite. It renders a model to a CompositeSprite, but you can easily change to a Sprite3D.