Table of Contents

🔳 CosterGraphics.Systems.OutlineSystem


🧑‍🎨Outline3DRenderFeatureSimple


Outline3DRenderFeatureSimple
🧑‍🎨
🎭 Mask Materials:
Outline3DSimple-Msk-ColorTextureMask-Default.shadergraph
Outline3DSimple-Msk-ColorTextureMaskDepthTested-Default.shadergraph

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

The Simple Renderer Feature supports all Simple Composite outline shaders that only require any of the following three mask textures:

flowchart
%%{init:{'flowchart':{'nodeSpacing': 16, 'rankSpacing': 64}}}%%
    subgraph MaskTextures[🧑‍🎨Outline3DRenderFeatureSimple<br/> 🎭Mask Textures]
    direction TB
        OutlineColorTextureMask(
            <img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineColorMaskPass/CosterGraphics-Systems-OutlineSystem-OutlineColorTextureMask.jpg'/><p style="text-align:right;">⬜</p><br/>
            Texture2D_OutlineColorTextureMask
        )
        OutlineColorTextureMaskDepthTested(
            <img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineColorMaskDepthTestedPass/CosterGraphics-Systems-OutlineSystem-OutlineColorTextureMaskDepthTested.jpg'/><p style="text-align:right;">🧱</p><br/>
            Texture2D_OutlineColorTextureMaskDepthTested
        )
        CameraOpaqueTexture(
            <img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/CameraColorCopyPass/CosterGraphics-Systems-OutlineSystem-CameraOpaqueTexture.jpg'/><p style="text-align:right;">📸</p><br/>
            Texture2D_CameraOpaqueTexture
        )
    end

classDef default padding: 20pc, stroke-width:4px;

style MaskTextures                       font-size: 12px,stroke-width:2px, stroke-dasharray: 10 10;
style OutlineColorTextureMask            font-size: 12px;
style OutlineColorTextureMaskDepthTested font-size: 12px;
style CameraOpaqueTexture                font-size: 12px;

  1. ⬜Texture2D_OutlineColorTextureMask
    Binary white on black color texture mask of the Outline3D objects
  2. 🧱Texture2D_OutlineColorTextureMaskDepthTested
    Binary white on black color texture mask of the Outline3D objects, depth tested against other non-outline scene geometry using L Equal depth comparison. (For the example image above the Outline3D components of the bunny in the front and the turret in the center were disabled)
  3. 📸Texture2D_CameraOpaqueTexture
    A copy of the URP camera color buffer for performing edge detection on the scene's color and for other full-screen effects.

The default Render Pass execution order of the 🧑‍🎨Outline3DRenderFeatureSimple 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:

flowchart
%%{init:{'flowchart':{'nodeSpacing': 16, 'rankSpacing': 32}}}%%
direction LR
    subgraph Outline3DRenderFeatureSimpleRenderPasses["Render Pass Execution Order"]
    direction TB
        Outline3DRenderFeatureSimple(
            🧑‍🎨Outline3DRenderFeatureSimple
        )
        OutlineColorMaskPass(
            ⬜<b>OutlineColorMaskPass</b>
            <img 
                src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineColorMaskPass/CosterGraphics-Systems-OutlineSystem-OutlineColorTextureMask.jpg' 
            />
            <div style="text-align: left;">
                <b>Requires Shader</b>:
                <i>Outline3DSimple-Mask-ColorTextureMask-Default.shadergraph</i><br/>
                <b>Produces</b> :
                ⬜Texture2D_OutlineColorTextureMask
            </div>
        )
        OutlineColorMaskDepthTestedPass(
            🧱<b>OutlineColorMaskDepthTestedPass</b>
            <img 
                src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineColorMaskDepthTestedPass/CosterGraphics-Systems-OutlineSystem-OutlineColorTextureMaskDepthTested.jpg' 
            />
            <div style="text-align: left;">
                <b>Requires Shader</b>:
                <i>Outline3DSimple-Mask-ColorTextureMaskDepthTested-Default.shadergraph</i><br/>
                <b>Produces</b>:
                🧱Texture2D_OutlineColorTextureMaskDepthTested
            </div>
        )
        OutlineCameraColorCopyPass(
            <b>📸OutlineCameraColorCopyPass</b>
            <img 
                src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/CameraColorCopyPass/CosterGraphics-Systems-OutlineSystem-CameraOpaqueTexture.jpg' 
            />
            <div style="text-align: left;">
                <b>Requires Shader</b>:
                <i>None</i>
                <b>Produces</b>: 
                📸Texture2D_CameraOpaqueTexture
            </div>
        )
        OutlineCompositePass(
            <b>🖼️OutlineCompositePass</b>
            <img 
                src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineCompositePass/CosterGraphics-Systems-OutlineSystem-FullScreenCompositeSilhouette.jpg' 
            />
            <div style="text-align: left;">
                <b>Requires Shader</b>:
                <i>Outline3DSimple-Cmp-Silhouette-Outside-Default.shadergraph</i>
                &lpar;Or any other Simple tier Composite shader&rpar;
                <b>Produces</b>: 
                🖼️The final composite image
            </div>
        )
    end
    subgraph Output[Output]
    direction TB
        Out(
            <b>🎥Camera Color Buffer</b>
            <img 
                src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineCompositePass/CosterGraphics-Systems-OutlineSystem-FullScreenCompositeSilhouetteFinal.jpg' 
            />
        )
    end

Outline3DRenderFeatureSimple --> OutlineColorMaskPass --> OutlineColorMaskDepthTestedPass --> OutlineCameraColorCopyPass --> OutlineCompositePass ===> Out

%% Adds a padding to the default node class to make all the nodes the same size
classDef default padding:20pc;

style Outline3DRenderFeatureSimpleRenderPasses  stroke-dasharray: 10 10, stroke-width:2px;
style Outline3DRenderFeatureSimple              fill:#109999; 
style OutlineCompositePass                      fill:#501099
style Output                                    stroke-dasharray: 10 10, stroke-width:2px;
style Out                                       fill:#109999;