JavaScript WebGL 图片透明处理的方式

目录
  • 引子
  • 关于透明
  • α 混合
  • 参考资料

引子

JavaScript WebGL 使用图片疑惑点中提到两张图片叠加，默认情况下，即使有透明的区域也不会透过看到。现在就来看这个透明的处理。

关于透明

说到透明，在颜色编码中由 Alpha 通道负责，透明度存储方式有：

  • Premultiplied Alpha ：表示颜色信息在存储的时候会将透明信息与 RGB 相乘，比如 RGB 是 (1, 1, 1)，透明度为 0.5 ，那么存储时为：(0.5, 0.5, 0.5, 0.5) 。
  • Non-premultiplied Alpha ： 表示 RGB 与透明信息分别单独存储，不会相乘，比如 RGB 是 (1, 1, 1)，透明度为 0.5 ，那么存储时为：(1, 1, 1, 0.5)

WebGL 纹理预处理使用 pixelStorei 方法指定颜色透明处理方式，如果想要使用 Premultiplied Alpha 方式：

gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

WebGL 透明处理方式之一是使用 α 混合。

α 混合

α 混合是使用 α 值(RGBA 中的 A)混合两个以上物体颜色的过程。在这个场景下，绘制了多个纹理且有重叠的地方，假设先绘制纹理 C ，然后再绘制纹理 D ，那么纹理 D 就是源颜色（source color）， 纹理 C 就是目标颜色（destination color）。

想要使用该功能，首先要开启：

gl.enable(gl.BLEND);

然后指定混合的方式有：

blendEquation

void blendEquation(enum mode)

mode 取值有：

  • FUNC_ADD : 源颜色分量与目标颜色分量相加。
  • FUNC_SUBTRACT : 源颜色分量减去目标颜色分量。
  • FUNC_REVERSE_SUBTRACT : 目标颜色分量减去源颜色分量。

这个方法只指定了混合的方式，如果要看到最终的效果，需要跟 blendFunc 或 blendFuncSeparate 方法配合一起使用。看看这篇文章最下面的伪代码逻辑会加深理解。

这是示例。

blendEquationSeparate

void blendEquationSeparate(enum modeRGB, enum modeAlpha)

这个方法的两个参数取值与 blendEquation 方法参数取值一样，区别是把颜色分成了 RGB 和 A 单独的两部分。

blendFunc

void blendFunc(enum sfactor, enum dfactor);
  • sfactor : 常量，源颜色在混合颜色中的权重因子，比 dfactor 多一个值 SRC_ALPHA_SATURATE 。
  • dfactor : 常量，目标颜色在混合颜色中的权重因子。

混合颜色的计算方法是：

混合后颜色 = 源颜色 * sfactor + 目标颜色 * dfactor

这里计算针对的是每个颜色分量，下面设定 S 代码源颜色，D 代表目标颜色，各个分量用小写 rgba 表示，下面看看权重因子部分常量取值：

常量 R 分量 G 分量 B 分量 A 分量
ZERO 0 0 0 0
ONE 1 1 1 1
SRC_COLOR S.r S.g S.b S.a
ONE_MINUS_SRC_COLOR (1-S.r) (1-S.g) (1-S.b) (1-S.a)
DST_COLOR D.r D.g D.b D.a
ONE_MINUS_DST_COLOR (1-D.r) (1-D.g) (1-D.b) (1-D.a)
SRC_ALPHA S.a S.a S.a S.a
ONE_MINUS_SRC_ALPHA (1-S.a) (1-S.a) (1-S.a) (1-S.a)
DST_ALPHA D.a D.a D.a D.a
ONE_MINUS_DST_ALPHA (1-D.a) (1-D.a) (1-D.a) (1-D.a)

还有可以配合方法 blendColor(red, green, blue, alpha) 的常量取值：

常量 R 分量 G 分量 B 分量 A 分量
CONSTANT_COLOR red green blue alpha
ONE_MINUS_CONSTANT_COLOR (1-red) (1-green) (1-blue) (1-alpha)
CONSTANT_ALPHA alpha alpha alpha alpha
ONE_MINUS_CONSTANT_ALPHA (1-alpha) (1-alpha) (1-alpha) (1-alpha)

如果不使用 blendColor 指定分量，也是可以使用这些常量，因为有默认值：

gl.getParameter(gl.BLEND_COLOR) // 默认对应分量都是 0

关于第一个参数多的取值 SRC_ALPHA_SATURATE ：

常量 R 分量 G 分量 B 分量 A 分量
SRC_ALPHA_SATURATE min(S.a, 1-D.a) min(S.a, 1-D.a) min(S.a, 1-D.a) 1

下面这些是示例：

  • 没有使用 blendColor 方法的示例。
  • 配合使用 blendColor 方法的示例。

blendFuncSeparate

void blendFuncSeparate(enum srcRGB, enum dstRGB, enum srcAlpha, enum dstAlpha)

这个方法参数取值与 blendFunc 方法参数取值一样，区别是把颜色分成了 RGB 和 A 单独的两部分。

Back to top

参考资料

WebGL绘制详解之七：Blend

Texture Maps

Texture Mapping Using Images

WebGL and Alpha

Transparency (and Alpha Blending)

WEBGL, BLENDING, AND WHY YOU'RE PROBABLY DOING IT WRONG

到此这篇关于JavaScript WebGL 图片透明处理的文章就介绍到这了,更多相关js图片透明处理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 基于js判断浏览器是否支持webGL

    起因是我之前开发的网页,用到了three.js制作了一个3d的旋转球体效果. 在各种浏览器上运行都没问题,在IE上也做了兼容代码. 但是今天接电话,老板说你这网页在xp上不显示啊.IE上好使.google浏览器不好使. 于是开始解决问题,不禁陷入了沉思.what?网页显示难道还与操作系统有关?google竟然不好使? 于是搭建一个xp虚拟机. 于是下载一个chorme. 惊奇的发现并不能安装最新版本的chrome. 哦?一定是xp上安装的低版本chrome而那时候的chrome还不支持webGL

  • WebGL three.js学习笔记之阴影与实现物体的动画效果

    实现物体的旋转.跳动以及场景阴影的开启与优化 本程序将创建一个场景,并实现物体的动画效果 运行的结果如图: 运行结果 完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Three.js</title> <script src="../../../Import/three.js

  • JS实现的透明度渐变动画效果示例

    JS实现的透明度渐变动画效果示例

    本文实例讲述了JS实现的透明度渐变动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS透明度变化效果</title> <style> body{ margin: 0px; padding: 0px; } .redb{ width:200px; height: 20

  • WebGL学习教程之Three.js学习笔记(第一篇)

    webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染. WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏. 原生的WebGl比较复杂,主要通过对顶点着色器和片元着色器的操作,来实现渲染,但实现起来比较复杂,需要一定的数学基础,但更多的是需要学习

  • JavaScript WebGL 图片透明处理的方式

    目录 引子 关于透明 α 混合 参考资料 引子 JavaScript WebGL 使用图片疑惑点中提到两张图片叠加,默认情况下,即使有透明的区域也不会透过看到.现在就来看这个透明的处理. Origin My GitHub 关于透明 说到透明,在颜色编码中由 Alpha 通道负责,透明度存储方式有: Premultiplied Alpha :表示颜色信息在存储的时候会将透明信息与 RGB 相乘,比如 RGB 是 (1, 1, 1),透明度为 0.5 ,那么存储时为:(0.5, 0.5, 0.5,

  • 基于JavaScript实现图片剪切效果

    基于JavaScript实现图片剪切效果

    学会如何获取鼠标的坐标位置以及监听鼠标的按下.拖动.松开等动作事件,从而实现拖动鼠标来改变图片大小. 还可以学习css中的clip属性. 一.CSS实现图片不透明及裁剪效果. 图片剪切三层结构 1.第一层opacity,给图层设置透明度 2.第二层clip,clip属性:对图片进行裁剪,实现图像的一部分显示,其他部分进行隐藏 3.第三层选取框absolute(与第二层重叠的),包括八个触点的效果 html代码: <div id="box"> <img src=&quo

  • 值得分享的JavaScript实现图片轮播组件

    本文实例为大家分享了JavaScript实现图片轮播组件的使用方法,供大家参考,具体内容如下 效果: 自动循环播放图片,下方有按钮可以切换到对应图片. 添加一个动画来实现图片切换. 鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片. 鼠标移开图片区域时,从当前位置继续轮播. 提供一个接口,可以设置轮播方向,是否循环,间隔时间. 点击查看demo 对HTML.CSS的要求: <div class="carousel-box"> <div class=&qu

  • android绘制圆形图片的两种方式示例

    android绘制圆形图片的两种方式示例

    android绘制圆形图片的两种方式 看下效果先 下面有完整的示例代码 使用BitmapShader(着色器) 我们在绘制view 的时候 就是小学上美术课 用水彩笔在本子上画画 使用着色器绘制圆形图片最简单的理解方式 就是把bitmap当做一种颜色 设置给paint ,paint都已经有颜色了 你想让它方了,圆了,扁了 还不是看你心情 canvas调用那个方法咯 实现的大致思路如下: 1. 创建一个类 继承imageView 重写onDraw() 2. 获取到bitmap图片 3. 计算图片的

  • Javascript获取图片原始宽度和高度的方法详解

    Javascript获取图片原始宽度和高度的方法详解

    前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法. 如下: <img id="img" src="1.jpg"> <script type="text/javascript"> var img

  • javascript实现图片上传前台页面

    这篇文章主要通过代码分析javascript实现图片上传前台页面,废话不多说了,直接贴代码了. 代码示例一: <script> //检查图片的格式是否正确,同时实现预览 function setImagePreview(obj, localImagId, imgObjPreview) { var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上传的文件类型 if (obj.value == '') { $.messager

  • JavaScript实现图片轮播组件代码示例

    JavaScript实现图片轮播组件代码示例

    本文介绍了JavaScript实现图片轮播组件,废话不多说了直接看下面: 效果: 自动循环播放图片,下方有按钮可以切换到对应图片. 添加一个动画来实现图片切换. 鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片. 鼠标移开图片区域时,从当前位置继续轮播. 提供一个接口,可以设置轮播方向,是否循环,间隔时间. 对HTML.CSS的要求: <div class="carousel-box"> <div class="carousel"&g

  • JavaScript前端图片加载管理器imagepool使用详解

    JavaScript前端图片加载管理器imagepool使用详解

    前言 imagepool是一款管理图片加载的JS工具,通过imagepool可以控制图片并发加载个数. 对于图片加载,最原始的方式就是直接写个img标签,比如:<img src="图片url" />. 经过不断优化,出现了图片延迟加载方案,这回图片的URL不直接写在src属性中,而是写在某个属性中,比如:<img src="" data-src="图片url" />.这样浏览器就不会自动加载图片,等到一个恰当的时机需要加载

  • jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】

    本文实例讲述了jQuery实现响应鼠标事件的图片透明效果.分享给大家供大家参考,具体如下: 实现的思想: 1.当鼠标放在图片上面的时候触发mouseover mouseenter两个事件(图片变得透明) 2.当鼠标离开图片的时候触发mouseleave mouseout两个事件(图片变为不透明) 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or

  • jquery加载图片时以淡入方式显示的方法

    本文实例讲述了jquery加载图片时以淡入方式显示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title></title> </head> <script type="text/java

随机推荐