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

threejs交流群511163089

CustomDepth和Pixeldepth Unreal里面有这个东西

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

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

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

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

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

再一个一个画

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

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

假设这俩都是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

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

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