🔳 CosterGraphics.Systems.OutlineSystem

🧑‍🎨🧑‍🎨🧑‍🎨🧑‍🎨Outline3DRenderFeaturePro

🎭 Mask Shaders:
⬜ Outline3DSimple-Msk-ColorTextureMask-Default.shadergraph
🧱 Outline3DSimple-Msk-ColorTextureMaskDepthTested-Default.shadergraph

⬛ Outline3DBasic-Msk-DepthTextureMask-Default.shadergraph
🟦 Outline3DBasic-Msk-NormalsTextureMask-Default.shadergraph
🟩 Outline3DBasic-Msk-UVTextureMask-Default.shadergraph

🪪 Outline3DAdv-Msk-ObjectIDTextureMask-Default.shadergraph

🌱🏞️ Outline3DPro-Msk-JFA-UVSeedsTextureMask-Silhouette_Outside-Default.shadergraph
🌱🏠 Outline3DPro-Msk-JFA-UVSeedsTextureMask-Silhouette_Inside-Default.shadergraph

🔃 Intermediate Buffer Shaders:
🌱📸 Outline3DPro-Intermediate-JFA-UV-CopyPass-Default.shadergraph
🦘↔️ Outline3DPro-Intermediate-JFA-UV-JumpPassHorizontal-Default.shadergraph
🦘↕️ Outline3DPro-Intermediate-JFA-UV-JumpPassVertical-Default.shadergraph

🖼️ Final Composite Shader:
🖼️ Outline3DSimple-Cmp-Silhouette-Outside-Default.shadergraph
(Or any other Simple tier Composite shader)

The Pro Renderer Feature supports all of the Simple, Basic and Advanced Composite shaders and also adds support for the Pro textures listed below, which are mainly for JFA Distance Field based outlines. The Pro Renderer Feature generates Jump Flood Algorithm flood-filled texture masks that contain the sceen space UV positions of the closest edges of the masked Outline3D geometry. These 'closest to edge' UV positions are then used in the Composite JFA shaders to calculate outline distance fields and signed-distance fields with.

Texture2D_OutlineJFAUVSeedTextureMask_Outside - (A color texture mask containing the screen space UV coordinates of only the Outline3D object's geometry. Used by the JFA Jump passes.)
Texture2D_OutlineJFAUVSeedTextureMask_Inside - (A color texture mask containing the screen space UV coordinates that are outside of the Outline3D object's geometry. Used by the JFA Jump passes to calculate distances inside the geometry.)
Texture2D_OutlineJFAUVJumpTextureMask_Outside - (A color texture containing the UVs of the closest edges of the Outline3D geometry from outside the masked geometry. Used for generating the unsigned distance field outlines)
Texture2D_OutlineJFAUVJumpTextureMask_Inside - (A color texture containing the UVs of the closest edges of the Outline3D geometry from inside the masked geometry. Used for generating the unsigned distance field outlines)

The default Render Pass execution order of the 🧑‍🎨🧑‍🎨🧑‍🎨🧑‍🎨Outline3DRenderFeaturePro is shown in the diagram below. After the mask Render Passes are done, the Outline3DRenderFeature executes the final full-screen composite pass, which renders the final outlines to the scene cameras:

%%{init:{'flowchart':{'nodeSpacing': 16, 'rankSpacing': 32}}}%%
flowchart
direction LR
    subgraph Outline3DRenderFeatureAdvRenderPasses[<div style="font-size:10px;">Render Pass Execution Order</div>]
    direction TB
        Outline3DRenderFeatureAdv(
            🧑‍🎨🧑‍🎨🧑‍🎨🧑‍🎨Outline3DRenderFeaturePro
        )
        OutlineColorMaskPass(
            <div class="FlowChartNodeCard"><div class="Body"><div class="Header"><div class="Name"><b>OutlineColorMaskPass</b></div><div class="Icon">⬜</div></div><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineColorMaskPass/CosterGraphics-Systems-OutlineSystem-OutlineColorTextureMask.jpg'/></div><div class="Description"><b>Requires Shader</b>:<br/><i>🎭 Outline3DSimple-Msk-ColorTextureMask-Default.shadergraph</i><br/><br/><b>Produces</b>:<br/>⬜Texture2D_OutlineColorTextureMask</div></div></div>
        )
        OutlineColorMaskDepthTestedPass(
            <div class="FlowChartNodeCard"><div class="Body"><div class="Header"><div class="Name"><b>OutlineColorMaskDepthTestedPass</b></div><div class="Icon">🧱</div></div><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineColorMaskDepthTestedPass/CosterGraphics-Systems-OutlineSystem-OutlineColorTextureMaskDepthTested.jpg'/></div><div class="Description"><b>Requires Shader</b>:<br/><i>🎭 Outline3DSimple-Msk-ColorTextureMaskDepthTested-Default.shadergraph</i><br/><br/><b>Produces</b>:<br/>🧱Texture2D_OutlineColorTextureMaskDepthTested</div></div></div>
        )
        OutlineCameraColorCopyPass(
            <div class="FlowChartNodeCard"><div class="Body"><div class="Header"><div class="Name"><b>OutlineCameraColorCopyPass</b></div><div class="Icon">📸</div></div><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/CameraColorCopyPass/CosterGraphics-Systems-OutlineSystem-CameraOpaqueTexture.jpg'/></div><div class="Description"><b>Requires Shader</b>:<br/><i>None</i><br/><br/><b>Produces</b>:<br/>📸Texture2D_CameraOpaqueTexture</div></div></div>
        )

        OutlineDepthMaskPass(
            <div class="FlowChartNodeCard"><div class="Body"><div class="Header"><div class="Name"><b>OutlineDepthMaskPass</b></div><div class="Icon">⬛</div></div><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineDepthMaskPass/CosterGraphics-Systems-OutlineSystem-OutlineDepthTextureMask.jpg'/></div><div class="Description"><b>Requires Shader</b>:<br/><i>🎭 Outline3DBasic-Msk-DepthTextureMask-Default.shadergraph</i><br/><br/><b>Produces</b>:<br/>⬛Texture2D_OutlineDepthTextureMask</div></div></div>
        )

        OutlineNormalsMaskPass(
            <div class="FlowChartNodeCard"><div class="Body"><div class="Header"><div class="Name"><b>OutlineNormalsMaskPass</b></div><div class="Icon">🟦</div></div><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineNormalsMaskPass/CosterGraphics-Systems-OutlineSystem-OutlineNormalsTextureMask.jpg'/></div><div class="Description"><b>Requires Shader</b>:<br/><i>🎭 Outline3DBasic-Msk-NormalsTextureMask-Default.shadergraph</i><br/><br/><b>Produces</b>:<br/>🟦Texture2D_OutlineNormalsTextureMask</div></div></div>
        )

        OutlineUVMaskPass(
            <div class="FlowChartNodeCard"><div class="Body"><div class="Header"><div class="Name"><b>OutlineUVMaskPass</b></div><div class="Icon">🟩</div></div><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineUVMaskPass/CosterGraphics-Systems-OutlineSystem-OutlineUVTextureMask.jpg'/></div><div class="Description"><b>Requires Shader</b>:<br/><i>🎭 Outline3DBasic-Msk-UVTextureMask-Default.shadergraph</i><br/><br/><b>Produces</b>:<br/>🟩Texture2D_OutlineUVTextureMask</div></div></div>
        )

        OutlineObjectIDMaskPass(
            <div class="FlowChartNodeCard"><div class="Body"><div class="Header"><div class="Name"><b>OutlineObjectIDMaskPass</b></div><div class="Icon">🪪</div></div><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineObjectIDMaskPass/CosterGraphics-Systems-OutlineSystem-OutlineObjectIDTextureMask.jpg'/></div><div class="Description"><b>Requires Shader</b>:<br/><i>🎭 Outline3DAdv-Msk-ObjectIDTextureMask-Default.shadergraph</i><br/><br/><b>Produces</b>:<br/>🪪Texture2D_OutlineObjectIDTextureMask</div></div></div>
        )

        OutlineJFAUVSeedsMaskPass_Outside(
            <div class="FlowChartNodeCard"><div class="Body"><div class="Header"><div class="Name"><b>OutlineJFAUVSeedsMaskPass_Outside</b></div><div class="Icon">🌱🏞️</div></div><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineJFAUVSeedsMaskPass_Outside/CosterGraphics-Systems-OutlineSystem-OutlineJFAUVSeedsTextureMask_Outside.jpg'/></div><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineJFAUVSeedsMaskPass_Outside/CosterGraphics-Systems-OutlineSystem-OutlineJFAUVSeedsTextureMask_Outside-Depth.jpg'/></div><div class="Description"><b>Requires Shader</b>:<br/><i>🎭 Outline3DPro-Msk-JFA-UVSeedsTextureMask-Silhouette_Outside.shadergraph</i><br/><br/><b>Produces</b>:<br/>🌱🏞️Texture2D_OutlineJFAUVSeedsTextureMask_Outside</div></div></div>
        )

        OutlineJFAUVSeedsMaskCopyPass_Outside(
            <div class="FlowChartNodeCard"><div class="Body"><div class="Header"><div class="Name"><b>OutlineJFAUVSeedsMaskCopyPass_Outside</b></div><div class="Icon">📋🌱🏞️</div></div><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineJFAUVSeedsMaskPass_Outside/CosterGraphics-Systems-OutlineSystem-OutlineJFAUVSeedsTextureMask_Outside.jpg'/></div><div class="ImageCaption">The JFA UV seeds mask copy Render Pass creates a copy of the JFA UV seeds texture mask to be processed by the JFA loop Render Passes internally. Not used by the final Composite shaders directly. </div><div class="Description"><b>Requires Shader</b>:<br/><i>🔃 Outline3DPro-Intermediate-JFA-UV-CopyPass-Default.shadergraph</i><br/><br/><b>Produces</b>:<br/>📋🌱🏞️Texture2D_OutlineJFAUVPingTexture_Outside</div></div></div>
        )

        subgraph JFALoopOutside [🪣JFA Flood Fill Loop Outside]
            OutlineJFAUVHorizontalJumpPass_Outside(
            <div class="FlowChartNodeCard"><div class="Body"><div class="Header"><div class="Name"><b>OutlineJFAUVHorizontalJumpPass_Outside</b></div><div class="Icon">↔️🦘🏞️</div></div><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineJFAUVHorizontalJumpPass_Outside/CosterGraphics-Systems-OutlineSystem-OutlineJFAUVJumpTextureMask_Outside.jpg'/></div><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineJFAUVHorizontalJumpPass_Outside/CosterGraphics-Systems-OutlineSystem-OutlineJFAUVJumpTextureMask_Outside-Depth.jpg'/></div><div class="Description"><b>Requires Shader</b>:<br/><i>Outline3DPro-Intermediate-JFA-UV-JumpPassHorizontal-Default.shadergraph</i><br/><br/><b>Produces</b>:<br/>↔️🦘🏞️Texture2D_OutlineJFAUVJumpTextureMask_Outside</div></div></div>
            )
            OutlineJFAUVVerticalJumpPass_Outside(
            <div class="FlowChartNodeCard"><div class="Body"><div class="Header"><div class="Name"><b>OutlineJFAUVVerticalJumpPass_Outside</b></div><div class="Icon">↕️🦘🏞️</div></div><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineJFAUVVerticalJumpPass_Outside/CosterGraphics-Systems-OutlineSystem-OutlineJFAUVJumpTextureMask_Outside.jpg'/></div><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineJFAUVHorizontalJumpPass_Outside/CosterGraphics-Systems-OutlineSystem-OutlineJFAUVJumpTextureMask_Outside-Depth.jpg'/></div><div class="Description"><b>Requires Shader</b>:<br/><i>Outline3DPro-Intermediate-JFA-UV-JumpPassVertical-Default.shadergraph</i><br/><br/><b>Produces</b>:<br/>↕️🦘🏞️Texture2D_OutlineJFAUVJumpTextureMask_Outside</div></div></div>
            )
        end

        OutlineJFAUVSeedsMaskPass_Inside(
            <div class="FlowChartNodeCard"><div class="Body"><div class="Header"><div class="Name"><b>OutlineJFAUVSeedsMaskPass_Inside</b></div><div class="Icon">🌱🏠</div></div><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineJFAUVSeedsMaskPass_Inside/CosterGraphics-Systems-OutlineSystem-OutlineJFAUVSeedsTextureMask_Inside.jpg'/></div><div class="Description"><b>Requires Shader</b>:<br/><i>🎭 Outline3DPro-Msk-JFA-UVSeedsTextureMask-Silhouette_Inside.shadergraph</i><br/><br/><b>Produces</b>:<br/>🌱🏠Texture2D_OutlineJFAUVSeedsTextureMask_Inside</div></div></div>
        )

        OutlineJFAUVSeedsMaskCopyPass_Inside(
            <div class="FlowChartNodeCard"><div class="Body"><div class="Header"><div class="Name"><b>OutlineJFAUVSeedsMaskCopyPass_Inside</b></div><div class="Icon">📋🌱🏠</div></div><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineJFAUVSeedsMaskPass_Inside/CosterGraphics-Systems-OutlineSystem-OutlineJFAUVSeedsTextureMask_Inside.jpg'/></div><div class="ImageCaption">The JFA UV seeds mask copy Render Pass creates a copy of the JFA UV seeds texture mask to be processed by the JFA loop Render Passes internally.  Not used by the final Composite shaders directly. </div><div class="Description"><b>Requires Shader</b>:<br/><i>🔃 Outline3DPro-Intermediate-JFA-UV-CopyPass-Default.shadergraph</i><br/><br/><b>Produces</b>:<br/>📋🌱🏠Texture2D_OutlineJFAPingTexture_Inside</div></div></div>
        )

        subgraph JFALoopInside[🪣JFA Flood Fill Loop Inside]
            OutlineJFAUVHorizontalJumpPass_Inside(
                <div class="FlowChartNodeCard"><div class="Body"><div class="Header"><div class="Name"><b>OutlineJFAUVHorizontalJumpPass_Inside</b></div><div class="Icon">↔️🦘🏠</div></div><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineJFAUVHorizontalJumpPass_Inside/CosterGraphics-Systems-OutlineSystem-OutlineJFAUVJumpTextureMask_Inside.jpg'/></div><div class="Description"><b>Requires Shader</b>:<br/><i>Outline3DPro-Intermediate-JFA-UV-JumpPassHorizontal-Default.shadergraph</i><br/><br/><b>Produces</b>:<br/>↔️🦘🏠Texture2D_OutlineJFAUVJumpTextureMask_Inside</div></div></div>
            )
            OutlineJFAUVVerticalJumpPass_Inside(
                <div class="FlowChartNodeCard"><div class="Body"><div class="Header"><div class="Name"><b>OutlineJFAUVVerticalJumpPass_Inside</b></div><div class="Icon">↕️🦘🏠</div></div><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineJFAUVVerticalJumpPass_Inside/CosterGraphics-Systems-OutlineSystem-OutlineJFAUVJumpTextureMask_Inside.jpg'/></div><div class="Description"><b>Requires Shader</b>:<br/><i>Outline3DPro-Intermediate-JFA-UV-JumpPassVertical-Default.shadergraph</i><br/><br/><b>Produces</b>:<br/>↕️🦘🏠Texture2D_OutlineJFAUVJumpTextureMask_Inside</div></div></div>
            )
        end

        OutlineCompositePass(
            <div class="FlowChartNodeCard"><div class="Body"><div class="Header"><div class="Name"><b>OutlineCompositePass</b></div><div class="Icon">🖼️</div></div><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineCompositePass/CosterGraphics-Systems-OutlineSystem-OutlineJFA-UVDistanceField_Outside&Inside.jpg'/></div><div class="ImageCaption">Signed Distance Field generated from the JFA UV Voronoi Field</div><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineCompositePass/CosterGraphics-Systems-OutlineSystem-Outline3DPro-Cmp-Slhtt-JFA-UVSignedDistanceField-Default-1.jpg'/></div><div class="ImageCaption">Outlines generated from the Signed Distance Field colored red on the inside and green on the outside with a black background.</div><div class="Description"><b>Requires Shader</b>:<br/><i>Outline3DPro-Cmp-Silhouette-JFA-UVSignedDistanceField-Default.shadergraph</i><br/>&lpar;Or any other Pro or lower tier <em>Composite</em> shader&rpar;<br/><br/><b>Produces</b>:<br/>🖼️The final composite image</div></div></div>
)
    end

    subgraph Output[Output]
        Out(
            <div class="FlowChartNodeCard"><div class="Body"><div class="Header"><div class="Name"><b>Camera Color Buffer</b></div><div class="Icon">🎥</div></div><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineCompositePass/CosterGraphics-Systems-OutlineSystem-Outline3DPro-Cmp-Slhtt-JFA-UVSignedDistanceField-Default-2.jpg'/></div><br/><div class="ImageCaption">The final Signed Distance Field outlines generated by the Outline3DRenderFeaturePro's Jump Flood Algorithm composited to the screen, with a sharp thick white outline on the outside of the Outline3Ds and a soft black outline in the inside.</div></div></div>
        )
    end

Outline3DRenderFeatureAdv 
--> 
OutlineColorMaskPass 
--> 
OutlineColorMaskDepthTestedPass 
--> 
OutlineCameraColorCopyPass 
--> 
OutlineDepthMaskPass 
--> 
OutlineNormalsMaskPass 
--> 
OutlineUVMaskPass 
--> 
OutlineObjectIDMaskPass 
---> 
OutlineJFAUVSeedsMaskPass_Outside 
--> 
OutlineJFAUVSeedsMaskCopyPass_Outside

OutlineJFAUVSeedsMaskCopyPass_Outside
-->
JFALoopOutside

OutlineJFAUVHorizontalJumpPass_Outside
-->
OutlineJFAUVVerticalJumpPass_Outside

OutlineJFAUVVerticalJumpPass_Outside
-->
OutlineJFAUVHorizontalJumpPass_Outside
 
JFALoopOutside
-->
OutlineJFAUVSeedsMaskPass_Inside

OutlineJFAUVSeedsMaskPass_Inside
-->
OutlineJFAUVSeedsMaskCopyPass_Inside

OutlineJFAUVSeedsMaskCopyPass_Inside
-->
JFALoopInside

OutlineJFAUVHorizontalJumpPass_Inside
-->
OutlineJFAUVVerticalJumpPass_Inside

OutlineJFAUVVerticalJumpPass_Inside
-->
OutlineJFAUVHorizontalJumpPass_Inside

JFALoopInside
-->
OutlineCompositePass

OutlineCompositePass 
===> 
Out

style Outline3DRenderFeatureAdvRenderPasses stroke-dasharray: 10 10, stroke-width: 2px;

classDef default padding:0, margin:0, font-size:8px;
style JFALoopOutside font-size: 10px;
style JFALoopInside font-size: 10px;
style Outline3DRenderFeatureAdv         fill:#109999
style OutlineColorMaskPass              
style OutlineColorMaskDepthTestedPass        
style OutlineCameraColorCopyPass          
style OutlineCompositePass              fill:#501099
style Output                            stroke-dasharray: 10 10, stroke-width:2px;
style Out                               fill:#109999;

Table of Contents

🔳 CosterGraphics.Systems.OutlineSystem

🧑‍🎨🧑‍🎨🧑‍🎨🧑‍🎨Outline3DRenderFeaturePro