发布于: 2024-6-20最后更新: 2024-8-4字数 00 分钟

type
status
date
slug
summary
tags
category
icon
password
😀
在计算机图形渲染中,有一个极其常见且重要的问题——渲染顺序问题
在只有不透明物体或是全透明物体的情况下,处理方式十分简单:不透明物体直接覆盖掉后面的像素;全透明物体本就不会被观察到所以不必渲染。
 
但是,如果场景里存在有半透明物体呢? 此时就比较复杂了: 半透明物体在不透明物体之前? 半透明物体在不透明物体之后? 多个半透明物体之间相互遮挡? 半透明物体自身内部的遮挡(双面渲染)?
 
下面这篇文章就讲述了技术工作者们是如何一步步解决半透明物体的渲染问题的:
 
 
 

📝 内容结论(省流)


对于详细的理论推导,可以直接查看文章原内容 (个人认为已经讲解得十分易懂了),下面主要总结一些有用的结论,方便我们直接的实际运用。
 

半透明物体和不透明物体之间的渲染顺序


  • 半透明物体需要关闭深度写入,但无需关闭深度测试 ( 因为半透明物体不能直接写入深度否则可能直接完全覆盖掉后面的物体;不关闭深度测试是因为半透明物体也是可以被前面的不透明物体直接覆盖的,这种情况下可以直接剔除从而避免过度绘制 )
 
  • 当半透明物体在不透明物体之前时,应当按照由远及近的顺序进行渲染
notion image
( 这是因为在由近及远的渲染顺序下,半透明物体(假定为物体A)关闭深度写入后,它的后面存在的不透明物体B并不知道前面有A,就会直接覆盖掉半透明物体A;如果按照由远及近的顺序,那么位于较后的B会正常渲染且写入深度,而较前的半透明A仍可以正常通过深度测试(但不会写入深度缓冲)然后与已存在的B进行像素混合 )
 
  • 当半透明物体在不透明物体之后时,仍然应当按照由远及近的顺序进行渲染
notion image
( 此种情况下,如果按照由远及近的顺序绘制,那么透明A先进行绘制(但不写入深度缓冲),接着绘制不透明物体B,此时不透明B可以直接覆盖掉后面的A,表现为正常的渲染结果。但这样就造成了A的不必要绘制:因为A在绘制时B还没有写入深度,因此计算机并不知道A前面有一个不透明B,就直接绘制了A,但最后A还是被覆盖掉了,相当于多余的渲染。 ) 思考一下,如果我们采用由近及远的顺序,B先渲染并且写入深度,那么在其后的A就自然无法通过深度测试,也就不进入最终的绘制了,这样就减少了过度绘制。但问题就在于采用多个渲染顺序而不是统一的顺序,容易造成渲染的混乱——我们当然希望使用一致的方式处理这些问题
 
  • 为了定义统一的渲染顺序且得到正确的结果,我们仍然按照由远及近的渲染顺序,但是先渲染不透明物体,再渲染半透明物体
notion image
( 这样做的好处在于,先渲染了不透明物体B,之后再渲染半透明物体A时:如果A在B之前,那么会正常进行混合;如果A在B之后,那么A无法通过深度测试从而直接剔除、避免了过度绘制 )
 
notion image
( 这也是为什么我们在Render Queue中看到Transparent的渲染顺序会更靠后 )
 
 
 
 

多个半透明物体叠加时


  • 仍然采用由远及近的渲染顺序
notion image
( 之所以不采用由近及远,是因为如果较前的半透明A渲染后,由于它不会写入深度,那么接下来较后的半透明B就会在它之上进行混合,导致看起来B在A的前面——即较近的半透物被较远的半透物盖在其上了。因此仍然需要由远及近进行渲染 )
 
 
最终总结:
notion image
 
 
 
 

🤗 使用渲染管线实现透明效果


目前一般来说有两种方式:1. 透明测试 2. 透明混合
 
透明测试是一种伪半透明渲染 (只能实现不透或全透,非0即1),我们提前设定好一个Alpha阈值,渲染时将大于该阈值的部分渲染为不透明,将小于该阈值的部分渲染为完全透明
 
透明混合是更完善的透明渲染方案: 它会将新渲染出来的图像和已存在的进行合并
 
 
 

半透明物体自身内部的遮挡


半透明物体也可以透过自身内部而看到背面,这种情况下就需要启用双面渲染,也就是将CullMode设置为Cull Off;同时为了避免半透明物体的背面盖在了正面之上,我们还需要确保物体背面先渲染,正面后渲染,然后才能得到正确的透明混合结果
notion image
 
notion image
 
 
 
 

📎 实际案例


以透明混合的渲染方式为例:
notion image
使用它来解决半透明网格体的双面渲染问题:
特效制作中如何实现一个双面半透明网格体
 

Loading...
粒子材质的常用渲染模式

🌠粒子材质的常用渲染模式

材质中关于不透明渲染和半透明渲染的使用

特效制作中如何实现一个双面半透明网格体

特效制作中如何实现一个双面半透明网格体


公告
🎉热烈欢迎🎉
-- 欢迎来到大咩的小屋 ---
 
**近期更新**
  • 更新了一些摄影作品
  • 修复了游戏作品集里的视频预览失败问题
  • 新增了若干篇有关图形渲染和特效相关的文章