代码改变世界

WebGL学习笔记（十六）：遮罩

2019-11-17 16:47  阿诚de窝  阅读(2251)  评论(0)  编辑  收藏  举报

这里总结下几种WebGL中实现遮罩的方法。

模板缓冲

模板缓冲可以实现渲染剔除，但是我们之前的学习里，剔除范围是基于上一次渲染的结果，且上一次的渲染也会进行显示，这样的话并不适合用来实现遮罩。

我们想实现遮罩的话，是希望只绘制模板缓冲而不绘制颜色缓冲。

想要实现这样的效果，可以借助 colorMask 方法来实现（如果关闭了颜色缓冲的所有通道后，下一次绘制就不会改变颜色缓冲了），具体写法如下：

 1 // 关闭颜色缓冲的所有通道
 2 gl.colorMask(false, false, false, false);
 3 // 绘制遮罩, 更新模板缓冲数据
 4 gl.stencilFunc(gl.EQUAL, 1, 0xFF);
 5 gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR);
 6 gl.drawElements(...);
 7 gl.stencilFunc(gl.EQUAL, 1, 0xFF);
 8 // 开启颜色缓冲的所有通道
 9 gl.colorMask(true, true, true, true);
10 // 绘制图像, 受模板缓冲影响
11 gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
12 gl.drawElements(...);

scissor

仅绘制指定的矩形区域，可以用来实现简单的无旋转遮罩。

使用着色器

传入一张用来进行遮罩的图片，通过着色器判断这张图片的像素值，来决定当前的像素是否需要丢弃，还是进行alpha值的改变，可以实现任意形状的遮罩，缺点是对于较大的图片会出现掉帧的情况。

使用混合

blendfunc实现的遮罩效果是最简单的，首先绘制遮罩图的，遮罩图的blendfunc需要设置为:

mask:setBlendFunc(gl.ONE_MINUS_SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)

然后绘制被遮罩对象，其blendfunc需要设置为：

sprite:setBlendFunc(gl.ONE_MINUS_DST_ALPHA, gl.DST_ALPHA)

原理其实很简单，遮罩图绘制到framebuffer的时候只保留alpha值，而sprite绘制的时候使用遮罩的apha值。不过需要注意的是，如果使用该方法，需要保证opengl的Config中有配置alpha通道，例如在使用OpenGL ES的安卓环境中，需要设置

mGLSurfaceView.setEGLConfigChooser(8, 8, 8, 8, 16, 0);

否则，遮罩和图都无法被绘制出来。

这种方法其实也有缺点，如果被遮罩对象是透明的话，是没办法和底下的混合的。