OpenGL-ES 学习(1)---- AlphaBlend

AlphaBlend

OpenGL-ES 混合本质上是将 2 个片元的颜色进行调和(一般是求和操作),产生一个新的颜色

OpenGL ES 混合发生在片元通过各项测试 之后,准备进入帧缓冲区的片元和原有的片元按照特定比例加权计算出最终片元的颜色值,不再是新(源)片元直接覆盖缓冲区中的(目标)片元。

OpenGL-ES 混合方程:
Cresult=Csource∗Fsource + Cdestination∗Fdestination

其中:

其中:

Csource:源颜色向量,来自纹理的颜色向量;

Cdestination:目标颜色向量,储存在颜色缓冲中当前位置的颜色向量;

Fsource:源因子,设置了对源颜色加权;

Fdestination:目标因子,设置了对目标颜色加权;

操作符可以是加(+)、减(-)、Min、Max 等。

这里的向量可以理解为通道的含义,比如 RGB 可以用 Vec3 来表示;

编程方法

开启 Alpha Blend

启用 OpenGL ES 混合使用 glEnable(GL_BLEND);

然后通过 glBlendFunc 设置混合的方式,其中 sfactor 表示源因子,dfactor 表示目标因子

cpp 复制代码
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

// GL_SRC_ALPHA 表示源因子取值为源颜色的 alpha
// GL_ONE_MINUS_SRC_ALPHA 表示目标因子取值为 1- alpha(源颜色的 alpha)
// 操作符默认为 GL_FUNC_ADD ,即加权相加。
// 混合公式变成了 源颜色向量 × alpha + 目标颜色向量 × (1- alpha)

注意下面的混和因子说明表格中,存在 const alpha 的选项,既可以使用 const alpha 混合

定义颜色操作符

我们也可以通过 glBlendEquation 自定义两个颜色之间的操作符:

GL_FUNC_ADD:默认的,彼此元素相加:Cresult=CSrc + CDst

GL_FUNC_SUBTRACT:彼此元素相减:Cresult=CSrc − CDst

GL_FUNC_REVERSE_SUBTRACT:彼此元素相减,但顺序相反:Cresult=CDst - CSrc

GL_MIN:混合结果的 4 个通道值分别取 2 元素中 4 个通道较小的值;

GL_MAX:混合结果的 4 个通道值分别取 2 元素中 4 个通道较大的值;

颜色通道和Alpha 通道分开设置
cpp 复制代码
//对 RGB 和 Alpha 分别设置 BLEND 函数
//void glBlendFuncSeparate(GLenum srcRGB,GLenum dstRGB,GLenum srcAlpha,GLenum dstAlpha);
glBlendFuncSeperate(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA, GL_ONE, GL_ZERO);

//混合结果颜色 RGB 向量 = 源颜色 RGB 向量 × alpha + 目标颜色 RGB 向量 × (1- alpha);
//混合结果颜色 alpha = 源颜色 alpha × 1 + 目标颜色 alpha × 0;

也可以为 RGB通道和 alpha 通道设置不同的操作符:

cpp 复制代码
void glBlendEquationSeparate(GLenum modeRGB, GLenum modeAlpha);`

sss

验证代码

下面的代码中,loadTgaTextures 生成了两张 Texture,在绘制的时候绘制了两次,第一次绘制了 Dst,第二次绘制了 Src,指定 const alpha 的 SFactor 和 DFactor 都为 0.5

cpp 复制代码
typedef struct
{
	GLuint programObject;
	GLint  samplerLocal;
	GLuint textureIdDst;
	GLuint textureIdSrc;
} UserData;

static int Init(ESContext *esContext)
{
	UserData *userData = esContext->userData;
	char vShaderStr[] =
		"#version 300 es                            \n"
		"layout(location = 0) in vec4 a_position;   \n"
		"layout(location = 1) in vec2 a_texCoord;   \n"
		"out vec2 v_texCoord;                       \n"
		"void main()                                \n"
		"{                                          \n"
		"   gl_Position = a_position;               \n"
		"   v_texCoord = a_texCoord;                \n"
		"}                                          \n";

	char fShaderStr[] =
		"#version 300 es                                     \n"
		"precision mediump float;                            \n"
		"in vec2 v_texCoord;                                 \n"
		"layout(location = 0) out vec4 outColor;             \n"
		"uniform sampler2D s_texture;                        \n"
		"vec4 tempColor;                                     \n"
		"void main()                                         \n"
		"{                                                   \n"
		"  tempColor = texture( s_texture, v_texCoord );    \n"
		"  outColor = vec4(tempColor.r, tempColor.b, tempColor.g, tempColor.a); \n"
		"}                                                   \n";

	userData->programObject = esLoadProgram(vShaderStr, fShaderStr);
	userData->samplerLocal = glGetUniformLocation(userData->programObject, "s_texture");
	userData->textureIdSrc = loadTgaTextures("./Huskey.tga");
	userData->textureIdDst = loadTgaTextures("./scene.tga");

	// 启用 alpha 混合 指定 const alpha 值为 0.5
    glEnable(GL_BLEND);
	glBlendColor(1.0f, 1.0f, 1.0f, 0.5f);
    glBlendFunc(GL_CONSTANT_ALPHA, GL_ONE_MINUS_CONSTANT_ALPHA);

	glClearColor(1.0f, 1.0f, 1.0f, 0.0f);
	return TRUE;
}

static void Draw(ESContext *esContext)
{
	UserData *userData = esContext->userData;
	GLfloat vVertices[] = {
		-1.0f, 1.0f, 0.0f,  // Position 0
		0.0f,  0.0f,        // TexCoord 0 
		-1.0f, -1.0f, 0.0f,  // Position 1
		0.0f,  1.0f,        // TexCoord 1
		1.0f, -1.0f, 0.0f,  // Position 2
		1.0f,  1.0f,        // TexCoord 2
		1.0f,  1.0f, 0.0f,  // Position 3
		1.0f,  0.0f         // TexCoord 3
	};
	GLushort indices[] = { 0, 1, 2, 0, 2, 3 };

	glViewport(0, 0, esContext->width, esContext->height);

	glClear(GL_COLOR_BUFFER_BIT);

	glUseProgram(userData->programObject);

	glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(GLfloat), vVertices);
	glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(GLfloat), &vVertices[3]);

	glEnableVertexAttribArray(0);
	glEnableVertexAttribArray(1);

	// Bind the texture
	glActiveTexture(GL_TEXTURE0);
	glBindTexture(GL_TEXTURE_2D, userData->textureIdDst);

	// Set the sampler texture unit to 0
	glUniform1i(userData->samplerLocal, 0);
	glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, indices);

	// 任然使用可以 texture0, 但是可以指定不同的 texture id
	glActiveTexture(GL_TEXTURE0);
	glBindTexture(GL_TEXTURE_2D, userData->textureIdSrc);
	glUniform1i(userData->samplerLocal, 0);
	glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, indices);
}

实际效果如下:

相关推荐
冬奇Lab9 小时前
每日一个开源项目(第105篇):Twenty - 跳出 Salesforce 的圈套,定义现代开源 CRM
前端·后端·开源
GitCode官方10 小时前
开源鸿蒙 PC 直播回顾|从环境搭建到真机验证:鸿蒙 PC 命令行迁移全链路。
华为·开源·harmonyos
阿宝哥12 小时前
国产开源 TTS 杀疯了:2B 参数、支持 30 种语言,语音克隆和声音设计全都有!
开源·aigc
MoonBit月兔14 小时前
MoonBit开源创新大赛山东&重庆高校行——与青年开发者共探AI原生软件新未来
开发语言·人工智能·开源·ai-native·moonbit
API开发平台15 小时前
开源 API 开发平台 5.1.0 发布
低代码·开源
小小测试开发15 小时前
加州拟将 Linux 从年龄验证法中豁免:一场开源社区的胜利与反思
linux·运维·开源
在繁华处17 小时前
Hermes Agent 完全使用指南:从安装到多平台部署的全流程教程
python·开源·飞书
好好风格17 小时前
把一台 Root 安卓机交给 AI 智能体,会发生什么?
android·人工智能·开源
unique19 小时前
Agent记忆开源项目调研
开源·ai编程
科技快报19 小时前
打造标杆版本、加速设备上量,开源鸿蒙迈向产业规模化新阶段
华为·开源·harmonyos