首页 > Web开发 > 详细

WebGL学习笔记(十六):遮罩

时间:2019-11-17 18:15:57      阅读:127      评论:0      收藏:0      [点我收藏+]

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

模板缓冲

模板缓冲可以实现渲染剔除,但是剔除范围是基于上一次渲染的结果,且上一次的渲染也会进行显示(这么设定是为了实现特殊的显示效果),并不适合用来实现遮罩。

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);

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

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

WebGL学习笔记(十六):遮罩

原文:https://www.cnblogs.com/hammerc/p/11877013.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!