网站运营与维护的方法,网站seo视频教程,windows与wordpress,少儿编程加盟店倒闭本文收集关于透明对象渲染技术中关于OIT技术的资料#xff0c;尝试用简单的逻辑对这些内容进行整理。
1、透明对象的特殊对待
不要小瞧png图片和jpg图片的差异#xff01;在一般的三维平台#xff0c;png代表的是带透明通道的纹理#xff0c;而jpg代表的是不带透明的…本文收集关于透明对象渲染技术中关于OIT技术的资料尝试用简单的逻辑对这些内容进行整理。
1、透明对象的特殊对待
不要小瞧png图片和jpg图片的差异在一般的三维平台png代表的是带透明通道的纹理而jpg代表的是不带透明的纹理。透明纹理和不透明纹理虽然都能被渲染出来但是它们在三维模型组织、三维渲染等方面分家的。不透明对象由于只需要判断是离屏幕最近即可判断可见而不透明对象可能需要先进行空间排序还需要考虑与别的物体的混合模式Blend。因此他们需采用不同的渲染批次(DrawCall)。一旦渲染批次多了那么渲染效率就会降低。
2、WebGPU在透明对象的瓶颈
一般而言我们无法通过仅通过对象前后排序犹如PS中的图层排序从而做到让模型的透明计算正常。在WorldWind平台原来也是才基于物体排序技术但只能解决50%的问题。在那里经常遇到从透明窗户看外面的时候外面模型看不到的情况。在2019年Arcgis4.X的三维平台也会出现这种情况。
如果显存足够其实我们非常暴力的把每个像素点都存储所对应的三维点。但这种技术是很难通用的某个像素可能对应几十个甚至上百个三维投影点不可能先存储再排序在计算的。
下面这个代码记为公式1
下面是对N个投影点按距离排序最后计算颜色的过程非常粗暴
其中0是最远的点N是最近的单
color0p0*a0backgroundColor*(1-a0);
color1p1*a1color0*(1-a1);
....
colorNpN*ancolorNs1*(1-an)
3、Depth Peeling算法
^_^不要怕这个算法很好理解。
还是前面的公公式可见p1的颜色是最重要的颜色把握了p1就等于把握了半壁江山。Depth Peeling算法就是先从最重要的p1开始。已知p1是深度值最浅的一个像素可以采用第一次Pass渲染过程类似把画板全刷一次。接下来第二次Pass找到p2点以此类推可以设置最多寻找几层。
下面这张图就是用了4个Pass按距离寻找的三角面。可见这种做法解决的前面几层三角面的情况可以实现计算量少对性能要求低的情况。 另外由于公式1是从后往前而本算法是从往后因此在计算颜色的算法上需要调整。对公式1进行调整可得到如下规律
c0p0*a0b*(1-a0)
c1p1*a1c0*(1-a1)p1*a1p0*(1-a1)*a0b*(1-a0)*(1-a1)
c2p2*a2c1*(1-a2)p2*a2p1*a1*(1-a2)p0*a0*(1-a1)*(1-a2)b*(1-a0)*(1-a1)*(1-a2)
c3p3*a3c2*(1-a3)p3*a3p2*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)
c3p4*a4c3*(1-a4)p4*a4p3*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)
cnpn*anE(pi*ai*π(1-aj))....E表示累加π表示累乘。
---------------------------------------------------
p4*a4 p4*a4*m 其中m1
p3*a3*(1-a4) p3*a3*m 其中mm*(1-a4)
p2*a2*(1-a3)*(1-a4) p2*a2*m 其中mm*(1-a3)
p1*a1*(1-a2)*(1-a3)*(1-a4) p1*a1*m 其中mm*(1-a2)
可见在整个过程中仅需记录m即可实现从前往后的计算这是一个非常大的计算效率提升策略
