WebGL深度测试与α融合
深度测试与α融合 本文是 WebGL电子书 的1.16节内容 大家都知道立方体的顶点数据经过顶点着色器、光栅、片元着色器等渲染管线单元处理后会得到立方体每个面的片元数据, 每个片元不仅包含RGB像素值,还有透明度分量A,片元的深度值Z,屏幕坐标(X,Y)等数据。 屏幕坐标(X,Y) 屏幕坐标指的是每一个片元的像素值在显示器canvas画布上的显示位置,如果一个网页上有多个canvas画布,或者打开多个包含canvas画布的网页窗口, 每一个引入WebGL的canvas的画布都有一个自己的屏幕坐标,这些不需要开发者管理控制,浏览器的WebGL图形系统会自动管理,每个canvas画布都有一个默认的帧缓存, 帧缓存颜色缓冲区中的数据会被图形显示系统扫描显示在帧缓存对应的canvas画布上。 片元的深度值Z 片元的深度值Z反应的是一个片元距离观察位置的远近,两个顶点之间的片元深度值Z来源与两个顶点z坐标值的插值计算,所有片元的深度值Z都存储在帧缓存的深度缓冲区中。 深度测试单元位于片元着色器之后,如果开启了渲染管线的深度测试单元,所有的片元会经过该功能单元的逐片元测试,通过比较片元深度值Z,WebGL图形系统默认沿着Z轴正方向观察, 同一个屏幕坐标位置的所有片元离观察点远的会被舍弃,只保留一个离眼睛近的片元,把它的像素值RGB存储到帧缓存的颜色缓冲区中。 如果渲染管线没有开启深度测试单元,