How to achieve render order independent outline rendering?

mkmc · July 22, 2019, 7:01am

Hello community,

I need to render the outline of several objects, which will partially occlude each other. I tried using Mesh.renderOutline, which works fine except one issue:

Depending on the order in which objects are rendered, some objects miss parts of their outline. See in the linked example, when the yellow sphere is in the back, it’s perfect, but when it is in the front, a part is missing.

https://www.babylonjs-playground.com/#B21PEK

I have tried setting the visibility to a value < 1 to make them alpha blended and thus sorted, but then the issue is there in both cases.

I assume this is not a bug and works as intended. However, is there a way to achieve my desired result without writing a custom shader?

Thanks in advance!

===

EDIT:

Okay, I did some more digging and found that it works properly, if I change in the following lines material.needAlphaBlending to material.needAlphaBlending().

github.com

BabylonJS/Babylon.js/blob/e9551c149695d939995a5bebbdfd1660038abf73/src/Rendering/outlineRenderer.ts#L299


    }



    return this._effect.isReady();

}



private _beforeRenderingMesh(mesh: AbstractMesh, subMesh: SubMesh, batch: _InstancesBatch): void {

    // Outline - step 1

    this._savedDepthWrite = this._engine.getDepthWrite();

    if (mesh.renderOutline) {

        var material = subMesh.getMaterial();

        if (material && material.needAlphaBlending) {

            this._engine.cacheStencilState();

            // Draw only to stencil buffer for the original mesh

            // The resulting stencil buffer will be used so the outline is not visible inside the mesh when the mesh is transparent

            this._engine.setDepthWrite(false);

            this._engine.setColorWrite(false);

            this._engine.setStencilBuffer(true);

            this._engine.setStencilOperationPass(Constants.REPLACE);

            this._engine.setStencilFunction(Constants.ALWAYS);

            this._engine.setStencilMask(OutlineRenderer._StencilReference);

            this._engine.setStencilFunctionReference(OutlineRenderer._StencilReference);

github.com

BabylonJS/Babylon.js/blob/e9551c149695d939995a5bebbdfd1660038abf73/src/Rendering/outlineRenderer.ts#L321




            this._engine.setColorWrite(true);

            this._engine.setStencilFunction(Constants.NOTEQUAL);

        }



        // Draw the outline using the above stencil if needed to avoid drawing within the mesh

        this._engine.setDepthWrite(false);

        this.render(subMesh, batch);

        this._engine.setDepthWrite(this._savedDepthWrite);



        if (material && material.needAlphaBlending) {

            this._engine.restoreStencilState();

        }

    }

}



private _afterRenderingMesh(mesh: AbstractMesh, subMesh: SubMesh, batch: _InstancesBatch): void {

    // Overlay

    if (mesh.renderOverlay) {

        var currentMode = this._engine.getAlphaMode();

        this._engine.setAlphaMode(Constants.ALPHA_COMBINE);

mkmc · July 22, 2019, 8:48am

I have created a pull request: Fix check if material needs alpha blending in OutlineRenderer by mkmc · Pull Request #6610 · BabylonJS/Babylon.js · GitHub

Deltakosh · July 22, 2019, 5:28pm

That is a fantastic fix!!! THANKS A LOT

Topic		Replies	Views
Showing highlighted silhouette of mesh ONLY when it is occluded Questions	39	2593	April 4, 2022
Highlight through objects Bugs	6	1027	January 14, 2020
Is there a way to outline silhouette of an object when it is fully or partially blocked by another object (not making foreground object transparent)? Questions	1	3101	August 12, 2019
Outline is sometimes very small, almost invisible Bugs	4	965	October 22, 2021
Render Outline - Buggy Bugs	12	2152	May 14, 2021

How to achieve render order independent outline rendering?

Related Topics