[SOLVED] Workflow for making sprites always render in front

I have a sprite which I’ve turned into a billboard using this approach:
https://developer.playcanvas.com/en/tutorials/billboards/

What would be a good workflow to no render this sprite always in front of any 3d-mesh?
I’ve tried creating a custom layer and sorts couldn’t figure it out.
As always, thanks in advance.

Create a custom layer, and make sure you update the render order. It’s in the same settings menu, just below layers. Layers on the bottom of the list will be rendered on top of layers closer to the top. Also make sure your scene’s camera is set up to render the newly added layer. Check the layers field on the camera component settings for this.

1 Like

Thank you very much @Devortel. I’ve tried that, but couldn’t get the result.
I’ve made my project public, maybe you could take a look:
https://playcanvas.com/project/736106/overview/annotations

What I wanted to achieve was a non-occluded/non-cut annotation.

I tried it with the entity hotspot_01 (the red one)
I’ve created a new Layer “Annotations”, added it to the camera’s layers.
And in the “Settings” under “Render Order” I’ve added it at the bottom.
(Maybe you could give me a heads up here as well in terms of what the Transparent / Opaque Options for the sublayers mean)

Thanks for your time.

To render objects on top of other objects regardless of where they are in the world, is to clear the depth buffer before rendering the layer that those objects are on.

The way I personally do this is to create a layer called ‘Clear Depth’ and on application startup, set that layer to clear the depth buffer.

(function() {
    const app = pc.Application.getApplication();
    app.on('start', () => {
        // We have special layer that we want to set so that it clears the depth buffer
        // This helps us render the weapon on top of the world
        const clearDepthLayer = app.scene.layers.getLayerByName('Clear Depth');
        clearDepthLayer.clearDepthBuffer = true;
    });
})();

This gives me editor control on where I can clear the depth buffer.

I then have render layers after that I put my objects on to render above all the layers that were rendered before it.

https://playcanvas.com/project/975766/overview/render-stuff-in-front

This is pretty much what the UI layer does to render the UI above the world.

2 Likes

@yaustar to the rescue! Thanks very much, your solution works perfect!

Thanks for your time.