WebGL学习笔记(十六):遮罩
2024-09-02 02:16:41
这里总结下几种WebGL中实现遮罩的方法。
模板缓冲
模板缓冲可以实现渲染剔除,但是我们之前的学习里,剔除范围是基于上一次渲染的结果,且上一次的渲染也会进行显示,这样的话并不适合用来实现遮罩。
我们想实现遮罩的话,是希望只绘制模板缓冲而不绘制颜色缓冲。
想要实现这样的效果,可以借助 colorMask 方法来实现(如果关闭了颜色缓冲的所有通道后,下一次绘制就不会改变颜色缓冲了),具体写法如下:
// 关闭颜色缓冲的所有通道
gl.colorMask(false, false, false, false);
// 绘制遮罩, 更新模板缓冲数据
gl.stencilFunc(gl.EQUAL, 1, 0xFF);
gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR);
gl.drawElements(...);
gl.stencilFunc(gl.EQUAL, 1, 0xFF);
// 开启颜色缓冲的所有通道
gl.colorMask(true, true, true, true);
// 绘制图像, 受模板缓冲影响
gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
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(, , , , , );
否则,遮罩和图都无法被绘制出来。
这种方法其实也有缺点,如果被遮罩对象是透明的话,是没办法和底下的混合的。
最新文章
- MySql类似Oracle的dual虚拟表
- java分享第二天(变量及命名规范)
- 技术英文单词贴--C
- 20145225《Java程序设计》 实验三 ";敏捷开发与XP实践";
- inux下文件权限设置中的数字表示权限,比如777,677等,这个根据什么得来的
- 条款24:若所有的函数参数可能都需要发生类型转换才能使用,请采用non-member函数
- Android应用开发学习笔记之菜单
- hdu 4104
- FAT32,NTFS,EXT3,支持的最大分区和单个文件大小?
- [code]最长回文子串
- H5_ 多媒体video,autio使用示例
- Spring框架[一]——spring概念和ioc入门(ioc操作xml配置文件)
- 18-09-20 关于Xlwings读写基础1
- 【C#实现漫画算法系列】-判断 2 的乘方
- MXNET:分类模型
- 开源unittest测试报告源码BSTestRunner.py
- 数据科学VS机器学习
- input hidden的作用
- [转载]百分之百自动登录2345王牌技术员联盟源代码(delphi)
- 操作系统的三个接口 shell gui api
热门文章
- Omapl138中AIS文件分析(参照Using the OMAP-L138 Bootloader)(转)
- kubernetes集群证书过期之后--转发
- 基于PXE网络启动的Linux系统自动化安装
- Kali 安装tightvncserver
- (十一)Kubernetes StatefulSet控制器
- WPF系列 —— 控件添加依赖属性
- python应用-输入三个数,输出其最大值
- JMeter5.1开发Java协议接口脚本【待完成】
- servlet 容器与servlet
- Good Article Good sentence HDU - 4416 (后缀自动机)