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

这篇具有很好参考价值的文章主要介绍了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 表示目标因子

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 混合
OpenGL-ES 学习(1)---- AlphaBlend,OpenGL-ES,es,开源

定义颜色操作符

我们也可以通过 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 通道分开设置
//对 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 通道设置不同的操作符:

void glBlendEquationSeparate(GLenum modeRGB, GLenum modeAlpha);`

sss

验证代码

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

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);
}

实际效果如下:
OpenGL-ES 学习(1)---- AlphaBlend,OpenGL-ES,es,开源文章来源地址https://www.toymoban.com/news/detail-829745.html

到了这里,关于OpenGL-ES 学习(1)---- AlphaBlend的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • Android OpenGL ES 学习(四) -- 正交投影

    Android OpenGL ES 学习(四) -- 正交投影

    OpenGL 学习教程 Android OpenGL ES 学习(一) – 基本概念 Android OpenGL ES 学习(二) – 图形渲染管线和GLSL Android OpenGL ES 学习(三) – 绘制平面图形 Android OpenGL ES 学习(四) – 正交投屏 Android OpenGL ES 学习(五) – 渐变色 Android OpenGL ES 学习(六) – 使用 VBO、VAO 和 EBO/IBO 优化程序 Android OpenG

    2024年02月13日
    浏览(6)
  • Android OpenGL ES 学习(九) – 坐标系统和实现3D效果

    Android OpenGL ES 学习(九) – 坐标系统和实现3D效果

    OpenGL 学习教程 Android OpenGL ES 学习(一) – 基本概念 Android OpenGL ES 学习(二) – 图形渲染管线和GLSL Android OpenGL ES 学习(三) – 绘制平面图形 Android OpenGL ES 学习(四) – 正交投影 Android OpenGL ES 学习(五) – 渐变色 Android OpenGL ES 学习(六) – 使用 VBO、VAO 和 EBO/IBO 优化程序 Android OpenG

    2024年01月25日
    浏览(16)
  • Android OpenGL ES 学习(十) – GLSurfaceView 源码解析GL线程以及自定义 EGL

    Android OpenGL ES 学习(十) – GLSurfaceView 源码解析GL线程以及自定义 EGL

    OpenGL 学习教程 Android OpenGL ES 学习(一) – 基本概念 Android OpenGL ES 学习(二) – 图形渲染管线和GLSL Android OpenGL ES 学习(三) – 绘制平面图形 Android OpenGL ES 学习(四) – 正交投影 Android OpenGL ES 学习(五) – 渐变色 Android OpenGL ES 学习(六) – 使用 VBO、VAO 和 EBO/IBO 优化程序 Android OpenG

    2024年02月05日
    浏览(11)
  • Android OpenGL ES 学习(十三) -离屏渲染FBO(截图)RBO, OES转 FBO

    Android OpenGL ES 学习(十三) -离屏渲染FBO(截图)RBO, OES转 FBO

    Android OpenGL ES 学习(一) – 基本概念 Android OpenGL ES 学习(二) – 图形渲染管线和GLSL Android OpenGL ES 学习(三) – 绘制平面图形 Android OpenGL ES 学习(四) – 正交投屏 Android OpenGL ES 学习(五) – 渐变色 Android OpenGL ES 学习(六) – 使用 VBO、VAO 和 EBO/IBO 优化程序 Android OpenGL ES 学习(七) –

    2024年02月12日
    浏览(8)
  • OpenGL 和 OpenGL ES基础知识

    当今许多视觉应用程序,从简单的游戏到高级工程领域,都使用OpenGL(Open Graphics Library)和OpenGL ES(OpenGL for Embedded Systems)作为其图形渲染API。这些API提供了一种跨平台、可移植且高性能的图形编程解决方案,支持大量不同类型的设备和操作系统。 在本篇博客中,我们将深入

    2024年02月08日
    浏览(11)
  • 【Android OpenGL开发】OpenGL ES与EGL介绍

    【Android OpenGL开发】OpenGL ES与EGL介绍

    OpenGL(Open Graphics Library)是一个跨编程语言、跨平台的编程图形程序接口,主要用于图像的渲染。 Android提供了简化版的OpenGL接口,即OpenGL ES。 早先定义 OpenGL ES 是 OpenGL 的嵌入式设备版本,用于移动端平台(Android、iOS),但由于嵌入式设备要求的是高性能,所以一些其它纯

    2024年02月04日
    浏览(10)
  • OpenGL ES入门教程(一)编写第一个OpenGL程序

    OpenGL ES入门教程(一)编写第一个OpenGL程序

    从本文开始我将参考学习OpenGL ES应用开发实践指南 Android卷 [(美)KevinBrothaler著](提取码: 394m),并基于自己的理解以更加通俗易懂的方式讲解如何应用OpenGL ES。本系列教程的目标是应用OpenGL,所以不会涉及太多的理论知识,主要讲解方式是基于简单功能的代码拆解,学会对

    2024年02月06日
    浏览(11)
  • OpenGL ES入门介绍

    OpenGL ES入门介绍

    目录 1.OpenGL ES的简介 2. 基本流程和概念 2.1 渲染的基本流程 2.2 管线 2.3 顶点 2.4 纹理 2.5 顶点着色器(VertexShader) 2.6 图元装配 2.7 光栅化 2.8 片段着色器(FragmentShader) 2.9 逐片段操作         第一次接触OpenGL ES是两年前,但是看到OpenGL中各种专业名词和专业术语,

    2024年01月22日
    浏览(8)
  • OpenGl ES---纹理

    OpenGl ES---纹理

    什么是纹理? 纹理:最通常就是装饰3D物体,像贴纸一样贴在物体表面,在OpenGl ES中除了装饰物体表面,还用来 作为数据的容器。 在OpenGL中,纹理实际上是一个可以被采样的复杂数据集合,是GPU使用的图像数据结构,分为:2D纹理,立方体纹理和3D纹理。 2D 纹理是 OpenGLES 中

    2024年02月05日
    浏览(10)
  • 一看就懂的OpenGL ES教程——仿抖音滤镜的各种奇技淫巧(一)_opengl es添加视频

    一看就懂的OpenGL ES教程——仿抖音滤镜的各种奇技淫巧(一)_opengl es添加视频

    上一篇文章一看就懂的OpenGL ES教程——渲染宫崎骏动漫重拾童年 已经详细阐述了如何用OpenGL es将原始的YUV数据组成的视频渲染到屏幕上,想必有很多童鞋在阅读了它之后依然觉得回味无穷,学习的胃口也越来越大了,因为你们知道仅仅渲染视频是不够的,我们要的是,能够在

    2024年04月25日
    浏览(12)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包