复杂度不会消失：Render Graph 为什么会出现
很多开发者第一次接触 Render Graph 时都会产生一个疑问：
为什么要把渲染系统设计得如此复杂？
明明这样就能工作：
ShadowPass();
GBufferPass();
LightingPass();
PostProcessPass();
UIPass();
按顺序执行，简单直观。
- 没有图
- 没有节点
- 没有资源依赖分析
- 没有拓扑排序
事实上，很多引擎最开始就是这样写的。
问题在于，随着项目规模增长，复杂度并不会消失，它只会转移。
最开始只有几个
#mermaid-svg-sIbcbDutsmJL3pol{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-sIbcbDutsmJL3pol .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-sIbcbDutsmJL3pol .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-sIbcbDutsmJL3pol .error-icon{fill:#552222;}#mermaid-svg-sIbcbDutsmJL3pol .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-sIbcbDutsmJL3pol .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-sIbcbDutsmJL3pol .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-sIbcbDutsmJL3pol .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-sIbcbDutsmJL3pol .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-sIbcbDutsmJL3pol .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-sIbcbDutsmJL3pol .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-sIbcbDutsmJL3pol .marker{fill:#333333;stroke:#333333;}#mermaid-svg-sIbcbDutsmJL3pol .marker.cross{stroke:#333333;}#mermaid-svg-sIbcbDutsmJL3pol svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-sIbcbDutsmJL3pol p{margin:0;}#mermaid-svg-sIbcbDutsmJL3pol .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-sIbcbDutsmJL3pol .cluster-label text{fill:#333;}#mermaid-svg-sIbcbDutsmJL3pol .cluster-label span{color:#333;}#mermaid-svg-sIbcbDutsmJL3pol .cluster-label span p{background-color:transparent;}#mermaid-svg-sIbcbDutsmJL3pol .label text,#mermaid-svg-sIbcbDutsmJL3pol span{fill:#333;color:#333;}#mermaid-svg-sIbcbDutsmJL3pol .node rect,#mermaid-svg-sIbcbDutsmJL3pol .node circle,#mermaid-svg-sIbcbDutsmJL3pol .node ellipse,#mermaid-svg-sIbcbDutsmJL3pol .node polygon,#mermaid-svg-sIbcbDutsmJL3pol .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-sIbcbDutsmJL3pol .rough-node .label text,#mermaid-svg-sIbcbDutsmJL3pol .node .label text,#mermaid-svg-sIbcbDutsmJL3pol .image-shape .label,#mermaid-svg-sIbcbDutsmJL3pol .icon-shape .label{text-anchor:middle;}#mermaid-svg-sIbcbDutsmJL3pol .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-sIbcbDutsmJL3pol .rough-node .label,#mermaid-svg-sIbcbDutsmJL3pol .node .label,#mermaid-svg-sIbcbDutsmJL3pol .image-shape .label,#mermaid-svg-sIbcbDutsmJL3pol .icon-shape .label{text-align:center;}#mermaid-svg-sIbcbDutsmJL3pol .node.clickable{cursor:pointer;}#mermaid-svg-sIbcbDutsmJL3pol .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-sIbcbDutsmJL3pol .arrowheadPath{fill:#333333;}#mermaid-svg-sIbcbDutsmJL3pol .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-sIbcbDutsmJL3pol .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-sIbcbDutsmJL3pol .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-sIbcbDutsmJL3pol .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-sIbcbDutsmJL3pol .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-sIbcbDutsmJL3pol .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-sIbcbDutsmJL3pol .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-sIbcbDutsmJL3pol .cluster text{fill:#333;}#mermaid-svg-sIbcbDutsmJL3pol .cluster span{color:#333;}#mermaid-svg-sIbcbDutsmJL3pol div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-sIbcbDutsmJL3pol .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-sIbcbDutsmJL3pol rect.text{fill:none;stroke-width:0;}#mermaid-svg-sIbcbDutsmJL3pol .icon-shape,#mermaid-svg-sIbcbDutsmJL3pol .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-sIbcbDutsmJL3pol .icon-shape p,#mermaid-svg-sIbcbDutsmJL3pol .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-sIbcbDutsmJL3pol .icon-shape .label rect,#mermaid-svg-sIbcbDutsmJL3pol .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-sIbcbDutsmJL3pol .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-sIbcbDutsmJL3pol .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-sIbcbDutsmJL3pol :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}
Shadow
Geometry
Lighting
Present
代码类似：
renderShadow();
renderGeometry();
renderLighting();
present();
没有任何问题。
随后需求增加，加入SSAO、SSR、Bloom、TAA、Tonemap、UI
渲染流程开始变成：
#mermaid-svg-sroNkCKuKdKXHnr6{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-sroNkCKuKdKXHnr6 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-sroNkCKuKdKXHnr6 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-sroNkCKuKdKXHnr6 .error-icon{fill:#552222;}#mermaid-svg-sroNkCKuKdKXHnr6 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-sroNkCKuKdKXHnr6 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-sroNkCKuKdKXHnr6 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-sroNkCKuKdKXHnr6 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-sroNkCKuKdKXHnr6 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-sroNkCKuKdKXHnr6 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-sroNkCKuKdKXHnr6 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-sroNkCKuKdKXHnr6 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-sroNkCKuKdKXHnr6 .marker.cross{stroke:#333333;}#mermaid-svg-sroNkCKuKdKXHnr6 svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-sroNkCKuKdKXHnr6 p{margin:0;}#mermaid-svg-sroNkCKuKdKXHnr6 .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-sroNkCKuKdKXHnr6 .cluster-label text{fill:#333;}#mermaid-svg-sroNkCKuKdKXHnr6 .cluster-label span{color:#333;}#mermaid-svg-sroNkCKuKdKXHnr6 .cluster-label span p{background-color:transparent;}#mermaid-svg-sroNkCKuKdKXHnr6 .label text,#mermaid-svg-sroNkCKuKdKXHnr6 span{fill:#333;color:#333;}#mermaid-svg-sroNkCKuKdKXHnr6 .node rect,#mermaid-svg-sroNkCKuKdKXHnr6 .node circle,#mermaid-svg-sroNkCKuKdKXHnr6 .node ellipse,#mermaid-svg-sroNkCKuKdKXHnr6 .node polygon,#mermaid-svg-sroNkCKuKdKXHnr6 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-sroNkCKuKdKXHnr6 .rough-node .label text,#mermaid-svg-sroNkCKuKdKXHnr6 .node .label text,#mermaid-svg-sroNkCKuKdKXHnr6 .image-shape .label,#mermaid-svg-sroNkCKuKdKXHnr6 .icon-shape .label{text-anchor:middle;}#mermaid-svg-sroNkCKuKdKXHnr6 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-sroNkCKuKdKXHnr6 .rough-node .label,#mermaid-svg-sroNkCKuKdKXHnr6 .node .label,#mermaid-svg-sroNkCKuKdKXHnr6 .image-shape .label,#mermaid-svg-sroNkCKuKdKXHnr6 .icon-shape .label{text-align:center;}#mermaid-svg-sroNkCKuKdKXHnr6 .node.clickable{cursor:pointer;}#mermaid-svg-sroNkCKuKdKXHnr6 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-sroNkCKuKdKXHnr6 .arrowheadPath{fill:#333333;}#mermaid-svg-sroNkCKuKdKXHnr6 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-sroNkCKuKdKXHnr6 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-sroNkCKuKdKXHnr6 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-sroNkCKuKdKXHnr6 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-sroNkCKuKdKXHnr6 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-sroNkCKuKdKXHnr6 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-sroNkCKuKdKXHnr6 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-sroNkCKuKdKXHnr6 .cluster text{fill:#333;}#mermaid-svg-sroNkCKuKdKXHnr6 .cluster span{color:#333;}#mermaid-svg-sroNkCKuKdKXHnr6 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-sroNkCKuKdKXHnr6 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-sroNkCKuKdKXHnr6 rect.text{fill:none;stroke-width:0;}#mermaid-svg-sroNkCKuKdKXHnr6 .icon-shape,#mermaid-svg-sroNkCKuKdKXHnr6 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-sroNkCKuKdKXHnr6 .icon-shape p,#mermaid-svg-sroNkCKuKdKXHnr6 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-sroNkCKuKdKXHnr6 .icon-shape .label
