webgl最后渲染阶段:
原文章
片元着色器-模板测试-深度测试-混合测试-颜色缓冲区
模板测试(stencil test):
本质是镂空,核心是持有一个模板缓冲,每个像素和片段都有一个模板值,每个模板值是8位,值范围是0-255,也就是可以有256种不同的值,可以通过设置我们想要的模板值来丢弃或保留一个片段。
模板测试方法:
stencilFunc(Glenum func ,GLint ref ,GLuint mask) :用来控制stencil的测试方式,得出测试结果
第一个参数指定模板测试比较函数(gl.NEVER 总是不通过)
第二个参数 用来做模板测试的参考值
第三个参数 指定操作掩码(采用16进制或8进制),在测试时将ref mask 进行与运算,再将mask与模板缓冲中的值进行与运算,最后根据比较函数得出结果
stencilOp:根据测试结果决定要如何处理缓冲中的数据
stencilOp(Glenum fail ,Glenum zfail, Glenum zpass):
fail:指定当前模板测试不通过时的行为
zfail: 指定当前模板测试通过但是深度测试未通过的行为,允许值和默认值都跟fail相同
zpass:指定当前模板测试通过深度测试也通过的行为或者模板测试通过且没有开启深度测试的行为,允许值和默认值都跟fail相同
webgl模板测试默认是禁用
gl.enable(gl.STENCIL_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
例子:
设置一个面片的模板测试值为0,测试函数NEVEL
一个面片的模板测试值为1,测试函数NEVEL(让人物显示的面片ß)
设置人物材质测试值为1,测试函数EQUAL
深度测试(Depth Test)
深度缓冲,存储每个片段的深度值,将当前渲染的每一个片段的深度值与深度缓冲中的内容进行对比测试,测试失败则丢弃
深度缓冲是在片段着色器之后,也是在模板测试之后。在屏幕空间运行的,屏幕坐标与gl.viewport设置有关,gl_FragCoord.x y代表片段的屏幕空间坐标,z 是深度值
depthFunc
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
当深度测试通过之后会将当前片段的z值存入深度缓冲中,z 介于 0-1
混合测试:
多个有透明度的物体颜色混合(玻璃窗效果):启用混合需要关闭深度写入
混合方程:
sfactor:源因子
dfactor:目标因子