threejs 第四十四用 半透明问题的研究

threejs 第四十四用 半透明问题的研究

threejs交流群511163089

先看看真·大佬

CustomDepth和Pixeldepth Unreal里面有这个东西

然后看完之后 就是我的理解和思路了

CustomDepth小的情况 就是物体被挡住了 这时候可以剔除了

如果大 那就是在可见区域最前头 那保留自己的opacity值

我觉得实现的话 是先把不透明的绘制完了

再把半透明的绘制一个深度图 这一个就是能最终见到的最前面的形状构成的

再一个一个画

然后检测自己的深度和深度图的z 大的话就不是最前面的 然后如果比不透明的小 那也可以绘制 这里可以给个小一点的值让他的opacity很小 但是可以不剔除 或者剔了都行

假设这俩都是0.8的透明度 小的红色 大的蓝色

首先和不透明物体进行深度测试 检测通过后 没通过就画不出来

D=background  B=blue R=red

这个小的块 很明显中心在前面 如果按从远到近 先画了大的 才会画他

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA) 

最终色R*0.8+(B*0.8+D*0.2)*0.2=R*0.8+B*0.16+D*0.04 就是红色的了

正确值 B*0.8+0.2*(R*0.8+D*0.2)=B*0.8+0.16*R+0.04*D

按上面描述那种操作 绘制了一个半透明物体集的深度图

现在能够先有一个蓝块的表面的深度 那红色块是小于他的 则给他*0.2这个尝鲜值 opacity就是0.8*0.2 那么先画的蓝色

R*0.8*0.2+(1-0.8*0.2)*( B*0.8+D*0.2)=R*0.16+0.84*(B*0.8+D*0.2)=B*0.688+0.16*R+0.168*D

这样感觉上就可以接受的鸭子