这里总结下几种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(, , , , , );

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

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

WebGL学习笔记(十六):遮罩的更多相关文章

  1. python3.4学习笔记(十六) windows下面安装easy_install和pip教程

    python3.4学习笔记(十六) windows下面安装easy_install和pip教程 easy_install和pip都是用来下载安装Python一个公共资源库PyPI的相关资源包的 首先安 ...

  2. (C/C++学习笔记) 十六. 预处理

    十六. 预处理 ● 关键字typeof 作用: 为一个已有的数据类型起一个或多个别名(alias), 从而增加了代码的可读性. typedef known_type_name new_type_nam ...

  3. WebGL学习笔记(六):纹理贴图

    只可以绘制纯色的模型是不够的,为了呈现出更真实的模型,我们还需要通过纹理贴图给模型进行上色. 丢失上下文 GPU作为一种公用资源,是会被多个进程同时使用的,在资源不足的情况下(比如PC或手机系统进入休 ...

  4. JavaScript权威设计--CSS(简要学习笔记十六)

    1.Document的一些特殊属性 document.lastModified document.URL document.title document.referrer document.domai ...

  5. MySQL学习笔记十六:锁机制

    1.数据库锁就是为了保证数据库数据的一致性在一个共享资源被并发访问时使得数据访问顺序化的机制.MySQL数据库的锁机制比较独特,支持不同的存储引擎使用不同的锁机制. 2.MySQL使用了三种类型的锁机 ...

  6. python 学习笔记十六 django深入学习一 路由系统,模板,admin,数据库操作

    django 请求流程图 django 路由系统 在django中我们可以通过定义urls,让不同的url路由到不同的处理函数 from . import views urlpatterns = [ ...

  7. SharpGL学习笔记(十六) 多重纹理映射

    多重纹理就把多张贴图隔和在一起.比如下面示例中,一个表现砖墙的纹理,配合一个表现聚光灯效果的灰度图,就形成了砖墙被一个聚光灯照亮的效果,这便是所谓的光照贴图技术. 多重纹理只在OpenGL扩展库中才提 ...

  8. yii2源码学习笔记(十六)

    Module类的最后代码 /** * Registers sub-modules in the current module. * 注册子模块到当前模块 * Each sub-module shoul ...

  9. Swift学习笔记十六:协议

    Protocol(协议)用于统一方法和属性的名称,而不实现不论什么功能. 协议可以被类.枚举.结构体实现.满足协议要求的类,枚举,结构体被称为协议的遵循者. 遵循者须要提供协议指定的成员,如属性,方法 ...

  10. PHP学习笔记十六【方法】

    <?php //给一个函数传递基本数据类型 $a=90; $b=90.8; $c=true; $d="hello world"; function test1($a,$b,$ ...

随机推荐

  1. 记录SQLAlchemy的基本使用

    代码 # -*- coding: utf-8 -*- from sqlalchemy import Column, String, create_engine from sqlalchemy.orm ...

  2. rest framework 之视图

    一.APIView APIView 直接继承 View(Django 内置的 View),也就是说 APIView 是最贴近原生 Django 的 View 的. 因此可定制程度高,根据请求方法不同执 ...

  3. 【异常】微博生成短链异常{"request":"/2/short_url/shorten.json","error_code":"10014","error":"Insufficient app permissions!"}

    一.之前的调用方式 这种方式用了大约有一年时间,之前没有问题,但是2019-8-28号突然不行了,可能是由于微博对该接口的调用做了限制.不允许通过传递source参数的方式进行请求 该接口微博API文 ...

  4. LaTeX的安装并使其能够编译中文

    首先,感谢博客园团队帮我找回这篇被我误删除的博客.找回方法:发送邮件至"contact@cnblogs.com",然后就可以在工作人员的帮助下找回了.下面介绍LaTeX的安装并使其 ...

  5. sql中多条件进行排序的问题

    order by后边的字段并不是唯一的,支持多个,按照你排序的先后顺序写就可以了.另外按照每个字段的升序和降序同样支持.默认是升序的.如下order by column1(asc or desc),c ...

  6. Java并发(八)计算线程池最佳线程数

    目录 一.理论分析 二.实际应用 为了加快程序处理速度,我们会将问题分解成若干个并发执行的任务.并且创建线程池,将任务委派给线程池中的线程,以便使它们可以并发地执行.在高并发的情况下采用线程池,可以有 ...

  7. 201671010446姚良实验十四团队项目评审&课程总结

    实验十四 团队项目评审&课程学习总结 项目 内容 这个作业属于哪个课程 http://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cn ...

  8. python 连接 redis cluster 集群

    一. redis集群模式有多种, cluster模式只是其中的一种实现方式, 其原理请自行谷歌或者百度, 这里只举例如何使用Python操作 redis cluster 集群 二. python 连接 ...

  9. spring是什么?

    spring是什么? 1.编程范式的实践 dsl.注解.aop技术,扩展java语言的表达能力: dsl:xml配置+注解配置,扩展工程的组织能力: 2.基础组件: 常用组件的便捷封装,方便进行二次开 ...

  10. service里无法注入mapper,mapper空指针

    被困扰了一天,终于解决了,记录一下 下面是mapper的代码 @Mapper public interface ProductDao { @Select("select * from pro ...