We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
JavaScript WebGL 使用图片疑惑点中提到两张图片叠加,默认情况下,即使有透明的区域也不会透过看到。现在就来看这个透明的处理。
说到透明,在颜色编码中由 Alpha 通道负责,透明度存储方式有:
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);
然后指定混合的方式有:
void blendEquation(enum mode)
mode 取值有:
mode
这个方法只指定了混合的方式,如果要看到最终的效果,需要跟 blendFunc 或 blendFuncSeparate 方法配合一起使用。看看这篇文章最下面的伪代码逻辑会加深理解。
blendFunc
blendFuncSeparate
这是示例。
void blendEquationSeparate(enum modeRGB, enum modeAlpha)
这个方法的两个参数取值与 blendEquation 方法参数取值一样,区别是把颜色分成了 RGB 和 A 单独的两部分。
blendEquation
void blendFunc(enum sfactor, enum dfactor);
SRC_ALPHA_SATURATE
混合颜色的计算方法是:
混合后颜色 = 源颜色 * sfactor + 目标颜色 * dfactor
这里计算针对的是每个颜色分量,下面设定 S 代码源颜色,D 代表目标颜色,各个分量用小写 rgba 表示,下面看看权重因子部分常量取值:
还有可以配合方法 blendColor(red, green, blue, alpha) 的常量取值:
如果不使用 blendColor 指定分量,也是可以使用这些常量,因为有默认值:
blendColor
gl.getParameter(gl.BLEND_COLOR) // 默认对应分量都是 0
关于第一个参数多的取值 SRC_ALPHA_SATURATE :
下面这些是示例:
void blendFuncSeparate(enum srcRGB, enum dstRGB, enum srcAlpha, enum dstAlpha)
这个方法参数取值与 blendFunc 方法参数取值一样,区别是把颜色分成了 RGB 和 A 单独的两部分。
最近看了《Ron's Gone Wrong》,讲了一个温馨的故事,让我想起了《超能陆战队》。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
目录
引子
JavaScript WebGL 使用图片疑惑点中提到两张图片叠加,默认情况下,即使有透明的区域也不会透过看到。现在就来看这个透明的处理。
关于透明
说到透明,在颜色编码中由 Alpha 通道负责,透明度存储方式有:
WebGL 纹理预处理使用 pixelStorei 方法指定颜色透明处理方式,如果想要使用 Premultiplied Alpha 方式:
WebGL 透明处理方式之一是使用 α 混合。
α 混合
α 混合是使用 α 值(RGBA 中的 A)混合两个以上物体颜色的过程。在这个场景下,绘制了多个纹理且有重叠的地方,假设先绘制纹理 C ,然后再绘制纹理 D ,那么纹理 D 就是源颜色(source color), 纹理 C 就是目标颜色(destination color)。
想要使用该功能,首先要开启:
然后指定混合的方式有:
blendEquation
mode
取值有:这个方法只指定了混合的方式,如果要看到最终的效果,需要跟
blendFunc
或blendFuncSeparate
方法配合一起使用。看看这篇文章最下面的伪代码逻辑会加深理解。这是示例。
blendEquationSeparate
这个方法的两个参数取值与
blendEquation
方法参数取值一样,区别是把颜色分成了 RGB 和 A 单独的两部分。blendFunc
SRC_ALPHA_SATURATE
。混合颜色的计算方法是:
这里计算针对的是每个颜色分量,下面设定 S 代码源颜色,D 代表目标颜色,各个分量用小写 rgba 表示,下面看看权重因子部分常量取值:
还有可以配合方法 blendColor(red, green, blue, alpha) 的常量取值:
如果不使用
blendColor
指定分量,也是可以使用这些常量,因为有默认值:关于第一个参数多的取值
SRC_ALPHA_SATURATE
:下面这些是示例:
blendColor
方法的示例。blendColor
方法的示例。blendFuncSeparate
这个方法参数取值与
blendFunc
方法参数取值一样,区别是把颜色分成了 RGB 和 A 单独的两部分。参考资料
🗑️
最近看了《Ron's Gone Wrong》,讲了一个温馨的故事,让我想起了《超能陆战队》。
The text was updated successfully, but these errors were encountered: