WebGL学习笔记(十一):混合和透明
到目前为止我们绘制了不少模型,用到了不少颜色,颜色中有四个分量(RGBA),其中的A分量表示透明度,这个分量目前为止我们还没有真正的用到;
A分量,表示的是当前的透明度,如果设定为 0.5 就会半透明,可以看到半透明的模型,也可以看见模型后面的东西;
开启混合
要实现透明,需要开启混合,会使用到下面的两个方法:
// 开启混合
gl.enable(gl.BLEND);
// 设定混合效果
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
源因子和目标因子是可以通过gl.blendFunc函数来进行设置的
gl.blendFunc有两个参数,前者表示源因子,后者表示目标因子。这两个参数可以是多种值,下面介绍比较常用的几种。
- gl.ZERO:表示使用0.0作为因子,实际上相当于不使用这种颜色参与混合运算。
- gl.ONE:表示使用1.0作为因子,实际上相当于完全的使用了这种颜色参与混合运算。
- gl.SRC_ALPHA:表示使用源颜色的alpha值来作为因子。
- gl.DST_ALPHA:表示使用目标颜色的alpha值来作为因子。
- gl.ONE_MINUS_SRC_ALPHA:表示用1.0减去源颜色的alpha值来作为因子。
- gl.ONE_MINUS_DST_ALPHA:表示用1.0减去目标颜色的alpha值来作为因子。
举例来说
- 如果设置了gl.blendFunc(gl.ONE, gl.ZERO);,则表示完全使用源颜色,完全不使用目标颜色,因此画面效果和不使用混合的时候一致(当然效率可能会低一点点)。如果没有设置源因子和目标因子,则默认情况就是这样的设置。
- 如果设置了gl.blendFunc(gl.ZERO, gl.ONE);,则表示完全不使用源颜色,因此无论你想画什么,最后都不会被画上去了。(但这并不是说这样设置就没有用,有些时候可能有特殊用途)
- 如 果设置了gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);,则表示源颜色乘以自身的alpha 值,目标颜色乘以1.0减去源颜色的alpha值,这样一来,源颜色的alpha值越大,则产生的新颜色中源颜色所占比例就越大,而目标颜色所占比例则减 小。这种情况下,我们可以简单的将源颜色的alpha值理解为“不透明度”。这也是混合时最常用的方式。
- 如果设置了gl.blendFunc(gl.ONE, gl.ONE);,则表示完全使用源颜色和目标颜色,最终的颜色实际上就是两种颜色的简单相加。例如红色(1, 0, 0)和绿色(0, 1, 0)相加得到(1, 1, 0),结果为黄色。
注意:所谓源颜色和目标颜色,是跟绘制的顺序有关的。假如先绘制了一个红色的物体,再在其上绘制绿色的物体。则绿色是源颜色,红色是目标颜色。如果顺序反过来,则红色就是源颜色,绿色才是目标颜色。在绘制时,应该注意顺序,使得绘制的源颜色与设置的源因子对应,目标颜色与设置的目标因子对应。
绘制半透明三角形
核心代码如下:
// 开启混合
gl.enable(gl.BLEND);
// 设定混合模式为透明模式
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
示例请点击:https://hammerc.github.io/dou3d-ts/learning/learningNotes/lesson_12/LookAtBlendedTriangles.html
绘制透明立方体
需要注意的是,透明的图像绘制时,不能开启深度测试,开启深度测试,无论是否透明,靠后的颜色都会丢失;
如果已经开启了深度测试(用于绘制不透明的图像),还可以调用depthMask来临时开启和关闭深度测试,调用 gl.depthMask(false); 可以关闭深度测试;
另外,绘制透明立方体时,如果需要显示背面,就关闭剔除模式,需要不要显示背面就开启剔除模式并设定为剔除背面;
示例请点击:https://hammerc.github.io/dou3d-ts/learning/learningNotes/lesson_12/BlendedCube.html
WebGL学习笔记(十一):混合和透明的更多相关文章
- python3.4学习笔记(十一) 列表、数组实例
python3.4学习笔记(十一) 列表.数组实例 #python列表,数组类型要相同,python不需要指定数据类型,可以把各种类型打包进去#python列表可以包含整数,浮点数,字符串,对象#创建 ...
- Go语言学习笔记十一: 切片(slice)
Go语言学习笔记十一: 切片(slice) 切片这个概念我是从python语言中学到的,当时感觉这个东西真的比较好用.不像java语言写起来就比较繁琐.不过我觉得未来java语法也会支持的. 定义切片 ...
- webgl学习笔记五-纹理
写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 术语 : 纹理 :图像 图形装配区域 :顶点着色器顶点坐标 ...
- webgl学习笔记四-动画
写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...
- webgl学习笔记三-平移旋转缩放
写在前面 建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 平移 1.关键点说明 顶点着色器需要加上 uniform vec4 u_Translation ...
- webgl学习笔记二-绘图多点
写在前面 建议先看下第一篇webgl学习笔记一-绘图单点 第一篇文章,介绍了如何用webgl绘图一个点.接下来本文介绍的是如何绘制多个点.形成一个面. webgl提供了一种很方便的机制,即缓冲区对象, ...
- WebGL学习笔记二——绘制基本图元
webGL的基本图元点.线.三角形 gl.drawArrays(mode, first,count) first,代表从第几个点开始绘制即顶点的起始位置 count,代表绘制的点的数量. mode,代 ...
- WebGL学习笔记(2)
根据上一篇学习笔记,理解WebGL的工作原理及基本调用代码后,可以开始研究3D顶点对象的缩放.旋转.以及对对象进行可交互(鼠标或键盘控制)的旋转或者缩放. 要理解对象的旋转/缩放需要首先学习矩阵的计算 ...
- WEBGL学习笔记(七):实践练手1-飞行类小游戏之游戏控制
接上一节,游戏控制首先要解决的就是碰撞检测了 这里用到了学习笔记(三)射线检测的内容了 以鸟为射线原点,向前.上.下分别发射3个射线,射线的长度较短大概为10~30. 根据上一节场景的建设,我把y轴设 ...
- JavaScript权威设计--JavaScript函数(简要学习笔记十一)
1.函数调用的四种方式 第三种:构造函数调用 如果构造函数调用在圆括号内包含一组实参列表,先计算这些实参表达式,然后传入函数内.这和函数调用和方法调用是一致的.但如果构造函数没有形参,JavaScri ...
随机推荐
- 修改pyechart生成的HTML内容大小方法
1.目前安装pyechart后生成的图片默认大小为 width=800, height=400, 如图 2.想修改内容大小:找到C:\python\Lib\site-packages\pyechart ...
- 将python图片转为二进制文本的实例
https://www.jb51.net/article/155342.htm 写在最前面: 我在研究机器学习的过程中,给的数据集是手写数字图片被处理后的由0,1表达的txt文件,今天写一写关于图片转 ...
- win10和linux引导问题(没有系统选择界面)
由于最近学习嵌入式和c模块化编程,需要使用Linux系统,但是编程之外,WIN10还是主力系统,决定装双系统. 往常一样,百度装双系统方法,网上千篇一律,大都一个套路. 首先,WIN10 下,新开一个 ...
- Matplotlib同时绘制多张图片
我现在有一组图片,一共100张图片,每张大小是200*200,即imgs.shape=100*200*200*3 (注意通道数在最后一维). 我需要同时绘制这100张图片,而且每张图片需要写上对应的名 ...
- python预课01 turtle学习
Turtle命令: import turtle # 导入模块 t = turtle.Pen() # 生成画笔 t.speed() #设置速度0-10:0最快 t.forward() # 前进 t.ba ...
- hiveserver2和zookeeper的HA搭建(转)
最近公司新项目申请资源,虚拟机资源打开时候使用source login.sh的脚本来进行登录注册,好奇心驱使下看了看里面的shell脚本,使用到了hiveserver2的zookeeper连接,百度一 ...
- Synchronized性质
Synchronized可重入性质 * 什么是可重入:指的是同一线程的外层函数获得锁之后,内层函数可以直接再次获取该锁,而不是释放当前的锁去重新获取一个锁,这是它的一个优点 * 好处:避免死锁,提升封 ...
- 使用async/await消除callback hell
使用async/await消除callback hell 通过Future回调中再返回Future的方式虽然能避免层层嵌套,但是还是有一层回调,有没有一种方式能够让我们可以像写同步代码那样来执行异步任 ...
- Worldview in Context
Worldview in Context Figures 1 and 2 provide a basis for a deeper understanding of worldview. The se ...
- vue cli4.0 配置环境变量
温馨提示:本文只适用于vue-cli 3.0 及以上的版本哦~ ------------------正文开始------------------ 开发项目时,经常会需要在不同环境中切换.那么我们如何配 ...