🔳 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)
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;
- ⬜Texture2D_OutlineColorTextureMask
Binary white on black color texture mask of the Outline3D objects - 🧱Texture2D_OutlineColorTextureMaskDepthTested
Binary white on black color texture mask of the Outline3D objects, depth tested against other non-outline scene geometry usingL Equaldepth comparison. (For the example image above the Outline3D components of the bunny in the front and the turret in the center were disabled) - 📸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>
(Or any other Simple tier Composite shader)
<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;