Is it possible to have transparent Sprites?

[lunarraid]

I've been moving my custom meshes over to the new Sprite3D class, but notice that the alpha blending seems to be set to opaque. Is there any way to change this?

[jnsmalm]

Hmm, this shouldn't be the case. Please have a look at the sandbox below, it uses Sprite3D with transparent images.

https://codesandbox.io/s/github/jnsmalm/pixi3d-sandbox/tree/master/sprites-3d

[lunarraid]

Thanks for this bit of info, it does seem that what is happening is that the draw order is wrong. Changing it, however, is exceedingly difficult, as I have a deeply nested scene structure that these sprites are being added into for animation purposes. How difficult would it be to defer all renders of the Sprite3D batch renderer to the final draw call, so that the batch draw takes place after all non-sprite 3D geometry has been rendered? Alternatively, how difficult would it be to use threshold-based bitmap alpha in a Sprite3D, so that anything falling under a transparency threshold doesn't get written to the z buffer?

[jnsmalm]

A good solution for this is not really built in, but you can quite easily do this anyways.

class DeferredSprite3D extends Sprite3D {
  _render(renderer, renderAsDeferred = false) {
    if (renderAsDeferred) {
      super._render(renderer)
    } else {
      DeferredSprite3D.sprites.push(this)
    }
  }
}

DeferredSprite3D.sprites = []

class RenderDeferredSprites extends Container {
  _render(renderer) {
    DeferredSprite3D.sprites.forEach(s => s._render(renderer, true))
    DeferredSprite3D.sprites = []
  }
}

Use the DeferredSprite3D instead of Sprite3D. Create a instance of RenderDeferredSprites and add that in the hierarchy where you want to actually draw the sprites. You can have the DeferredSprite3D wherever in the hierarchy, but they will be drawn where you add the RenderDeferredSprites.

Does this help?

[lunarraid]

Alpha blending in 3D has always been a pain point for rendering engines. Modifying the render method is certainly a way to do it, though I think in this case it looks backwards because _render would be called on the container prior to rendering any of the children. I'll do some more noodling on it. At the moment, I just hacked in this absurdly dumb solution to unblock the update:

    let parent = child.parent;

    while (parent !== this) {
      parent.removeChild(child);
      parent.addChild(child);
      child = parent;
      parent = parent.parent;
    }

You answered my question though, so thanks for the assistance.

[jnsmalm]

@lunarraid This will probably work a bit better in next version, all Sprite3D objects will be drawn after meshes.

[jnsmalm]

It will also automatically sort sprites from back to front.