OpenGL的混合模式，解决半透明像素渲染问题

转载已于 2023-07-27 12:11:18 修改 · 1.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.jianshu.com/p/b4f585a9bd5e

标签

#游戏

于 2023-05-08 17:16:40 首次发布

本文介绍了OpenGL如何使用混合(Blending)技术来渲染半透明图像。通过开启混合模式，设置源因子和目标因子，然后进行渲染，可以实现颜色的混合效果。文章列举了不同混合因子的组合，如GL_SRC_ALPHA和GL_ONE_MINUS_SRC_ALPHA，以及它们对最终颜色的影响，并展示了不同设置下的颜色计算示例。

OpenGL使用混合（Blending）技术来完成半透明图像的渲染。

// 1.开启混合模式
glEnable(GLES20.GL_BLEND); 
// 2.设置混合因子的函数：源因子，目标因子
glBlendFunc(int sfactor, int dfactor);
// 3.渲染目标
// 4.渲染源   
// 5.关闭混合模式
glDisable(GLES20.GL_BLEND);

混合模式的公式，一定要注意好哪个是源，哪个是目标。

Cresult=Csource∗Fsource+Cdestination∗Fdestination

Csource：源颜色向量。这是来自图片纹理中的颜色向量。
Cdestination：目标颜色向量。这是储存在颜色缓冲中当前位置的颜色向量。

混合因子：
Fsource：源因子。设置了对源颜色的alpha值影响。和要渲染的物体的颜色进行相乘
Fdestination：目标因子。设置了对目标颜色的alpha影响。和GL颜色缓冲区的颜色相乘

// 2.设置混合因子的函数：源因子，目标因子
glBlendFunc(int sfactor, int dfactor);

混合因子可选值如下：（Fsource和Fdestination可以选择以下枚举）

GL_ZERO	0
GL_ONE	1
GL_SRC_COLOR	源颜色向量Csource
GL_ONE_MINUS_SRC_COLOR	1-Csource
GL_DST_COLOR	目标颜色向量Cdestination
GL_ONE_MINUS_DST_COLOR	1-Cdestination
GL_SRC_ALPHA	Csource的alpha值
GL_ONE_MINUS_SRC_ALPHA	1-GL_SRC_ALPHA
GL_DST_ALPHA	Cdestination的alpha值
GL_ONE_MINUS_DST_ALPHA	1-GL_DST_ALPHA
GL_CONSTANT_COLOR	常颜色向量Cconstant
GL_ONE_MINUS_CONSTANT_COLOR	1-GL_CONSTANT_COLOR
GL_CONSTANT_ALPHA	常颜色向量Cconstant的apha值
GL_ONE_MINUS_CONSTANT_ALPHA	1-L_CONSTANT_ALPHA

当然还可以使用glBlendFuncSeparate( int srcRGB, int dstRGB, int srcAlpha, int dstAlpha );来分别对RGB 和 alpha 设置不同的因子。
使用glBlendEquation( int mode ); & glBlendEquationSeparate( int modeRGB, int modeAlpha ); 配置混合函数运算符。

举几个例子，我们重点关注alpha的变化。（此时我还没意识到预乘Premultiplied Alpha的作用）
源（1，1，0，0.6），目标（0.6，0.6，0.5，1）

glBlendFunc(GLES20.GL_SRC_ALPHA, GLES20.GL_ONE_MINUS_SRC_ALPHA)
result.r = 1 * 0.6 + 0.6 * （1 - 0.6）= 0.84
result.g = 1 * 0.6 + 0.6 * （1 - 0.6）= 0.84
result.b = 0 * 0.6 + 0.5 * （1 - 0.6）= 0.2
result.a = 0.6 * 0.6 + 1 * （1 - 0.6）= 0.76
.glBlendFuncSeparate(GLES20.GL_SRC_ALPHA, GLES20.GL_ONE_MINUS_SRC_ALPHA, GLES20.GL_ONE, GLES20.GL_ONE_MINUS_SRC_ALPHA)
result.r = 1 * 0.6 + 0.6 * （1 - 0.6）= 0.84
result.g = 1 * 0.6 + 0.6 * （1 - 0.6）= 0.84
result.b = 0 * 0.6 + 0.5 * （1 - 0.6）= 0.2
result.a = 0.6 * 1 + 1 * （1 - 0.6）= 1
glBlendFunc(GLES20.GL_ONE, GLES20.GL_ONE_MINUS_SRC_ALPHA)
result.r = 1 * 1 + 0.6 * （1 - 0.6）= 1.24
result.g = 1 * 1 + 0.6 * （1 - 0.6）= 1.24
result.b = 0 * 1 + 0.5 * （1 - 0.6）= 0.2
result.a = 0.6 * 1 + 1 * （1 - 0.6）= 1