三维渲染中顺序无关的半透明混合(OIT）（一Depth Peeling）

>本文收集关于透明对象渲染技术中关于OIT技术的资料，尝试用简单的逻辑对这些内容进行整理。

1、透明对象的特殊对待

不要小瞧png图片和jpg图片的差异！在一般的三维平台，png代表的是带透明通道的纹理，而jpg代表的是不带透明的纹理。透明纹理和不透明纹理虽然都能被渲染出来，但是它们在三维模型组织、三维渲染等方面分家的。不透明对象由于只需要判断是离屏幕最近即可判断可见，而不透明对象可能需要先进行空间排序，还需要考虑与别的物体的混合模式（Blend）。因此他们需采用不同的渲染批次(DrawCall)。一旦渲染批次多了，那么渲染效率就会降低。

2、WebGPU在透明对象的瓶颈

一般而言，我们无法通过仅通过对象前后排序（犹如PS中的图层排序）从而做到让模型的透明计算正常。在WorldWind平台原来也是才基于物体排序技术，但只能解决50%的问题。在那里经常遇到从透明窗户看外面的时候，外面模型看不到的情况。在2019年，Arcgis4.X的三维平台也会出现这种情况。

如果显存足够，其实我们非常暴力的把每个像素点都存储所对应的三维点。但这种技术是很难通用的，某个像素可能对应几十个甚至上百个三维投影点，不可能先存储再排序在计算的。

下面这个代码记为公式1：

下面是对N个投影点按距离排序，最后计算颜色的过程，非常粗暴
其中0是最远的点，N是最近的单
color0=p0*a0+backgroundColor*(1-a0);
color1=p1*a1+color0*(1-a1);
....
colorN=pN*an+colorNs1*(1-an)

3、Depth Peeling算法

^_^不要怕，这个算法很好理解。

还是前面的公公式，可见p1的颜色是最重要的颜色，把握了p1，就等于把握了半壁江山。Depth Peeling算法就是先从最重要的p1开始。已知p1是深度值最浅的一个像素，可以采用第一次Pass（渲染过程，类似把画板全刷一次）。接下来第二次Pass找到p2点，以此类推，可以设置最多寻找几层。

下面这张图就是用了4个Pass，按距离寻找的三角面。可见这种做法解决的前面几层三角面的情况，可以实现计算量少，对性能要求低的情况。

另外由于公式1是从后往前，而本算法是从往后，因此在计算颜色的算法上需要调整。对公式1进行调整可得到如下规律 

c0=p0*a0+b*(1-a0)
c1=p1*a1+c0*(1-a1)=p1*a1+p0*(1-a1)*a0+b*(1-a0)*(1-a1)
c2=p2*a2+c1*(1-a2)=p2*a2+p1*a1*(1-a2)+p0*a0*(1-a1)*(1-a2)+b*(1-a0)*(1-a1)*(1-a2)
c3=p3*a3+c2*(1-a3)=p3*a3+p2*a2*(1-a3)+p1*a1*(1-a2)*(1-a3)+p0*a0*(1-a1)*(1-a2)*(1-a3)+b*(1-a0)*(1-a1)*(1-a2)*(1-a3)
c3=p4*a4+c3*(1-a4)=p4*a4+p3*a3*(1-a4)+p2*a2*(1-a3)*(1-a4)+p1*a1*(1-a2)*(1-a3)*(1-a4)+p0*a0*(1-a1)*(1-a2)*(1-a3)*(1-a4)+b*(1-a0)*(1-a1)*(1-a2)*(1-a3)*(1-a4)
cn=pn*an+E(pi*ai*π(1-aj))....E表示累加，π表示累乘。
---------------------------------------------------
+p4*a4               			=p4*a4*m        其中m=1
+p3*a3*(1-a4)   			=p3*a3*m	其中m=m*(1-a4)
+p2*a2*(1-a3)*(1-a4)		       =p2*a2*m	其中m=m*(1-a3)
+p1*a1*(1-a2)*(1-a3)*(1-a4)		=p1*a1*m	其中m=m*(1-a2)

可见在整个过程中仅需记录m即可实现从前往后的计算，这是一个非常大的计算效率提升策略！