Unity_TA 养成记

ou要成为一名TA大佬

烂笔头
- 顶点=>世界坐标
什么是ShaderLab？
Shader 变体
- 1.什么是变体
- 2.变体的产生
- 3.变体数量计算
- 4.变体查看
- 5.减少变体
- 6.变体在Editor中的生成过程
Shader Load
Shader预加载
Unity Shader入门精要
- 渲染流水线
- - 概念流水线
  - CPU-->GPU
  - GPU流水线
  - - 几何阶段
    - 光栅化阶段
  - Draw Call
  - - CPU和GUP并行工作
    - Draw Call ==》帧率
  - Shader
- Unity Shader
- - - 模板介绍
    - 结构
    - - 命名
      - Properties
      - 纹理类型
        访问属性
      - SubShader
      - Pass
    - 数学基础
    - - 坐标系
      - 矢量
      - 矩阵

烂笔头顶点=>世界坐标

o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;

什么是ShaderLab？

在图形API中有：OpenGL,DX,Vulkan等。Unity为了处理不同平台使用的Shader语言的差异，就用ShaderLab封装起来，最后根据不同平台编译成对应的着色器语言。

UnityShader 结构图：

#mermaid-svg-wznb3XoAQZxfBp9m .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-wznb3XoAQZxfBp9m .label text{fill:#333}#mermaid-svg-wznb3XoAQZxfBp9m .node rect,#mermaid-svg-wznb3XoAQZxfBp9m .node circle,#mermaid-svg-wznb3XoAQZxfBp9m .node ellipse,#mermaid-svg-wznb3XoAQZxfBp9m .node polygon,#mermaid-svg-wznb3XoAQZxfBp9m .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-wznb3XoAQZxfBp9m .node .label{text-align:center;fill:#333}#mermaid-svg-wznb3XoAQZxfBp9m .node.clickable{cursor:pointer}#mermaid-svg-wznb3XoAQZxfBp9m .arrowheadPath{fill:#333}#mermaid-svg-wznb3XoAQZxfBp9m .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-wznb3XoAQZxfBp9m .flowchart-link{stroke:#333;fill:none}#mermaid-svg-wznb3XoAQZxfBp9m .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-wznb3XoAQZxfBp9m .edgeLabel rect{opacity:0.9}#mermaid-svg-wznb3XoAQZxfBp9m .edgeLabel span{color:#333}#mermaid-svg-wznb3XoAQZxfBp9m .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-wznb3XoAQZxfBp9m .cluster text{fill:#333}#mermaid-svg-wznb3XoAQZxfBp9m div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-wznb3XoAQZxfBp9m .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-wznb3XoAQZxfBp9m text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-wznb3XoAQZxfBp9m .actor-line{stroke:grey}#mermaid-svg-wznb3XoAQZxfBp9m .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-wznb3XoAQZxfBp9m .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-wznb3XoAQZxfBp9m #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-wznb3XoAQZxfBp9m .sequenceNumber{fill:#fff}#mermaid-svg-wznb3XoAQZxfBp9m #sequencenumber{fill:#333}#mermaid-svg-wznb3XoAQZxfBp9m #crosshead path{fill:#333;stroke:#333}#mermaid-svg-wznb3XoAQZxfBp9m .messageText{fill:#333;stroke:#333}#mermaid-svg-wznb3XoAQZxfBp9m .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-wznb3XoAQZxfBp9m .labelText,#mermaid-svg-wznb3XoAQZxfBp9m .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-wznb3XoAQZxfBp9m .loopText,#mermaid-svg-wznb3XoAQZxfBp9m .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-wznb3XoAQZxfBp9m .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-wznb3XoAQZxfBp9m .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-wznb3XoAQZxfBp9m .noteText,#mermaid-svg-wznb3XoAQZxfBp9m .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-wznb3XoAQZxfBp9m .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-wznb3XoAQZxfBp9m .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-wznb3XoAQZxfBp9m .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-wznb3XoAQZxfBp9m .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-wznb3XoAQZxfBp9m .section{stroke:none;opacity:0.2}#mermaid-svg-wznb3XoAQZxfBp9m .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-wznb3XoAQZxfBp9m .section2{fill:#fff400}#mermaid-svg-wznb3XoAQZxfBp9m .section1,#mermaid-svg-wznb3XoAQZxfBp9m .section3{fill:#fff;opacity:0.2}#mermaid-svg-wznb3XoAQZxfBp9m .sectionTitle0{fill:#333}#mermaid-svg-wznb3XoAQZxfBp9m .sectionTitle1{fill:#333}#mermaid-svg-wznb3XoAQZxfBp9m .sectionTitle2{fill:#333}#mermaid-svg-wznb3XoAQZxfBp9m .sectionTitle3{fill:#333}#mermaid-svg-wznb3XoAQZxfBp9m .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-wznb3XoAQZxfBp9m .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-wznb3XoAQZxfBp9m .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-wznb3XoAQZxfBp9m .grid path{stroke-width:0}#mermaid-svg-wznb3XoAQZxfBp9m .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-wznb3XoAQZxfBp9m .task{stroke-width:2}#mermaid-svg-wznb3XoAQZxfBp9m .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-wznb3XoAQZxfBp9m .taskText:not([font-size]){font-size:11px}#mermaid-svg-wznb3XoAQZxfBp9m .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-wznb3XoAQZxfBp9m .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-wznb3XoAQZxfBp9m .task.clickable{cursor:pointer}#mermaid-svg-wznb3XoAQZxfBp9m .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-wznb3XoAQZxfBp9m .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-wznb3XoAQZxfBp9m .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-wznb3XoAQZxfBp9m .taskText0,#mermaid-svg-wznb3XoAQZxfBp9m .taskText1,#mermaid-svg-wznb3XoAQZxfBp9m .taskText2,#mermaid-svg-wznb3XoAQZxfBp9m .taskText3{fill:#fff}#mermaid-svg-wznb3XoAQZxfBp9m .task0,#mermaid-svg-wznb3XoAQZxfBp9m .task1,#mermaid-svg-wznb3XoAQZxfBp9m .task2,#mermaid-svg-wznb3XoAQZxfBp9m .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-wznb3XoAQZxfBp9m .taskTextOutside0,#mermaid-svg-wznb3XoAQZxfBp9m .taskTextOutside2{fill:#000}#mermaid-svg-wznb3XoAQZxfBp9m .taskTextOutside1,#mermaid-svg-wznb3XoAQZxfBp9m .taskTextOutside3{fill:#000}#mermaid-svg-wznb3XoAQZxfBp9m .active0,#mermaid-svg-wznb3XoAQZxfBp9m .active1,#mermaid-svg-wznb3XoAQZxfBp9m .active2,#mermaid-svg-wznb3XoAQZxfBp9m .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-wznb3XoAQZxfBp9m .activeText0,#mermaid-svg-wznb3XoAQZxfBp9m .activeText1,#mermaid-svg-wznb3XoAQZxfBp9m .activeText2,#mermaid-svg-wznb3XoAQZxfBp9m .activeText3{fill:#000 !important}#mermaid-svg-wznb3XoAQZxfBp9m .done0,#mermaid-svg-wznb3XoAQZxfBp9m .done1,#mermaid-svg-wznb3XoAQZxfBp9m .done2,#mermaid-svg-wznb3XoAQZxfBp9m .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-wznb3XoAQZxfBp9m .doneText0,#mermaid-svg-wznb3XoAQZxfBp9m .doneText1,#mermaid-svg-wznb3XoAQZxfBp9m .doneText2,#mermaid-svg-wznb3XoAQZxfBp9m .doneText3{fill:#000 !important}#mermaid-svg-wznb3XoAQZxfBp9m .crit0,#mermaid-svg-wznb3XoAQZxfBp9m .crit1,#mermaid-svg-wznb3XoAQZxfBp9m .crit2,#mermaid-svg-wznb3XoAQZxfBp9m .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-wznb3XoAQZxfBp9m .activeCrit0,#mermaid-svg-wznb3XoAQZxfBp9m .activeCrit1,#mermaid-svg-wznb3XoAQZxfBp9m .activeCrit2,#mermaid-svg-wznb3XoAQZxfBp9m .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-wznb3XoAQZxfBp9m .doneCrit0,#mermaid-svg-wznb3XoAQZxfBp9m .doneCrit1,#mermaid-svg-wznb3XoAQZxfBp9m .doneCrit2,#mermaid-svg-wznb3XoAQZxfBp9m .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-wznb3XoAQZxfBp9m .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-wznb3XoAQZxfBp9m .milestoneText{font-style:italic}#mermaid-svg-wznb3XoAQZxfBp9m .doneCritText0,#mermaid-svg-wznb3XoAQZxfBp9m .doneCritText1,#mermaid-svg-wznb3XoAQZxfBp9m .doneCritText2,#mermaid-svg-wznb3XoAQZxfBp9m .doneCritText3{fill:#000 !important}#mermaid-svg-wznb3XoAQZxfBp9m .activeCritText0,#mermaid-svg-wznb3XoAQZxfBp9m .activeCritText1,#mermaid-svg-wznb3XoAQZxfBp9m .activeCritText2,#mermaid-svg-wznb3XoAQZxfBp9m .activeCritText3{fill:#000 !important}#mermaid-svg-wznb3XoAQZxfBp9m .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-wznb3XoAQZxfBp9m g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-wznb3XoAQZxfBp9m g.classGroup text .title{font-weight:bolder}#mermaid-svg-wznb3XoAQZxfBp9m g.clickable{cursor:pointer}#mermaid-svg-wznb3XoAQZxfBp9m g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-wznb3XoAQZxfBp9m g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-wznb3XoAQZxfBp9m .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-wznb3XoAQZxfBp9m .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-wznb3XoAQZxfBp9m .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-wznb3XoAQZxfBp9m .dashed-line{stroke-dasharray:3}#mermaid-svg-wznb3XoAQZxfBp9m #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-wznb3XoAQZxfBp9m #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-wznb3XoAQZxfBp9m #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-wznb3XoAQZxfBp9m #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-wznb3XoAQZxfBp9m #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-wznb3XoAQZxfBp9m #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-wznb3XoAQZxfBp9m #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-wznb3XoAQZxfBp9m #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-wznb3XoAQZxfBp9m .commit-id,#mermaid-svg-wznb3XoAQZxfBp9m .commit-msg,#mermaid-svg-wznb3XoAQZxfBp9m .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-wznb3XoAQZxfBp9m .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-wznb3XoAQZxfBp9m .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-wznb3XoAQZxfBp9m g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-wznb3XoAQZxfBp9m g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-wznb3XoAQZxfBp9m g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-wznb3XoAQZxfBp9m g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-wznb3XoAQZxfBp9m g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-wznb3XoAQZxfBp9m g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-wznb3XoAQZxfBp9m .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-wznb3XoAQZxfBp9m .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-wznb3XoAQZxfBp9m .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-wznb3XoAQZxfBp9m .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-wznb3XoAQZxfBp9m .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-wznb3XoAQZxfBp9m .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-wznb3XoAQZxfBp9m .edgeLabel text{fill:#333}#mermaid-svg-wznb3XoAQZxfBp9m .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-wznb3XoAQZxfBp9m .node circle.state-start{fill:black;stroke:black}#mermaid-svg-wznb3XoAQZxfBp9m .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-wznb3XoAQZxfBp9m #statediagram-barbEnd{fill:#9370db}#mermaid-svg-wznb3XoAQZxfBp9m .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-wznb3XoAQZxfBp9m .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-wznb3XoAQZxfBp9m .statediagram-state .divider{stroke:#9370db}#mermaid-svg-wznb3XoAQZxfBp9m .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-wznb3XoAQZxfBp9m .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-wznb3XoAQZxfBp9m .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-wznb3XoAQZxfBp9m .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-wznb3XoAQZxfBp9m .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-wznb3XoAQZxfBp9m .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-wznb3XoAQZxfBp9m .note-edge{stroke-dasharray:5}#mermaid-svg-wznb3XoAQZxfBp9m .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-wznb3XoAQZxfBp9m .error-icon{fill:#522}#mermaid-svg-wznb3XoAQZxfBp9m .error-text{fill:#522;stroke:#522}#mermaid-svg-wznb3XoAQZxfBp9m .edge-thickness-normal{stroke-width:2px}#mermaid-svg-wznb3XoAQZxfBp9m .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-wznb3XoAQZxfBp9m .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-wznb3XoAQZxfBp9m .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-wznb3XoAQZxfBp9m .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-wznb3XoAQZxfBp9m .marker{fill:#333}#mermaid-svg-wznb3XoAQZxfBp9m .marker.cross{stroke:#333} :root { --mermaid-font-family: "trebuchet ms", verdana, arial;} #mermaid-svg-wznb3XoAQZxfBp9m { color: rgba(0, 0, 0, 0.75); font: ; }

Shader

SubShader

Pass

Program:Vertex

Program:Fragment

SubProgram:Variant 1

SubProgram:Variant 2

Shader 变体 1.什么是变体

官网介绍在上面的结构图最底下的Variant就是变体部分,如下所示frag中有三个判断分支，Unity就会产生多个Shader变体。如果变体数量太多就会增加内存消耗，一般ShaderLab占用内存在30-70M左右，如果超出太多就要考虑优化变体数量。

        fixed4 frag (v2f i) : SV_Target
            {
                #if _OVERLAY_1
                	col += secCol;
                #elif _OVERLAY_2
                	col *= secCol;
                #endif
                	col *= _OtherCol;
                return col;
            }

2.变体的产生

主要是在Shader中使用了：#pragma shader_feature和#pragma multi_compile起到宏的作用。不一样的是 shader_feature 没有用到的不会被包含进去, 而 multi_compile全部版本都会被包含，因此 shader_feature 适用于那些会在材质面板中直接设置的情况,但在脚本里通过DisableKeyword 和 EnableKeyword 来开启或关闭 keyword 的话就要使用 multi_compile。

3.变体数量计算

Case1 #pragma multi_compile A B C #pragma multi_compile D E 如果shader中使用了以上两个multi_compile那么不管后面是否使用到宏(A,B,C,D,E)它都会产生变体，这样计算的方法是(A,B,C)(D,E) => 32=>6。 Case2 #pragma multi_compile A B C #pragma shader_feature D E 这里有两个shader_feature,当他们启用才会产生变体因此有以下几种组合情况： (A+D,B+D,C+D) ,(A+E,B+E,C+E),(A+D,B+D,C+D,A+E,B+E,C+E) Case3 #pragma multi_compile A B C #pragma shader_feature _ D E 这里的（’_’）表示空，当D或E启用时会产生：(A,B,C,A+D,B+D,C+D) 或 (A,B,C,A+E,B+E,C+E)

4.变体查看

Unity在编辑器里提供了变体查看的方法，我们在shader中添加#pragma shader_feature_local CS_BOOL为例演示如何查看：在这里插入图片描述 1.选中shader，在inspector面板中有个Keywords,它里面包含了全局和本地的所有keword。 2.点击inspector上的Compiled code右边的倒三角,再点击弹出框内的Show按钮即可看到当前shader用到的Keyword。

5.减少变体

1.shader内剔除我们可以在shader中使用#pragma skip_variants来剔除不想要的Keyword变体。如下所示在shader中添加#pragma skip_variants CS_BOOL后就可以屏蔽该Keyword。在这里插入图片描述

2.Build时剔除（只能用于Global ）使用以下方法剔除时发现无法把Local类型的keyword剔除掉，如果有哪位晓得方法麻烦留言指导下哈，非常感谢。

using System.Collections;
using System.Collections.Generic;
using UnityEditor.Build;
using UnityEditor.Rendering;
using UnityEngine;
using UnityEngine.Rendering;

namespace ZYF
{
    /// 
    /// 在Build时剔除shader keyword
    /// 
    public class ZYF_Test_ShaderKeywordStripping : IPreprocessShaders
    {
        public int callbackOrder => 0;

        //要剔除的keyword
        ShaderKeyword cs_bool_keyword;
        public ZYF_Test_ShaderKeywordStripping()
        {
            cs_bool_keyword = new ShaderKeyword("CS_BOOL");
        }
        public void OnProcessShader(Shader shader, ShaderSnippetData snippet, IList data)
        {
            List strippingList = new List();
            //收集要剔除的data
            for (int i = 0, length = data.Count; i 
            {
                data.Remove(d);
            });
        }
    }
}

6.变体在Editor中的生成过程

在这里插入图片描述

Shader Load Shader预加载

使用ShaderVariantCollection预加载指定Shader 官方说明 ShaderVariantCollection里记录着每个shader里真正使用到的变体，它可以用来预加载shader。 1.首先进入运行模式并让摄像机看到整个场景，然后到ProjectSettings/Graphics的最下方点击Save to asset保存。 2.把保存的SVC文件放到Project Settings/Graphics 中的Preloaded Shaders中，这样就能预加载shader了，当然你可以按需求修改SVC内容。 3.还可以在代码中进行预加载(因为预加载比较耗时最好放在加载场景中执行)：Shader.WarmupAllShaders(预加载所有shader) 和ShaderVariantCollection.Warmup(加载指定SVC中的shader)。

Unity Shader入门精要

建议先看图形学基础知识书籍github 官方文档

渲染流水线概念流水线

#mermaid-svg-4S84H0dNKPEOkyZd .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-4S84H0dNKPEOkyZd .label text{fill:#333}#mermaid-svg-4S84H0dNKPEOkyZd .node rect,#mermaid-svg-4S84H0dNKPEOkyZd .node circle,#mermaid-svg-4S84H0dNKPEOkyZd .node ellipse,#mermaid-svg-4S84H0dNKPEOkyZd .node polygon,#mermaid-svg-4S84H0dNKPEOkyZd .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-4S84H0dNKPEOkyZd .node .label{text-align:center;fill:#333}#mermaid-svg-4S84H0dNKPEOkyZd .node.clickable{cursor:pointer}#mermaid-svg-4S84H0dNKPEOkyZd .arrowheadPath{fill:#333}#mermaid-svg-4S84H0dNKPEOkyZd .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-4S84H0dNKPEOkyZd .flowchart-link{stroke:#333;fill:none}#mermaid-svg-4S84H0dNKPEOkyZd .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-4S84H0dNKPEOkyZd .edgeLabel rect{opacity:0.9}#mermaid-svg-4S84H0dNKPEOkyZd .edgeLabel span{color:#333}#mermaid-svg-4S84H0dNKPEOkyZd .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-4S84H0dNKPEOkyZd .cluster text{fill:#333}#mermaid-svg-4S84H0dNKPEOkyZd div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-4S84H0dNKPEOkyZd .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-4S84H0dNKPEOkyZd text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-4S84H0dNKPEOkyZd .actor-line{stroke:grey}#mermaid-svg-4S84H0dNKPEOkyZd .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-4S84H0dNKPEOkyZd .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-4S84H0dNKPEOkyZd #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-4S84H0dNKPEOkyZd .sequenceNumber{fill:#fff}#mermaid-svg-4S84H0dNKPEOkyZd #sequencenumber{fill:#333}#mermaid-svg-4S84H0dNKPEOkyZd #crosshead path{fill:#333;stroke:#333}#mermaid-svg-4S84H0dNKPEOkyZd .messageText{fill:#333;stroke:#333}#mermaid-svg-4S84H0dNKPEOkyZd .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-4S84H0dNKPEOkyZd .labelText,#mermaid-svg-4S84H0dNKPEOkyZd .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-4S84H0dNKPEOkyZd .loopText,#mermaid-svg-4S84H0dNKPEOkyZd .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-4S84H0dNKPEOkyZd .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-4S84H0dNKPEOkyZd .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-4S84H0dNKPEOkyZd .noteText,#mermaid-svg-4S84H0dNKPEOkyZd .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-4S84H0dNKPEOkyZd .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-4S84H0dNKPEOkyZd .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-4S84H0dNKPEOkyZd .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-4S84H0dNKPEOkyZd .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-4S84H0dNKPEOkyZd .section{stroke:none;opacity:0.2}#mermaid-svg-4S84H0dNKPEOkyZd .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-4S84H0dNKPEOkyZd .section2{fill:#fff400}#mermaid-svg-4S84H0dNKPEOkyZd .section1,#mermaid-svg-4S84H0dNKPEOkyZd .section3{fill:#fff;opacity:0.2}#mermaid-svg-4S84H0dNKPEOkyZd .sectionTitle0{fill:#333}#mermaid-svg-4S84H0dNKPEOkyZd .sectionTitle1{fill:#333}#mermaid-svg-4S84H0dNKPEOkyZd .sectionTitle2{fill:#333}#mermaid-svg-4S84H0dNKPEOkyZd .sectionTitle3{fill:#333}#mermaid-svg-4S84H0dNKPEOkyZd .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-4S84H0dNKPEOkyZd .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-4S84H0dNKPEOkyZd .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-4S84H0dNKPEOkyZd .grid path{stroke-width:0}#mermaid-svg-4S84H0dNKPEOkyZd .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-4S84H0dNKPEOkyZd .task{stroke-width:2}#mermaid-svg-4S84H0dNKPEOkyZd .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-4S84H0dNKPEOkyZd .taskText:not([font-size]){font-size:11px}#mermaid-svg-4S84H0dNKPEOkyZd .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-4S84H0dNKPEOkyZd .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-4S84H0dNKPEOkyZd .task.clickable{cursor:pointer}#mermaid-svg-4S84H0dNKPEOkyZd .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-4S84H0dNKPEOkyZd .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-4S84H0dNKPEOkyZd .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-4S84H0dNKPEOkyZd .taskText0,#mermaid-svg-4S84H0dNKPEOkyZd .taskText1,#mermaid-svg-4S84H0dNKPEOkyZd .taskText2,#mermaid-svg-4S84H0dNKPEOkyZd .taskText3{fill:#fff}#mermaid-svg-4S84H0dNKPEOkyZd .task0,#mermaid-svg-4S84H0dNKPEOkyZd .task1,#mermaid-svg-4S84H0dNKPEOkyZd .task2,#mermaid-svg-4S84H0dNKPEOkyZd .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-4S84H0dNKPEOkyZd .taskTextOutside0,#mermaid-svg-4S84H0dNKPEOkyZd .taskTextOutside2{fill:#000}#mermaid-svg-4S84H0dNKPEOkyZd .taskTextOutside1,#mermaid-svg-4S84H0dNKPEOkyZd .taskTextOutside3{fill:#000}#mermaid-svg-4S84H0dNKPEOkyZd .active0,#mermaid-svg-4S84H0dNKPEOkyZd .active1,#mermaid-svg-4S84H0dNKPEOkyZd .active2,#mermaid-svg-4S84H0dNKPEOkyZd .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-4S84H0dNKPEOkyZd .activeText0,#mermaid-svg-4S84H0dNKPEOkyZd .activeText1,#mermaid-svg-4S84H0dNKPEOkyZd .activeText2,#mermaid-svg-4S84H0dNKPEOkyZd .activeText3{fill:#000 !important}#mermaid-svg-4S84H0dNKPEOkyZd .done0,#mermaid-svg-4S84H0dNKPEOkyZd .done1,#mermaid-svg-4S84H0dNKPEOkyZd .done2,#mermaid-svg-4S84H0dNKPEOkyZd .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-4S84H0dNKPEOkyZd .doneText0,#mermaid-svg-4S84H0dNKPEOkyZd .doneText1,#mermaid-svg-4S84H0dNKPEOkyZd .doneText2,#mermaid-svg-4S84H0dNKPEOkyZd .doneText3{fill:#000 !important}#mermaid-svg-4S84H0dNKPEOkyZd .crit0,#mermaid-svg-4S84H0dNKPEOkyZd .crit1,#mermaid-svg-4S84H0dNKPEOkyZd .crit2,#mermaid-svg-4S84H0dNKPEOkyZd .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-4S84H0dNKPEOkyZd .activeCrit0,#mermaid-svg-4S84H0dNKPEOkyZd .activeCrit1,#mermaid-svg-4S84H0dNKPEOkyZd .activeCrit2,#mermaid-svg-4S84H0dNKPEOkyZd .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-4S84H0dNKPEOkyZd .doneCrit0,#mermaid-svg-4S84H0dNKPEOkyZd .doneCrit1,#mermaid-svg-4S84H0dNKPEOkyZd .doneCrit2,#mermaid-svg-4S84H0dNKPEOkyZd .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-4S84H0dNKPEOkyZd .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-4S84H0dNKPEOkyZd .milestoneText{font-style:italic}#mermaid-svg-4S84H0dNKPEOkyZd .doneCritText0,#mermaid-svg-4S84H0dNKPEOkyZd .doneCritText1,#mermaid-svg-4S84H0dNKPEOkyZd .doneCritText2,#mermaid-svg-4S84H0dNKPEOkyZd .doneCritText3{fill:#000 !important}#mermaid-svg-4S84H0dNKPEOkyZd .activeCritText0,#mermaid-svg-4S84H0dNKPEOkyZd .activeCritText1,#mermaid-svg-4S84H0dNKPEOkyZd .activeCritText2,#mermaid-svg-4S84H0dNKPEOkyZd .activeCritText3{fill:#000 !important}#mermaid-svg-4S84H0dNKPEOkyZd .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-4S84H0dNKPEOkyZd g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-4S84H0dNKPEOkyZd g.classGroup text .title{font-weight:bolder}#mermaid-svg-4S84H0dNKPEOkyZd g.clickable{cursor:pointer}#mermaid-svg-4S84H0dNKPEOkyZd g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-4S84H0dNKPEOkyZd g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-4S84H0dNKPEOkyZd .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-4S84H0dNKPEOkyZd .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-4S84H0dNKPEOkyZd .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-4S84H0dNKPEOkyZd .dashed-line{stroke-dasharray:3}#mermaid-svg-4S84H0dNKPEOkyZd #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-4S84H0dNKPEOkyZd #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-4S84H0dNKPEOkyZd #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-4S84H0dNKPEOkyZd #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-4S84H0dNKPEOkyZd #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-4S84H0dNKPEOkyZd #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-4S84H0dNKPEOkyZd #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-4S84H0dNKPEOkyZd #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-4S84H0dNKPEOkyZd .commit-id,#mermaid-svg-4S84H0dNKPEOkyZd .commit-msg,#mermaid-svg-4S84H0dNKPEOkyZd .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-4S84H0dNKPEOkyZd .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-4S84H0dNKPEOkyZd .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-4S84H0dNKPEOkyZd g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-4S84H0dNKPEOkyZd g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-4S84H0dNKPEOkyZd g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-4S84H0dNKPEOkyZd g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-4S84H0dNKPEOkyZd g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-4S84H0dNKPEOkyZd g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-4S84H0dNKPEOkyZd .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-4S84H0dNKPEOkyZd .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-4S84H0dNKPEOkyZd .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-4S84H0dNKPEOkyZd .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-4S84H0dNKPEOkyZd .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-4S84H0dNKPEOkyZd .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-4S84H0dNKPEOkyZd .edgeLabel text{fill:#333}#mermaid-svg-4S84H0dNKPEOkyZd .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-4S84H0dNKPEOkyZd .node circle.state-start{fill:black;stroke:black}#mermaid-svg-4S84H0dNKPEOkyZd .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-4S84H0dNKPEOkyZd #statediagram-barbEnd{fill:#9370db}#mermaid-svg-4S84H0dNKPEOkyZd .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-4S84H0dNKPEOkyZd .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-4S84H0dNKPEOkyZd .statediagram-state .divider{stroke:#9370db}#mermaid-svg-4S84H0dNKPEOkyZd .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-4S84H0dNKPEOkyZd .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-4S84H0dNKPEOkyZd .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-4S84H0dNKPEOkyZd .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-4S84H0dNKPEOkyZd .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-4S84H0dNKPEOkyZd .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-4S84H0dNKPEOkyZd .note-edge{stroke-dasharray:5}#mermaid-svg-4S84H0dNKPEOkyZd .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-4S84H0dNKPEOkyZd .error-icon{fill:#522}#mermaid-svg-4S84H0dNKPEOkyZd .error-text{fill:#522;stroke:#522}#mermaid-svg-4S84H0dNKPEOkyZd .edge-thickness-normal{stroke-width:2px}#mermaid-svg-4S84H0dNKPEOkyZd .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-4S84H0dNKPEOkyZd .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-4S84H0dNKPEOkyZd .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-4S84H0dNKPEOkyZd .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-4S84H0dNKPEOkyZd .marker{fill:#333}#mermaid-svg-4S84H0dNKPEOkyZd .marker.cross{stroke:#333} :root { --mermaid-font-family: "trebuchet ms", verdana, arial;} #mermaid-svg-4S84H0dNKPEOkyZd { color: rgba(0, 0, 0, 0.75); font: ; }

应用阶段

几何阶段

光栅化阶段

输出渲染图元

输出屏幕空间的顶点信息

每个阶段也是一个流水线系统。应用阶段：输出渲染所需的几何信息即渲染图元（点线面）；几何阶段：把顶点坐标变换到屏幕空间中，输出屏幕空间二维顶点坐标、每个顶点对应的深度值、着色等相关信息；光栅化阶段：在GPU上运行，决定哪些像素被绘制，对逐顶点数据（纹理坐标、顶点颜色等）进行插值，然后逐像素处理。

CPU–>GPU

#mermaid-svg-cNq0ddUqtAMal3W0 .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-cNq0ddUqtAMal3W0 .label text{fill:#333}#mermaid-svg-cNq0ddUqtAMal3W0 .node rect,#mermaid-svg-cNq0ddUqtAMal3W0 .node circle,#mermaid-svg-cNq0ddUqtAMal3W0 .node ellipse,#mermaid-svg-cNq0ddUqtAMal3W0 .node polygon,#mermaid-svg-cNq0ddUqtAMal3W0 .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-cNq0ddUqtAMal3W0 .node .label{text-align:center;fill:#333}#mermaid-svg-cNq0ddUqtAMal3W0 .node.clickable{cursor:pointer}#mermaid-svg-cNq0ddUqtAMal3W0 .arrowheadPath{fill:#333}#mermaid-svg-cNq0ddUqtAMal3W0 .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-cNq0ddUqtAMal3W0 .flowchart-link{stroke:#333;fill:none}#mermaid-svg-cNq0ddUqtAMal3W0 .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-cNq0ddUqtAMal3W0 .edgeLabel rect{opacity:0.9}#mermaid-svg-cNq0ddUqtAMal3W0 .edgeLabel span{color:#333}#mermaid-svg-cNq0ddUqtAMal3W0 .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-cNq0ddUqtAMal3W0 .cluster text{fill:#333}#mermaid-svg-cNq0ddUqtAMal3W0 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-cNq0ddUqtAMal3W0 .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-cNq0ddUqtAMal3W0 text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-cNq0ddUqtAMal3W0 .actor-line{stroke:grey}#mermaid-svg-cNq0ddUqtAMal3W0 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-cNq0ddUqtAMal3W0 .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-cNq0ddUqtAMal3W0 #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-cNq0ddUqtAMal3W0 .sequenceNumber{fill:#fff}#mermaid-svg-cNq0ddUqtAMal3W0 #sequencenumber{fill:#333}#mermaid-svg-cNq0ddUqtAMal3W0 #crosshead path{fill:#333;stroke:#333}#mermaid-svg-cNq0ddUqtAMal3W0 .messageText{fill:#333;stroke:#333}#mermaid-svg-cNq0ddUqtAMal3W0 .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-cNq0ddUqtAMal3W0 .labelText,#mermaid-svg-cNq0ddUqtAMal3W0 .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-cNq0ddUqtAMal3W0 .loopText,#mermaid-svg-cNq0ddUqtAMal3W0 .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-cNq0ddUqtAMal3W0 .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-cNq0ddUqtAMal3W0 .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-cNq0ddUqtAMal3W0 .noteText,#mermaid-svg-cNq0ddUqtAMal3W0 .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-cNq0ddUqtAMal3W0 .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-cNq0ddUqtAMal3W0 .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-cNq0ddUqtAMal3W0 .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-cNq0ddUqtAMal3W0 .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cNq0ddUqtAMal3W0 .section{stroke:none;opacity:0.2}#mermaid-svg-cNq0ddUqtAMal3W0 .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-cNq0ddUqtAMal3W0 .section2{fill:#fff400}#mermaid-svg-cNq0ddUqtAMal3W0 .section1,#mermaid-svg-cNq0ddUqtAMal3W0 .section3{fill:#fff;opacity:0.2}#mermaid-svg-cNq0ddUqtAMal3W0 .sectionTitle0{fill:#333}#mermaid-svg-cNq0ddUqtAMal3W0 .sectionTitle1{fill:#333}#mermaid-svg-cNq0ddUqtAMal3W0 .sectionTitle2{fill:#333}#mermaid-svg-cNq0ddUqtAMal3W0 .sectionTitle3{fill:#333}#mermaid-svg-cNq0ddUqtAMal3W0 .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cNq0ddUqtAMal3W0 .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-cNq0ddUqtAMal3W0 .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cNq0ddUqtAMal3W0 .grid path{stroke-width:0}#mermaid-svg-cNq0ddUqtAMal3W0 .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-cNq0ddUqtAMal3W0 .task{stroke-width:2}#mermaid-svg-cNq0ddUqtAMal3W0 .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cNq0ddUqtAMal3W0 .taskText:not([font-size]){font-size:11px}#mermaid-svg-cNq0ddUqtAMal3W0 .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cNq0ddUqtAMal3W0 .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-cNq0ddUqtAMal3W0 .task.clickable{cursor:pointer}#mermaid-svg-cNq0ddUqtAMal3W0 .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-cNq0ddUqtAMal3W0 .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-cNq0ddUqtAMal3W0 .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-cNq0ddUqtAMal3W0 .taskText0,#mermaid-svg-cNq0ddUqtAMal3W0 .taskText1,#mermaid-svg-cNq0ddUqtAMal3W0 .taskText2,#mermaid-svg-cNq0ddUqtAMal3W0 .taskText3{fill:#fff}#mermaid-svg-cNq0ddUqtAMal3W0 .task0,#mermaid-svg-cNq0ddUqtAMal3W0 .task1,#mermaid-svg-cNq0ddUqtAMal3W0 .task2,#mermaid-svg-cNq0ddUqtAMal3W0 .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-cNq0ddUqtAMal3W0 .taskTextOutside0,#mermaid-svg-cNq0ddUqtAMal3W0 .taskTextOutside2{fill:#000}#mermaid-svg-cNq0ddUqtAMal3W0 .taskTextOutside1,#mermaid-svg-cNq0ddUqtAMal3W0 .taskTextOutside3{fill:#000}#mermaid-svg-cNq0ddUqtAMal3W0 .active0,#mermaid-svg-cNq0ddUqtAMal3W0 .active1,#mermaid-svg-cNq0ddUqtAMal3W0 .active2,#mermaid-svg-cNq0ddUqtAMal3W0 .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-cNq0ddUqtAMal3W0 .activeText0,#mermaid-svg-cNq0ddUqtAMal3W0 .activeText1,#mermaid-svg-cNq0ddUqtAMal3W0 .activeText2,#mermaid-svg-cNq0ddUqtAMal3W0 .activeText3{fill:#000 !important}#mermaid-svg-cNq0ddUqtAMal3W0 .done0,#mermaid-svg-cNq0ddUqtAMal3W0 .done1,#mermaid-svg-cNq0ddUqtAMal3W0 .done2,#mermaid-svg-cNq0ddUqtAMal3W0 .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-cNq0ddUqtAMal3W0 .doneText0,#mermaid-svg-cNq0ddUqtAMal3W0 .doneText1,#mermaid-svg-cNq0ddUqtAMal3W0 .doneText2,#mermaid-svg-cNq0ddUqtAMal3W0 .doneText3{fill:#000 !important}#mermaid-svg-cNq0ddUqtAMal3W0 .crit0,#mermaid-svg-cNq0ddUqtAMal3W0 .crit1,#mermaid-svg-cNq0ddUqtAMal3W0 .crit2,#mermaid-svg-cNq0ddUqtAMal3W0 .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-cNq0ddUqtAMal3W0 .activeCrit0,#mermaid-svg-cNq0ddUqtAMal3W0 .activeCrit1,#mermaid-svg-cNq0ddUqtAMal3W0 .activeCrit2,#mermaid-svg-cNq0ddUqtAMal3W0 .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-cNq0ddUqtAMal3W0 .doneCrit0,#mermaid-svg-cNq0ddUqtAMal3W0 .doneCrit1,#mermaid-svg-cNq0ddUqtAMal3W0 .doneCrit2,#mermaid-svg-cNq0ddUqtAMal3W0 .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-cNq0ddUqtAMal3W0 .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-cNq0ddUqtAMal3W0 .milestoneText{font-style:italic}#mermaid-svg-cNq0ddUqtAMal3W0 .doneCritText0,#mermaid-svg-cNq0ddUqtAMal3W0 .doneCritText1,#mermaid-svg-cNq0ddUqtAMal3W0 .doneCritText2,#mermaid-svg-cNq0ddUqtAMal3W0 .doneCritText3{fill:#000 !important}#mermaid-svg-cNq0ddUqtAMal3W0 .activeCritText0,#mermaid-svg-cNq0ddUqtAMal3W0 .activeCritText1,#mermaid-svg-cNq0ddUqtAMal3W0 .activeCritText2,#mermaid-svg-cNq0ddUqtAMal3W0 .activeCritText3{fill:#000 !important}#mermaid-svg-cNq0ddUqtAMal3W0 .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cNq0ddUqtAMal3W0 g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-cNq0ddUqtAMal3W0 g.classGroup text .title{font-weight:bolder}#mermaid-svg-cNq0ddUqtAMal3W0 g.clickable{cursor:pointer}#mermaid-svg-cNq0ddUqtAMal3W0 g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-cNq0ddUqtAMal3W0 g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-cNq0ddUqtAMal3W0 .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-cNq0ddUqtAMal3W0 .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-cNq0ddUqtAMal3W0 .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-cNq0ddUqtAMal3W0 .dashed-line{stroke-dasharray:3}#mermaid-svg-cNq0ddUqtAMal3W0 #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cNq0ddUqtAMal3W0 #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cNq0ddUqtAMal3W0 #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-cNq0ddUqtAMal3W0 #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-cNq0ddUqtAMal3W0 #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cNq0ddUqtAMal3W0 #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cNq0ddUqtAMal3W0 #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cNq0ddUqtAMal3W0 #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cNq0ddUqtAMal3W0 .commit-id,#mermaid-svg-cNq0ddUqtAMal3W0 .commit-msg,#mermaid-svg-cNq0ddUqtAMal3W0 .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cNq0ddUqtAMal3W0 .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cNq0ddUqtAMal3W0 .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cNq0ddUqtAMal3W0 g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cNq0ddUqtAMal3W0 g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-cNq0ddUqtAMal3W0 g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-cNq0ddUqtAMal3W0 g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-cNq0ddUqtAMal3W0 g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-cNq0ddUqtAMal3W0 g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-cNq0ddUqtAMal3W0 .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-cNq0ddUqtAMal3W0 .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-cNq0ddUqtAMal3W0 .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-cNq0ddUqtAMal3W0 .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-cNq0ddUqtAMal3W0 .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-cNq0ddUqtAMal3W0 .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-cNq0ddUqtAMal3W0 .edgeLabel text{fill:#333}#mermaid-svg-cNq0ddUqtAMal3W0 .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cNq0ddUqtAMal3W0 .node circle.state-start{fill:black;stroke:black}#mermaid-svg-cNq0ddUqtAMal3W0 .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-cNq0ddUqtAMal3W0 #statediagram-barbEnd{fill:#9370db}#mermaid-svg-cNq0ddUqtAMal3W0 .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-cNq0ddUqtAMal3W0 .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-cNq0ddUqtAMal3W0 .statediagram-state .divider{stroke:#9370db}#mermaid-svg-cNq0ddUqtAMal3W0 .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-cNq0ddUqtAMal3W0 .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-cNq0ddUqtAMal3W0 .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-cNq0ddUqtAMal3W0 .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-cNq0ddUqtAMal3W0 .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-cNq0ddUqtAMal3W0 .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-cNq0ddUqtAMal3W0 .note-edge{stroke-dasharray:5}#mermaid-svg-cNq0ddUqtAMal3W0 .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-cNq0ddUqtAMal3W0 .error-icon{fill:#522}#mermaid-svg-cNq0ddUqtAMal3W0 .error-text{fill:#522;stroke:#522}#mermaid-svg-cNq0ddUqtAMal3W0 .edge-thickness-normal{stroke-width:2px}#mermaid-svg-cNq0ddUqtAMal3W0 .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-cNq0ddUqtAMal3W0 .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-cNq0ddUqtAMal3W0 .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-cNq0ddUqtAMal3W0 .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-cNq0ddUqtAMal3W0 .marker{fill:#333}#mermaid-svg-cNq0ddUqtAMal3W0 .marker.cross{stroke:#333} :root { --mermaid-font-family: "trebuchet ms", verdana, arial;} #mermaid-svg-cNq0ddUqtAMal3W0 { color: rgba(0, 0, 0, 0.75); font: ; }

应用阶段

从硬盘加载数据到显存

设置渲染状态

调用DrawCall

定义网格渲染用啥着色器材质贴图

告诉GPU开始渲染

GPU流水线

概念阶段的几何、光栅化两个阶段开发者无法拥有绝对的控制权，其实现的载体是GPU.

#mermaid-svg-cxe9t60YYmNEGj8S .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-cxe9t60YYmNEGj8S .label text{fill:#333}#mermaid-svg-cxe9t60YYmNEGj8S .node rect,#mermaid-svg-cxe9t60YYmNEGj8S .node circle,#mermaid-svg-cxe9t60YYmNEGj8S .node ellipse,#mermaid-svg-cxe9t60YYmNEGj8S .node polygon,#mermaid-svg-cxe9t60YYmNEGj8S .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-cxe9t60YYmNEGj8S .node .label{text-align:center;fill:#333}#mermaid-svg-cxe9t60YYmNEGj8S .node.clickable{cursor:pointer}#mermaid-svg-cxe9t60YYmNEGj8S .arrowheadPath{fill:#333}#mermaid-svg-cxe9t60YYmNEGj8S .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-cxe9t60YYmNEGj8S .flowchart-link{stroke:#333;fill:none}#mermaid-svg-cxe9t60YYmNEGj8S .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-cxe9t60YYmNEGj8S .edgeLabel rect{opacity:0.9}#mermaid-svg-cxe9t60YYmNEGj8S .edgeLabel span{color:#333}#mermaid-svg-cxe9t60YYmNEGj8S .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-cxe9t60YYmNEGj8S .cluster text{fill:#333}#mermaid-svg-cxe9t60YYmNEGj8S div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-cxe9t60YYmNEGj8S .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-cxe9t60YYmNEGj8S text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-cxe9t60YYmNEGj8S .actor-line{stroke:grey}#mermaid-svg-cxe9t60YYmNEGj8S .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-cxe9t60YYmNEGj8S .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-cxe9t60YYmNEGj8S #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-cxe9t60YYmNEGj8S .sequenceNumber{fill:#fff}#mermaid-svg-cxe9t60YYmNEGj8S #sequencenumber{fill:#333}#mermaid-svg-cxe9t60YYmNEGj8S #crosshead path{fill:#333;stroke:#333}#mermaid-svg-cxe9t60YYmNEGj8S .messageText{fill:#333;stroke:#333}#mermaid-svg-cxe9t60YYmNEGj8S .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-cxe9t60YYmNEGj8S .labelText,#mermaid-svg-cxe9t60YYmNEGj8S .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-cxe9t60YYmNEGj8S .loopText,#mermaid-svg-cxe9t60YYmNEGj8S .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-cxe9t60YYmNEGj8S .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-cxe9t60YYmNEGj8S .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-cxe9t60YYmNEGj8S .noteText,#mermaid-svg-cxe9t60YYmNEGj8S .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-cxe9t60YYmNEGj8S .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-cxe9t60YYmNEGj8S .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-cxe9t60YYmNEGj8S .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-cxe9t60YYmNEGj8S .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cxe9t60YYmNEGj8S .section{stroke:none;opacity:0.2}#mermaid-svg-cxe9t60YYmNEGj8S .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-cxe9t60YYmNEGj8S .section2{fill:#fff400}#mermaid-svg-cxe9t60YYmNEGj8S .section1,#mermaid-svg-cxe9t60YYmNEGj8S .section3{fill:#fff;opacity:0.2}#mermaid-svg-cxe9t60YYmNEGj8S .sectionTitle0{fill:#333}#mermaid-svg-cxe9t60YYmNEGj8S .sectionTitle1{fill:#333}#mermaid-svg-cxe9t60YYmNEGj8S .sectionTitle2{fill:#333}#mermaid-svg-cxe9t60YYmNEGj8S .sectionTitle3{fill:#333}#mermaid-svg-cxe9t60YYmNEGj8S .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cxe9t60YYmNEGj8S .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-cxe9t60YYmNEGj8S .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cxe9t60YYmNEGj8S .grid path{stroke-width:0}#mermaid-svg-cxe9t60YYmNEGj8S .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-cxe9t60YYmNEGj8S .task{stroke-width:2}#mermaid-svg-cxe9t60YYmNEGj8S .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cxe9t60YYmNEGj8S .taskText:not([font-size]){font-size:11px}#mermaid-svg-cxe9t60YYmNEGj8S .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cxe9t60YYmNEGj8S .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-cxe9t60YYmNEGj8S .task.clickable{cursor:pointer}#mermaid-svg-cxe9t60YYmNEGj8S .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-cxe9t60YYmNEGj8S .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-cxe9t60YYmNEGj8S .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-cxe9t60YYmNEGj8S .taskText0,#mermaid-svg-cxe9t60YYmNEGj8S .taskText1,#mermaid-svg-cxe9t60YYmNEGj8S .taskText2,#mermaid-svg-cxe9t60YYmNEGj8S .taskText3{fill:#fff}#mermaid-svg-cxe9t60YYmNEGj8S .task0,#mermaid-svg-cxe9t60YYmNEGj8S .task1,#mermaid-svg-cxe9t60YYmNEGj8S .task2,#mermaid-svg-cxe9t60YYmNEGj8S .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-cxe9t60YYmNEGj8S .taskTextOutside0,#mermaid-svg-cxe9t60YYmNEGj8S .taskTextOutside2{fill:#000}#mermaid-svg-cxe9t60YYmNEGj8S .taskTextOutside1,#mermaid-svg-cxe9t60YYmNEGj8S .taskTextOutside3{fill:#000}#mermaid-svg-cxe9t60YYmNEGj8S .active0,#mermaid-svg-cxe9t60YYmNEGj8S .active1,#mermaid-svg-cxe9t60YYmNEGj8S .active2,#mermaid-svg-cxe9t60YYmNEGj8S .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-cxe9t60YYmNEGj8S .activeText0,#mermaid-svg-cxe9t60YYmNEGj8S .activeText1,#mermaid-svg-cxe9t60YYmNEGj8S .activeText2,#mermaid-svg-cxe9t60YYmNEGj8S .activeText3{fill:#000 !important}#mermaid-svg-cxe9t60YYmNEGj8S .done0,#mermaid-svg-cxe9t60YYmNEGj8S .done1,#mermaid-svg-cxe9t60YYmNEGj8S .done2,#mermaid-svg-cxe9t60YYmNEGj8S .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-cxe9t60YYmNEGj8S .doneText0,#mermaid-svg-cxe9t60YYmNEGj8S .doneText1,#mermaid-svg-cxe9t60YYmNEGj8S .doneText2,#mermaid-svg-cxe9t60YYmNEGj8S .doneText3{fill:#000 !important}#mermaid-svg-cxe9t60YYmNEGj8S .crit0,#mermaid-svg-cxe9t60YYmNEGj8S .crit1,#mermaid-svg-cxe9t60YYmNEGj8S .crit2,#mermaid-svg-cxe9t60YYmNEGj8S .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-cxe9t60YYmNEGj8S .activeCrit0,#mermaid-svg-cxe9t60YYmNEGj8S .activeCrit1,#mermaid-svg-cxe9t60YYmNEGj8S .activeCrit2,#mermaid-svg-cxe9t60YYmNEGj8S .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-cxe9t60YYmNEGj8S .doneCrit0,#mermaid-svg-cxe9t60YYmNEGj8S .doneCrit1,#mermaid-svg-cxe9t60YYmNEGj8S .doneCrit2,#mermaid-svg-cxe9t60YYmNEGj8S .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-cxe9t60YYmNEGj8S .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-cxe9t60YYmNEGj8S .milestoneText{font-style:italic}#mermaid-svg-cxe9t60YYmNEGj8S .doneCritText0,#mermaid-svg-cxe9t60YYmNEGj8S .doneCritText1,#mermaid-svg-cxe9t60YYmNEGj8S .doneCritText2,#mermaid-svg-cxe9t60YYmNEGj8S .doneCritText3{fill:#000 !important}#mermaid-svg-cxe9t60YYmNEGj8S .activeCritText0,#mermaid-svg-cxe9t60YYmNEGj8S .activeCritText1,#mermaid-svg-cxe9t60YYmNEGj8S .activeCritText2,#mermaid-svg-cxe9t60YYmNEGj8S .activeCritText3{fill:#000 !important}#mermaid-svg-cxe9t60YYmNEGj8S .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cxe9t60YYmNEGj8S g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-cxe9t60YYmNEGj8S g.classGroup text .title{font-weight:bolder}#mermaid-svg-cxe9t60YYmNEGj8S g.clickable{cursor:pointer}#mermaid-svg-cxe9t60YYmNEGj8S g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-cxe9t60YYmNEGj8S g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-cxe9t60YYmNEGj8S .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-cxe9t60YYmNEGj8S .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-cxe9t60YYmNEGj8S .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-cxe9t60YYmNEGj8S .dashed-line{stroke-dasharray:3}#mermaid-svg-cxe9t60YYmNEGj8S #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cxe9t60YYmNEGj8S #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cxe9t60YYmNEGj8S #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-cxe9t60YYmNEGj8S #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-cxe9t60YYmNEGj8S #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cxe9t60YYmNEGj8S #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cxe9t60YYmNEGj8S #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cxe9t60YYmNEGj8S #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-cxe9t60YYmNEGj8S .commit-id,#mermaid-svg-cxe9t60YYmNEGj8S .commit-msg,#mermaid-svg-cxe9t60YYmNEGj8S .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cxe9t60YYmNEGj8S .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cxe9t60YYmNEGj8S .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cxe9t60YYmNEGj8S g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cxe9t60YYmNEGj8S g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-cxe9t60YYmNEGj8S g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-cxe9t60YYmNEGj8S g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-cxe9t60YYmNEGj8S g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-cxe9t60YYmNEGj8S g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-cxe9t60YYmNEGj8S .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-cxe9t60YYmNEGj8S .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-cxe9t60YYmNEGj8S .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-cxe9t60YYmNEGj8S .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-cxe9t60YYmNEGj8S .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-cxe9t60YYmNEGj8S .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-cxe9t60YYmNEGj8S .edgeLabel text{fill:#333}#mermaid-svg-cxe9t60YYmNEGj8S .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-cxe9t60YYmNEGj8S .node circle.state-start{fill:black;stroke:black}#mermaid-svg-cxe9t60YYmNEGj8S .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-cxe9t60YYmNEGj8S #statediagram-barbEnd{fill:#9370db}#mermaid-svg-cxe9t60YYmNEGj8S .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-cxe9t60YYmNEGj8S .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-cxe9t60YYmNEGj8S .statediagram-state .divider{stroke:#9370db}#mermaid-svg-cxe9t60YYmNEGj8S .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-cxe9t60YYmNEGj8S .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-cxe9t60YYmNEGj8S .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-cxe9t60YYmNEGj8S .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-cxe9t60YYmNEGj8S .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-cxe9t60YYmNEGj8S .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-cxe9t60YYmNEGj8S .note-edge{stroke-dasharray:5}#mermaid-svg-cxe9t60YYmNEGj8S .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-cxe9t60YYmNEGj8S .error-icon{fill:#522}#mermaid-svg-cxe9t60YYmNEGj8S .error-text{fill:#522;stroke:#522}#mermaid-svg-cxe9t60YYmNEGj8S .edge-thickness-normal{stroke-width:2px}#mermaid-svg-cxe9t60YYmNEGj8S .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-cxe9t60YYmNEGj8S .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-cxe9t60YYmNEGj8S .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-cxe9t60YYmNEGj8S .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-cxe9t60YYmNEGj8S .marker{fill:#333}#mermaid-svg-cxe9t60YYmNEGj8S .marker.cross{stroke:#333} :root { --mermaid-font-family: "trebuchet ms", verdana, arial;} #mermaid-svg-cxe9t60YYmNEGj8S { color: rgba(0, 0, 0, 0.75); font: ; }

光栅化阶段

几何阶段

三角形设置

三角形遍历

片元着色器

逐片元操作

顶点着色器

曲面细分着色器

几何着色器

裁剪

屏幕映射

顶点数据

几何阶段

顶点着色器（Vertex Shader）：每个顶点都会调用一次顶点着色器，顶点与顶点之间相互独立。主要工作是坐标变换、逐顶点光照。坐标变换把顶点坐标从模型空间转换到齐次裁剪空间（通过MVP变换坐标到-1~1）裁剪:把不在摄像机视野范围的物体处理掉。一般图元与摄像机的视野关系有3种：完全在视野内、部分在视野内、完全在事业外。完全在视野内的直接进入下一个流水线阶段，完全在视野外不继续进行处理，对部分在视野内的那些图元的处理就是裁剪。处理方式：在图元与视野边界的交点处用一个新的顶点替代在视野外部的顶点。可以自定义裁剪操作但不可编程！屏幕映射（Sreenn Mapping）：把-1~1坐标转换到屏幕坐标系下=>走你。注意屏幕映射时不会对z坐标做处理，屏幕坐标系和z坐标构成了窗口坐标系（Window Coordinates）。

光栅化阶段

光栅化两个重要的目标是计算图元覆盖的像素和计算这些像素颜色。

三角形设置（Triangle Setup）：计算三角网格表示数据的过程。

三角形遍历（Triangle Traversal）：遍历像素并找到那些被三角网格覆盖的过程。也叫扫描变换（Scan Conversion）。它还有用三角网格的3个顶点的顶点信息对覆盖区域像素进行插值。输出得到一个片元序列，片元不是真正意义上的像素，它还包含了很多状态（屏幕坐标、深度信息…法线、纹理坐标…）。

片元着色器（Fragment Shader）:片元着手之前的阶段并不会影响屏幕颜色值，而是会产生一系列的数据信息。此阶段的输入是那些从顶点着色器输出数据插值得到的。在片元着色器中进行纹理采样需要在顶点着色器输出每个顶点对应的纹理坐标，这样就可以获得插值后的片元纹理坐标了。

逐片元操作（Per-Fragment Operations）:这一阶段主要任务是决定每个片元的可见性（深度测试、模板测试...），如果通过测试就要把颜色值与颜色缓冲区中的颜色进行混合。

#mermaid-svg-Wmhmr8MdUBuKZk7E .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-Wmhmr8MdUBuKZk7E .label text{fill:#333}#mermaid-svg-Wmhmr8MdUBuKZk7E .node rect,#mermaid-svg-Wmhmr8MdUBuKZk7E .node circle,#mermaid-svg-Wmhmr8MdUBuKZk7E .node ellipse,#mermaid-svg-Wmhmr8MdUBuKZk7E .node polygon,#mermaid-svg-Wmhmr8MdUBuKZk7E .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-Wmhmr8MdUBuKZk7E .node .label{text-align:center;fill:#333}#mermaid-svg-Wmhmr8MdUBuKZk7E .node.clickable{cursor:pointer}#mermaid-svg-Wmhmr8MdUBuKZk7E .arrowheadPath{fill:#333}#mermaid-svg-Wmhmr8MdUBuKZk7E .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-Wmhmr8MdUBuKZk7E .flowchart-link{stroke:#333;fill:none}#mermaid-svg-Wmhmr8MdUBuKZk7E .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-Wmhmr8MdUBuKZk7E .edgeLabel rect{opacity:0.9}#mermaid-svg-Wmhmr8MdUBuKZk7E .edgeLabel span{color:#333}#mermaid-svg-Wmhmr8MdUBuKZk7E .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-Wmhmr8MdUBuKZk7E .cluster text{fill:#333}#mermaid-svg-Wmhmr8MdUBuKZk7E div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-Wmhmr8MdUBuKZk7E .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-Wmhmr8MdUBuKZk7E text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-Wmhmr8MdUBuKZk7E .actor-line{stroke:grey}#mermaid-svg-Wmhmr8MdUBuKZk7E .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-Wmhmr8MdUBuKZk7E .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-Wmhmr8MdUBuKZk7E #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-Wmhmr8MdUBuKZk7E .sequenceNumber{fill:#fff}#mermaid-svg-Wmhmr8MdUBuKZk7E #sequencenumber{fill:#333}#mermaid-svg-Wmhmr8MdUBuKZk7E #crosshead path{fill:#333;stroke:#333}#mermaid-svg-Wmhmr8MdUBuKZk7E .messageText{fill:#333;stroke:#333}#mermaid-svg-Wmhmr8MdUBuKZk7E .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-Wmhmr8MdUBuKZk7E .labelText,#mermaid-svg-Wmhmr8MdUBuKZk7E .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-Wmhmr8MdUBuKZk7E .loopText,#mermaid-svg-Wmhmr8MdUBuKZk7E .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-Wmhmr8MdUBuKZk7E .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-Wmhmr8MdUBuKZk7E .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-Wmhmr8MdUBuKZk7E .noteText,#mermaid-svg-Wmhmr8MdUBuKZk7E .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-Wmhmr8MdUBuKZk7E .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-Wmhmr8MdUBuKZk7E .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-Wmhmr8MdUBuKZk7E .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-Wmhmr8MdUBuKZk7E .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-Wmhmr8MdUBuKZk7E .section{stroke:none;opacity:0.2}#mermaid-svg-Wmhmr8MdUBuKZk7E .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-Wmhmr8MdUBuKZk7E .section2{fill:#fff400}#mermaid-svg-Wmhmr8MdUBuKZk7E .section1,#mermaid-svg-Wmhmr8MdUBuKZk7E .section3{fill:#fff;opacity:0.2}#mermaid-svg-Wmhmr8MdUBuKZk7E .sectionTitle0{fill:#333}#mermaid-svg-Wmhmr8MdUBuKZk7E .sectionTitle1{fill:#333}#mermaid-svg-Wmhmr8MdUBuKZk7E .sectionTitle2{fill:#333}#mermaid-svg-Wmhmr8MdUBuKZk7E .sectionTitle3{fill:#333}#mermaid-svg-Wmhmr8MdUBuKZk7E .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-Wmhmr8MdUBuKZk7E .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-Wmhmr8MdUBuKZk7E .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-Wmhmr8MdUBuKZk7E .grid path{stroke-width:0}#mermaid-svg-Wmhmr8MdUBuKZk7E .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-Wmhmr8MdUBuKZk7E .task{stroke-width:2}#mermaid-svg-Wmhmr8MdUBuKZk7E .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-Wmhmr8MdUBuKZk7E .taskText:not([font-size]){font-size:11px}#mermaid-svg-Wmhmr8MdUBuKZk7E .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-Wmhmr8MdUBuKZk7E .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-Wmhmr8MdUBuKZk7E .task.clickable{cursor:pointer}#mermaid-svg-Wmhmr8MdUBuKZk7E .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-Wmhmr8MdUBuKZk7E .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-Wmhmr8MdUBuKZk7E .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-Wmhmr8MdUBuKZk7E .taskText0,#mermaid-svg-Wmhmr8MdUBuKZk7E .taskText1,#mermaid-svg-Wmhmr8MdUBuKZk7E .taskText2,#mermaid-svg-Wmhmr8MdUBuKZk7E .taskText3{fill:#fff}#mermaid-svg-Wmhmr8MdUBuKZk7E .task0,#mermaid-svg-Wmhmr8MdUBuKZk7E .task1,#mermaid-svg-Wmhmr8MdUBuKZk7E .task2,#mermaid-svg-Wmhmr8MdUBuKZk7E .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-Wmhmr8MdUBuKZk7E .taskTextOutside0,#mermaid-svg-Wmhmr8MdUBuKZk7E .taskTextOutside2{fill:#000}#mermaid-svg-Wmhmr8MdUBuKZk7E .taskTextOutside1,#mermaid-svg-Wmhmr8MdUBuKZk7E .taskTextOutside3{fill:#000}#mermaid-svg-Wmhmr8MdUBuKZk7E .active0,#mermaid-svg-Wmhmr8MdUBuKZk7E .active1,#mermaid-svg-Wmhmr8MdUBuKZk7E .active2,#mermaid-svg-Wmhmr8MdUBuKZk7E .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-Wmhmr8MdUBuKZk7E .activeText0,#mermaid-svg-Wmhmr8MdUBuKZk7E .activeText1,#mermaid-svg-Wmhmr8MdUBuKZk7E .activeText2,#mermaid-svg-Wmhmr8MdUBuKZk7E .activeText3{fill:#000 !important}#mermaid-svg-Wmhmr8MdUBuKZk7E .done0,#mermaid-svg-Wmhmr8MdUBuKZk7E .done1,#mermaid-svg-Wmhmr8MdUBuKZk7E .done2,#mermaid-svg-Wmhmr8MdUBuKZk7E .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-Wmhmr8MdUBuKZk7E .doneText0,#mermaid-svg-Wmhmr8MdUBuKZk7E .doneText1,#mermaid-svg-Wmhmr8MdUBuKZk7E .doneText2,#mermaid-svg-Wmhmr8MdUBuKZk7E .doneText3{fill:#000 !important}#mermaid-svg-Wmhmr8MdUBuKZk7E .crit0,#mermaid-svg-Wmhmr8MdUBuKZk7E .crit1,#mermaid-svg-Wmhmr8MdUBuKZk7E .crit2,#mermaid-svg-Wmhmr8MdUBuKZk7E .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-Wmhmr8MdUBuKZk7E .activeCrit0,#mermaid-svg-Wmhmr8MdUBuKZk7E .activeCrit1,#mermaid-svg-Wmhmr8MdUBuKZk7E .activeCrit2,#mermaid-svg-Wmhmr8MdUBuKZk7E .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-Wmhmr8MdUBuKZk7E .doneCrit0,#mermaid-svg-Wmhmr8MdUBuKZk7E .doneCrit1,#mermaid-svg-Wmhmr8MdUBuKZk7E .doneCrit2,#mermaid-svg-Wmhmr8MdUBuKZk7E .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-Wmhmr8MdUBuKZk7E .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-Wmhmr8MdUBuKZk7E .milestoneText{font-style:italic}#mermaid-svg-Wmhmr8MdUBuKZk7E .doneCritText0,#mermaid-svg-Wmhmr8MdUBuKZk7E .doneCritText1,#mermaid-svg-Wmhmr8MdUBuKZk7E .doneCritText2,#mermaid-svg-Wmhmr8MdUBuKZk7E .doneCritText3{fill:#000 !important}#mermaid-svg-Wmhmr8MdUBuKZk7E .activeCritText0,#mermaid-svg-Wmhmr8MdUBuKZk7E .activeCritText1,#mermaid-svg-Wmhmr8MdUBuKZk7E .activeCritText2,#mermaid-svg-Wmhmr8MdUBuKZk7E .activeCritText3{fill:#000 !important}#mermaid-svg-Wmhmr8MdUBuKZk7E .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-Wmhmr8MdUBuKZk7E g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-Wmhmr8MdUBuKZk7E g.classGroup text .title{font-weight:bolder}#mermaid-svg-Wmhmr8MdUBuKZk7E g.clickable{cursor:pointer}#mermaid-svg-Wmhmr8MdUBuKZk7E g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-Wmhmr8MdUBuKZk7E g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-Wmhmr8MdUBuKZk7E .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-Wmhmr8MdUBuKZk7E .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-Wmhmr8MdUBuKZk7E .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-Wmhmr8MdUBuKZk7E .dashed-line{stroke-dasharray:3}#mermaid-svg-Wmhmr8MdUBuKZk7E #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-Wmhmr8MdUBuKZk7E #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-Wmhmr8MdUBuKZk7E #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-Wmhmr8MdUBuKZk7E #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-Wmhmr8MdUBuKZk7E #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-Wmhmr8MdUBuKZk7E #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-Wmhmr8MdUBuKZk7E #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-Wmhmr8MdUBuKZk7E #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-Wmhmr8MdUBuKZk7E .commit-id,#mermaid-svg-Wmhmr8MdUBuKZk7E .commit-msg,#mermaid-svg-Wmhmr8MdUBuKZk7E .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-Wmhmr8MdUBuKZk7E .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-Wmhmr8MdUBuKZk7E .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-Wmhmr8MdUBuKZk7E g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-Wmhmr8MdUBuKZk7E g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-Wmhmr8MdUBuKZk7E g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-Wmhmr8MdUBuKZk7E g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-Wmhmr8MdUBuKZk7E g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-Wmhmr8MdUBuKZk7E g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-Wmhmr8MdUBuKZk7E .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-Wmhmr8MdUBuKZk7E .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-Wmhmr8MdUBuKZk7E .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-Wmhmr8MdUBuKZk7E .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-Wmhmr8MdUBuKZk7E .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-Wmhmr8MdUBuKZk7E .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-Wmhmr8MdUBuKZk7E .edgeLabel text{fill:#333}#mermaid-svg-Wmhmr8MdUBuKZk7E .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-Wmhmr8MdUBuKZk7E .node circle.state-start{fill:black;stroke:black}#mermaid-svg-Wmhmr8MdUBuKZk7E .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-Wmhmr8MdUBuKZk7E #statediagram-barbEnd{fill:#9370db}#mermaid-svg-Wmhmr8MdUBuKZk7E .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-Wmhmr8MdUBuKZk7E .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-Wmhmr8MdUBuKZk7E .statediagram-state .divider{stroke:#9370db}#mermaid-svg-Wmhmr8MdUBuKZk7E .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-Wmhmr8MdUBuKZk7E .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-Wmhmr8MdUBuKZk7E .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-Wmhmr8MdUBuKZk7E .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-Wmhmr8MdUBuKZk7E .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-Wmhmr8MdUBuKZk7E .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-Wmhmr8MdUBuKZk7E .note-edge{stroke-dasharray:5}#mermaid-svg-Wmhmr8MdUBuKZk7E .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-Wmhmr8MdUBuKZk7E .error-icon{fill:#522}#mermaid-svg-Wmhmr8MdUBuKZk7E .error-text{fill:#522;stroke:#522}#mermaid-svg-Wmhmr8MdUBuKZk7E .edge-thickness-normal{stroke-width:2px}#mermaid-svg-Wmhmr8MdUBuKZk7E .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-Wmhmr8MdUBuKZk7E .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-Wmhmr8MdUBuKZk7E .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-Wmhmr8MdUBuKZk7E .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-Wmhmr8MdUBuKZk7E .marker{fill:#333}#mermaid-svg-Wmhmr8MdUBuKZk7E .marker.cross{stroke:#333} :root { --mermaid-font-family: "trebuchet ms", verdana, arial;} #mermaid-svg-Wmhmr8MdUBuKZk7E { color: rgba(0, 0, 0, 0.75); font: ; }

片元

模板测试

深度测试

混合

颜色缓冲区

模板测试:通常用来限制渲染区域，还有渲染阴影、轮廓渲染等。 各种测试：测试顺序并不是唯一的，为了提高性能Unity把深度测试放到了片元着色器之前，这种技术称为Early-Z技术。但有时候提前测试会与片元着色器种的一些操作冲突。 混合（Blend）操作：把当前渲染的颜色与颜色缓冲中的颜色进行混合。不透明物体可以之间关闭混合操作，之间覆盖颜色缓冲区上的像素值。但是半透明物体需要混合操作让物体看起来是透明的。

Draw Call

Draw Call 就是CPU 调用图像编程接口以命令GPU进行渲染的操作。Draw Call造成性能问题的元凶是CPU,而不是GPU。

CPU和GUP并行工作

CPU向命令缓冲区（Command Buffer）添加命令，然后GPU从中读取命令，命令缓冲区中有很多种类的命令，DrawCall只是其中一种。

Draw Call ==》帧率

Draw Call 数量过多 CPU就会把大量的时间花费在提交Draw Call上，造成CPU过载性能下降。其中一个减少Draw Call的方法是批处理（Batching），在CPU的内存中合并网格，把很多小的Draw Call合并成一个大的Draw Call，合并是需要消耗时间的因此对那些静态的物体更适合，动态的每帧都需要重新合并。合并的网格将会使用同一种渲染状态，如果网格之间需要使用不同的渲染状态就无法使用批处理技术！

Shader

Shader所在的阶段就是渲染流水线的一部分，是GPU流水线上一些可高度编程的阶段。有特定类型的着色器：顶点着色器、片元着色器等。在Unity中我们可以方便的编写着色器并且又可以设置渲染状态。

Unity Shader

Unity 使用ShaderLab语言编写Unity Shader文件。

模板介绍

1.Standard Surface Shader：包含标准光照模型的表面着色器模板。 2.Unilit Shader：不包含光照的基本顶点/片元着色器。 3.Image Effect Shader：屏幕后处理效果模板。 4.Compute Shader：利用GPU并行性进行一些与常规渲染流水线无关的计算。

结构命名

Shader "Custom/MyShader":由字符串定义，可以加斜杠“/”来控制在材质面板中出现的位置。示例位置为：Shader->Custom->MyShader。

Properties

   Properties
    {
    	/*Name("显示名称",属性类型) = 默认值*/
        _MainTex ("Texture", 2D) = "white" {}
    }

属性可以让我们在材质面板中方便的调整，在Shader中通过属性的名字（Name）访问。这些属性的名字通常是由下划线开始。

属性类型默认值的定义语法例子Intnumber_Int(“Int”,Int)=2Floatnumber_Float(“Float”,Float) =1.5Range(min,max)number_Range(“Range”,Range(0.0,5.0))=3.0Color(number,number,number,number)_Color(“Color”,Color)=(1,1,1,1)Vector(number,number,number,number)_Vector(“Vector”,Vector)=(2,3,4,5)2D“defaulttexture”{}_2D(“2D”,2D)=""{}Cube“defaulttexture”{}_Cube(“Cube”,Cube)=“white”{}3D“defaulttexture”{}“black”{} 纹理类型

2D、Cube、3D这3种纹理类型的默认值是由字符串和花括号组成，字符串是纹理名称，要么是空要么是内置的纹理名称：white、black、gray、bump。花括号是用于控制固定管线的纹理坐标生成时指定一些纹理属性，在Unity5.0后选项被移除了，如果需要类似的功能要在顶点着色器中编写计算相应的纹理坐标代码。

访问属性

为了在Shader中访问属性需要在CG代码片段中定义和这些属性类型相匹配的变量，Properties语义块中声明的属性只是为了让我们可以在材质面板看见修改而已，我们可以直接通过代码向Shader传递属性而不定义在Properties中。

#mermaid-svg-XPEWPabX9Yrno3S4 .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-XPEWPabX9Yrno3S4 .label text{fill:#333}#mermaid-svg-XPEWPabX9Yrno3S4 .node rect,#mermaid-svg-XPEWPabX9Yrno3S4 .node circle,#mermaid-svg-XPEWPabX9Yrno3S4 .node ellipse,#mermaid-svg-XPEWPabX9Yrno3S4 .node polygon,#mermaid-svg-XPEWPabX9Yrno3S4 .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-XPEWPabX9Yrno3S4 .node .label{text-align:center;fill:#333}#mermaid-svg-XPEWPabX9Yrno3S4 .node.clickable{cursor:pointer}#mermaid-svg-XPEWPabX9Yrno3S4 .arrowheadPath{fill:#333}#mermaid-svg-XPEWPabX9Yrno3S4 .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-XPEWPabX9Yrno3S4 .flowchart-link{stroke:#333;fill:none}#mermaid-svg-XPEWPabX9Yrno3S4 .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-XPEWPabX9Yrno3S4 .edgeLabel rect{opacity:0.9}#mermaid-svg-XPEWPabX9Yrno3S4 .edgeLabel span{color:#333}#mermaid-svg-XPEWPabX9Yrno3S4 .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-XPEWPabX9Yrno3S4 .cluster text{fill:#333}#mermaid-svg-XPEWPabX9Yrno3S4 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-XPEWPabX9Yrno3S4 .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-XPEWPabX9Yrno3S4 text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-XPEWPabX9Yrno3S4 .actor-line{stroke:grey}#mermaid-svg-XPEWPabX9Yrno3S4 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-XPEWPabX9Yrno3S4 .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-XPEWPabX9Yrno3S4 #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-XPEWPabX9Yrno3S4 .sequenceNumber{fill:#fff}#mermaid-svg-XPEWPabX9Yrno3S4 #sequencenumber{fill:#333}#mermaid-svg-XPEWPabX9Yrno3S4 #crosshead path{fill:#333;stroke:#333}#mermaid-svg-XPEWPabX9Yrno3S4 .messageText{fill:#333;stroke:#333}#mermaid-svg-XPEWPabX9Yrno3S4 .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-XPEWPabX9Yrno3S4 .labelText,#mermaid-svg-XPEWPabX9Yrno3S4 .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-XPEWPabX9Yrno3S4 .loopText,#mermaid-svg-XPEWPabX9Yrno3S4 .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-XPEWPabX9Yrno3S4 .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-XPEWPabX9Yrno3S4 .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-XPEWPabX9Yrno3S4 .noteText,#mermaid-svg-XPEWPabX9Yrno3S4 .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-XPEWPabX9Yrno3S4 .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-XPEWPabX9Yrno3S4 .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-XPEWPabX9Yrno3S4 .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-XPEWPabX9Yrno3S4 .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-XPEWPabX9Yrno3S4 .section{stroke:none;opacity:0.2}#mermaid-svg-XPEWPabX9Yrno3S4 .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-XPEWPabX9Yrno3S4 .section2{fill:#fff400}#mermaid-svg-XPEWPabX9Yrno3S4 .section1,#mermaid-svg-XPEWPabX9Yrno3S4 .section3{fill:#fff;opacity:0.2}#mermaid-svg-XPEWPabX9Yrno3S4 .sectionTitle0{fill:#333}#mermaid-svg-XPEWPabX9Yrno3S4 .sectionTitle1{fill:#333}#mermaid-svg-XPEWPabX9Yrno3S4 .sectionTitle2{fill:#333}#mermaid-svg-XPEWPabX9Yrno3S4 .sectionTitle3{fill:#333}#mermaid-svg-XPEWPabX9Yrno3S4 .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-XPEWPabX9Yrno3S4 .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-XPEWPabX9Yrno3S4 .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-XPEWPabX9Yrno3S4 .grid path{stroke-width:0}#mermaid-svg-XPEWPabX9Yrno3S4 .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-XPEWPabX9Yrno3S4 .task{stroke-width:2}#mermaid-svg-XPEWPabX9Yrno3S4 .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-XPEWPabX9Yrno3S4 .taskText:not([font-size]){font-size:11px}#mermaid-svg-XPEWPabX9Yrno3S4 .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-XPEWPabX9Yrno3S4 .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-XPEWPabX9Yrno3S4 .task.clickable{cursor:pointer}#mermaid-svg-XPEWPabX9Yrno3S4 .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-XPEWPabX9Yrno3S4 .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-XPEWPabX9Yrno3S4 .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-XPEWPabX9Yrno3S4 .taskText0,#mermaid-svg-XPEWPabX9Yrno3S4 .taskText1,#mermaid-svg-XPEWPabX9Yrno3S4 .taskText2,#mermaid-svg-XPEWPabX9Yrno3S4 .taskText3{fill:#fff}#mermaid-svg-XPEWPabX9Yrno3S4 .task0,#mermaid-svg-XPEWPabX9Yrno3S4 .task1,#mermaid-svg-XPEWPabX9Yrno3S4 .task2,#mermaid-svg-XPEWPabX9Yrno3S4 .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-XPEWPabX9Yrno3S4 .taskTextOutside0,#mermaid-svg-XPEWPabX9Yrno3S4 .taskTextOutside2{fill:#000}#mermaid-svg-XPEWPabX9Yrno3S4 .taskTextOutside1,#mermaid-svg-XPEWPabX9Yrno3S4 .taskTextOutside3{fill:#000}#mermaid-svg-XPEWPabX9Yrno3S4 .active0,#mermaid-svg-XPEWPabX9Yrno3S4 .active1,#mermaid-svg-XPEWPabX9Yrno3S4 .active2,#mermaid-svg-XPEWPabX9Yrno3S4 .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-XPEWPabX9Yrno3S4 .activeText0,#mermaid-svg-XPEWPabX9Yrno3S4 .activeText1,#mermaid-svg-XPEWPabX9Yrno3S4 .activeText2,#mermaid-svg-XPEWPabX9Yrno3S4 .activeText3{fill:#000 !important}#mermaid-svg-XPEWPabX9Yrno3S4 .done0,#mermaid-svg-XPEWPabX9Yrno3S4 .done1,#mermaid-svg-XPEWPabX9Yrno3S4 .done2,#mermaid-svg-XPEWPabX9Yrno3S4 .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-XPEWPabX9Yrno3S4 .doneText0,#mermaid-svg-XPEWPabX9Yrno3S4 .doneText1,#mermaid-svg-XPEWPabX9Yrno3S4 .doneText2,#mermaid-svg-XPEWPabX9Yrno3S4 .doneText3{fill:#000 !important}#mermaid-svg-XPEWPabX9Yrno3S4 .crit0,#mermaid-svg-XPEWPabX9Yrno3S4 .crit1,#mermaid-svg-XPEWPabX9Yrno3S4 .crit2,#mermaid-svg-XPEWPabX9Yrno3S4 .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-XPEWPabX9Yrno3S4 .activeCrit0,#mermaid-svg-XPEWPabX9Yrno3S4 .activeCrit1,#mermaid-svg-XPEWPabX9Yrno3S4 .activeCrit2,#mermaid-svg-XPEWPabX9Yrno3S4 .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-XPEWPabX9Yrno3S4 .doneCrit0,#mermaid-svg-XPEWPabX9Yrno3S4 .doneCrit1,#mermaid-svg-XPEWPabX9Yrno3S4 .doneCrit2,#mermaid-svg-XPEWPabX9Yrno3S4 .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-XPEWPabX9Yrno3S4 .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-XPEWPabX9Yrno3S4 .milestoneText{font-style:italic}#mermaid-svg-XPEWPabX9Yrno3S4 .doneCritText0,#mermaid-svg-XPEWPabX9Yrno3S4 .doneCritText1,#mermaid-svg-XPEWPabX9Yrno3S4 .doneCritText2,#mermaid-svg-XPEWPabX9Yrno3S4 .doneCritText3{fill:#000 !important}#mermaid-svg-XPEWPabX9Yrno3S4 .activeCritText0,#mermaid-svg-XPEWPabX9Yrno3S4 .activeCritText1,#mermaid-svg-XPEWPabX9Yrno3S4 .activeCritText2,#mermaid-svg-XPEWPabX9Yrno3S4 .activeCritText3{fill:#000 !important}#mermaid-svg-XPEWPabX9Yrno3S4 .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-XPEWPabX9Yrno3S4 g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-XPEWPabX9Yrno3S4 g.classGroup text .title{font-weight:bolder}#mermaid-svg-XPEWPabX9Yrno3S4 g.clickable{cursor:pointer}#mermaid-svg-XPEWPabX9Yrno3S4 g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-XPEWPabX9Yrno3S4 g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-XPEWPabX9Yrno3S4 .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-XPEWPabX9Yrno3S4 .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-XPEWPabX9Yrno3S4 .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-XPEWPabX9Yrno3S4 .dashed-line{stroke-dasharray:3}#mermaid-svg-XPEWPabX9Yrno3S4 #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-XPEWPabX9Yrno3S4 #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-XPEWPabX9Yrno3S4 #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-XPEWPabX9Yrno3S4 #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-XPEWPabX9Yrno3S4 #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-XPEWPabX9Yrno3S4 #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-XPEWPabX9Yrno3S4 #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-XPEWPabX9Yrno3S4 #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-XPEWPabX9Yrno3S4 .commit-id,#mermaid-svg-XPEWPabX9Yrno3S4 .commit-msg,#mermaid-svg-XPEWPabX9Yrno3S4 .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-XPEWPabX9Yrno3S4 .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-XPEWPabX9Yrno3S4 .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-XPEWPabX9Yrno3S4 g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-XPEWPabX9Yrno3S4 g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-XPEWPabX9Yrno3S4 g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-XPEWPabX9Yrno3S4 g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-XPEWPabX9Yrno3S4 g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-XPEWPabX9Yrno3S4 g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-XPEWPabX9Yrno3S4 .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-XPEWPabX9Yrno3S4 .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-XPEWPabX9Yrno3S4 .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-XPEWPabX9Yrno3S4 .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-XPEWPabX9Yrno3S4 .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-XPEWPabX9Yrno3S4 .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-XPEWPabX9Yrno3S4 .edgeLabel text{fill:#333}#mermaid-svg-XPEWPabX9Yrno3S4 .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-XPEWPabX9Yrno3S4 .node circle.state-start{fill:black;stroke:black}#mermaid-svg-XPEWPabX9Yrno3S4 .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-XPEWPabX9Yrno3S4 #statediagram-barbEnd{fill:#9370db}#mermaid-svg-XPEWPabX9Yrno3S4 .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-XPEWPabX9Yrno3S4 .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-XPEWPabX9Yrno3S4 .statediagram-state .divider{stroke:#9370db}#mermaid-svg-XPEWPabX9Yrno3S4 .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-XPEWPabX9Yrno3S4 .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-XPEWPabX9Yrno3S4 .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-XPEWPabX9Yrno3S4 .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-XPEWPabX9Yrno3S4 .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-XPEWPabX9Yrno3S4 .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-XPEWPabX9Yrno3S4 .note-edge{stroke-dasharray:5}#mermaid-svg-XPEWPabX9Yrno3S4 .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-XPEWPabX9Yrno3S4 .error-icon{fill:#522}#mermaid-svg-XPEWPabX9Yrno3S4 .error-text{fill:#522;stroke:#522}#mermaid-svg-XPEWPabX9Yrno3S4 .edge-thickness-normal{stroke-width:2px}#mermaid-svg-XPEWPabX9Yrno3S4 .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-XPEWPabX9Yrno3S4 .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-XPEWPabX9Yrno3S4 .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-XPEWPabX9Yrno3S4 .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-XPEWPabX9Yrno3S4 .marker{fill:#333}#mermaid-svg-XPEWPabX9Yrno3S4 .marker.cross{stroke:#333} :root { --mermaid-font-family: "trebuchet ms", verdana, arial;} #mermaid-svg-XPEWPabX9Yrno3S4 { color: rgba(0, 0, 0, 0.75); font: ; }

赋值

Properties

CG变量

脚本代码

材质面板

SubShader

SubShader{
	//可选
	[Tags]
	//可选
	[RenderSetup]
	Pass{}
	Pass{}
	.
	.
	.
}

一个Unity Shader文件可以包含多个SubShader语义块（至少一个），因为不同的显卡支持的操作指令数目不同，Unity会扫描所有的SubShader找到一个能在目标平台运行的SubShader，在都不支持的情况下就会调用Fallback语义指定的UnityShader。 SubShader中定义了一系列的Pass以及可选的状态[RenderSetup]和标签[Tags]。每个Pass定义了一次完整的渲染流程，所以Pass数量不能太多。状态和标签同样可以在Pass声明，但标签是不一样的。在SubShader设置了状态将会用于所有的Pass。

状态名称设置命令解释CullCull （Back / Front / Off)设置剔除模式：剔除背面 /正面 /关闭剔除ZTestZTest (Less Greater /LEqual /GEqual /Equal /NotEqual /Always)设置深度测试时使用的函数ZWriteZWrite (On /Off)开启 /关闭深度写入BlendBlend SrcFactor DstFactor开启并设置混合模式 SubShader标签类型说明例子Queue控制渲染顺序，指定该物体属于哪一个渲染队列，通过这种方式可以保证所有的透明物体可以在所有不透明物体后面被渲染，可以自定义使用的渲染队列来控制物体的渲染顺序Tags{“Queue”=“Transparent”}RenderType对着色器分类，例如这是一个不透明的着色器，或是一个透明的着色器等。可以被用于着色器替换功能（ShaderReplacement）Tags{“RenderType”=“Opapue”}DisableBatching一些SubShader在使用Unity的批处理功能时会出现问题，比如使用了模型空间下的坐标进行顶点动画，这时可以通过该标签直接禁用批处理功能Tags{“DisableBatching”=“True”}ForceNoShadowCasting控制使用该SubShader的物体是否投射阴影Tags{“ForceNotShadowCasting”}IgnoreProjector如果该标签值为”True“，那么使用该SubShader的物体将不会受Projector的影响，通常用于半透明物体Tags{“IgnoreProjector”=“True”}CanUseSpriteAtlas设置CanUseSpriteAtlas标签为“False”，如果着色器是为精灵设计的，并且当他们被打包到图集时将不能工作Tags{“CanUseSpriteAtlas”=“False”}PreviewType指明材质面板将如何预览该材质。默认为球形，可以设置为”Plane“ ”SkyBox“来改变预览类型Tags{“PreviewType”=“Plane”} Pass

Pass{
	[Name]
	[Tags]
	[RenderSetup]
	//其它...
}

可以在Pass中定义该Pass名称：Name “PassName”,通过这个名字我们可以在其它Unity Shader中用UsePass命令直接引用该Pass: UsePass “xxxShader /PASSNAME”。因为Unity会自动把所有Pass名字转成大写字母，所以UsePass必须用大写形式！

Pass标签类型说明例子LightMode定义该Pass在Unity的渲染流水线中的角色Tags{“LightMode”=“ForwardBase”}RequireOptions用于指定当满足条件时才渲染该Pass，目前支持选项”SoftVegetation“Tags{“RequireOptions”=“SoftVegetation”}

除了UsePass外还有GrabPass:抓取屏幕并将结果存储在纹理中用于后续的Pass处理。

数学基础

参考笔记

坐标系

模型空间与世界空间Unity使用的是左手坐标系。观察空间（以摄像机为原点的坐标系，摄像机前向是z轴的负方向）使用的是右手坐标系。

矢量

矢量 * 标量：对矢量进行缩放。标量为负数会让矢量方向取反。矢量加减法：对应分量相加减。矢量的模：矢量在空间中的长度，对每个分量的平方相加后的值开根号。 单位矢量：模长为1的矢量。

矢量点积：对应分量相乘后取和，结果是一个标量。矢量 . 单位矢量 =在该单位矢量方向的投影。公式一： a . b =(ax,ay,az).(bx,by,bz) = ax bx + ay by + az bz.。公式二：a.b=|a|b|cosθ。

矢量叉积：a x b = (ax ,ay ,az) x (bx, by, bz) =(ay bz - az by, az bx - ax bz,ax by - ay bx)。叉积不满足交换律（axb =-(bxa)），也不满足结合律。叉积的几何意义：结果会得到一个同时垂直于这两个矢量的新矢量。叉积模长：|axb| = |a||b|sinθ = 平行四边形面积。叉积方向：需要根据使用的坐标系判断方向。

矩阵

矩阵 * 标量：矩阵的每个元素与这个标量相乘，结果还是个矩阵。矩阵 * 矩阵：要满足[n x m] * [m x k],不满足交换律，满足结合律。

Unity_TA 养成记

最近更新

热门博客

[ 申请 ]友情链接：