Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >OpenGL(七)- 渲染技巧:颜色混合OpenGL(七)- 渲染技巧:颜色混合

OpenGL(七)- 渲染技巧:颜色混合OpenGL(七)- 渲染技巧:颜色混合

作者头像
用户8893176
发布于 2021-08-09 06:34:08
发布于 2021-08-09 06:34:08
1K00
代码可运行
举报
文章被收录于专栏:小黑娃Henry小黑娃Henry
运行总次数:0
代码可运行

OpenGL(七)- 渲染技巧:颜色混合

我们都知道颜色缓存区和深度缓冲区原理一致,在同一个位置上只能保存一个值。那么我们常见的透明图层相互之间的影响又是为什么呢?

  • 首先通过之前的知识来接单解读一下两个不透明的图层相互重叠时系统做了什么?
  • 如果其中一块为50%透明

如果这种情况出现,我们依旧是进行深度测试,丢弃蓝色部分就不合理了。现在要做的就是需要将两个颜色进行混合才为更为合理,但计算机并没有那么智能需要开发者来进行混合后颜色的计算。

当然OpenGL也考虑到了这一点:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
void RenderScene(void){
    //1.清空颜色缓存区
    glClear(GL_COLOR_BUFFER_BIT)
    //2.开启混合
    glEnable(GL_BLEND);
    //3.指定组合函数,有系统来计算混合结果
    glBlandFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA);
    //4.指定混合方程函数,一般不需要设置
    glBlendEquation(GL_FUNC_ADD);
    //4.关闭
    glDisable(GL_BLAND);
}
glBlendEquation(GLenum mode)

一般不需要设置,系统默认使用 GL_FUNC_ADD

glBlandFunc(GLenum sfactor, GLenum dfactor)

其他API相信已经见过很多次了,只有glBlandFunc以及参数需要解释一下。

API中进行计算时根据公式:

Cf = (Cs * S) + (Cd * D) Cf表示: 计算后的最终颜色 Cs表示: 源颜色,也就是渲染命令中后传入的颜色 S表示: 源混合因子 Cd表示: 目标颜色,也就是已经保存在颜色混合区中的颜色。要注意这个位置的颜色和图层的前后并无关系。之和渲染的先后有关。 D表示: 目标混合因子

  • 对应上方公式开发者能操作的其实只有S、D这两个混合因子,下图是API中两个参数的参数表。

R、G、B、A表示: 红、绿、蓝、透明度 S、D表示: 源、目标 C 代表常量(一般为黑色)

几种参数尝试
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//使用默认参数的情况
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//使用其他参数的情况
glBlendFunc(GL_CONSTANT_ALPHA, GL_CONSTANT_ALPHA);

情况很多就不一一实验,一般使用的默认值 glBlandFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA);

枚举值套入公式

使用默认参数,举例: 源颜色(CS)为: (1.0f,0.5f,0.0f, 0.6f) 目标颜色(CD)为:(0f,1.0f,0.5f, 1.0f) S(源因子)为: 0.6f D(目标因子)为: 1-0.6f(源透明度) = 0.4f 结果 = (源颜色 * 0.6f) + (目标颜色 * 0.4f)

  • 通过计算可知:
  1. 源因子的Alpha越大,则目标颜色保留成分越少
  2. 若果源因子的Alpha为1,则目标颜色设置无效,也就是被覆盖。开启混合后这种情况依旧会进行混合计算。所以颜色混合一般用在:一个半透明/不透明的物体前面绘制一个半透明的物体。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/7/15 上,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
OpenGL ES实践教程(八)blend混合与shader混合
教程 OpenGL ES实践教程1-Demo01-AVPlayer OpenGL ES实践教程2-Demo02-摄像头采集数据和渲染 OpenGL ES实践教程3-Demo03-Mirror OpenGL ES实践教程4-Demo04-VR全景视频播放 OpenGL ES实践教程5-Demo05-多重纹理实现图像混合 OpenGL ES实践教程6-Demo06-全景视频获取焦点 OpenGL ES实践教程7-Demo07-多滤镜叠加处理 其他教程请移步OpenGL ES文集。 在OpenGL
落影
2018/04/27
3.4K0
OpenGL ES实践教程(八)blend混合与shader混合
OpenGLES(七)-GLSL案例:纹理颜色混合OpenGLES(七)-GLSL案例:纹理颜色混合
OpenGLES(七)-GLSL案例:纹理颜色混合 首先放出效果 效果图 原图: 原图 通过对比可以看出纹理和颜色进行了混合效果,下面就放出实现过程. vsh attribute vec4 posit
用户8893176
2021/08/09
6700
OpenGLES(七)-GLSL案例:纹理颜色混合OpenGLES(七)-GLSL案例:纹理颜色混合
OpenGL 中的颜色混合和使用
在 Android 中有一个类 PorterDuffXfermode ,它是用来设置颜色混合方式的,也就是在已有颜色的基础上再绘制一笔颜色,这两个颜色是如何进行混合的,是新绘制的颜色覆盖了原有颜色,还是新绘制的颜色和原有颜色混合组成另一种颜色呢。
音视频开发进阶
2019/07/25
2.6K0
15.opengl高级-混合
纹理缓和的计算也不复杂,根据alpha通道值做叠加或减除融合,详细可参考opengl-混合
公号sumsmile
2020/06/28
7760
NDK OpenGL ES 3.0 开发(十二):混合
OpenGL ES 混合发生在片元通过各项测试之后,准备进入帧缓冲区的片元和原有的片元按照特定比例加权计算出最终片元的颜色值,不再是新(源)片元直接覆盖缓冲区中的(目标)片元。
字节流动
2020/06/01
8680
OpenGL 颜色混合丨音视频基础
混合是什么呢?混合就是把两种颜色混在一起。具体一点,就是把某一像素位置当前存储在颜色缓冲区的颜色和将要画上去的颜色,通过某种方式混在一起,从而实现特殊的效果。
关键帧
2023/02/14
8210
OpenGL 颜色混合丨音视频基础
用 OpenGL 对视频帧内容进行替换
在群里面有人提到了这么一个实现:现有一段素材视频,想要对视频中的某个内容进行替换,换成自己的图片,这个怎么用 OpenGL 去实现呢?
音视频开发进阶
2019/07/25
1.9K0
OpenGL(九)-- 综合案例(公、自转)OpenGL(九)-- 综合案例(公、自转)
这篇文章中会省略一部分基本的初始化代码,而且代码都是按模块进行了分割,如果想要了解可以去另一篇文章中了解一下OpenGL (三)--一个"HelloWorld"的执行全过程,也可以直接下载源码来看github
用户8893176
2021/08/09
1.2K0
OpenGL(九)-- 综合案例(公、自转)OpenGL(九)-- 综合案例(公、自转)
OpenGL透明与混色效果
一、理论讲解 在OpenGL中,物体透明技术通常被叫做混合(Blending)。 透明是物体(或物体的一部分)非纯色而是混合色,这种颜色来自于不同浓度的自身颜色和它后面的物体颜色。 一个有色玻璃窗就是一种透明物体,玻璃有自身的颜色,但是最终的颜色包含了所有玻璃后面的颜色。这也正是混合这名称的出处,因为我们将多种(来自于不同物体)颜色混合为一个颜色,透明使得我们可以看穿物体。 透明物体可以是完全透明(它使颜色完全穿透)或者半透明的(它使颜色穿透的同时也显示自身颜色)。一个物体的透明度,被定义为它的颜色的alp
Zoctopus
2018/06/04
1.8K0
Android中基于OpenGL的特效
大家都知道,给图片加滤镜加特效,通常是对图像进行矩阵运算。通过颜色矩阵的乘法,我们可以对图像中的元素进行变换。 但是,如果需要对实时变化的图像进行实时处理,就不是每种图像变换的方式都可以用了。因为,实时变化的预览图像,会有帧率的压力,我们的处理一定要快。
Oceanlong
2018/08/14
2.2K0
Android中基于OpenGL的特效
终端图像处理系列 - OpenGL混合模式的使用
OpenGL一次渲染过程包含了多个阶段,包括顶点着色器、图元组装、栅格化、片元着色器、测试和混合等,最后将结果输出的FrameBuffer上。
天天P图攻城狮
2018/05/22
5K4
Android OpenGL ES 实现 3D 阿凡达效果
偶然间,看到技术交流群里的一位同学在做类似于上图所示的 3D 效果壁纸,乍一看效果确实挺惊艳的。当时看到素材之后,马上就萌生了一个想法:利用 OpenGL 做一个能与之媲美的 3D 效果。
字节流动
2020/06/02
3.8K1
38.opengl-字体渲染
早期的文本渲染,是将需要的字符集放到一个大纹理中,这个纹理称为“位图字体”,渲染某个字符时,通过查找坐标,找到该字符对应的区域并渲染出来,再启动混合,让字符纹理的背景保持透明,非常容易理解。
公号sumsmile
2020/10/10
1.8K0
38.opengl-字体渲染
OpenGL基本框架与三维对象绘制
上次我们介绍了OpenGL的环境构建和二维对象的绘制,这次我们来讲讲三维对象的绘制:  绘制代码如下: // opengltest2.cpp : Defines the entry point for the console application. // #include "stdafx.h" #include <GL/glut.h> #include <stdio.h> #include <stdlib.h> #include <math.h> #define PI 3.1415926 //金字塔初始
Zoctopus
2018/06/04
7760
1.opengl绘制三角形
下面,你会看到一个图形渲染管线的每个阶段的抽象展示。要注意蓝色部分代表的是我们可以注入自定义的着色器的部分。
诺谦
2020/09/27
1.2K0
1.opengl绘制三角形
OpenGLES-02 绘制基本图元(点、线、三角形)
在绘制之前,我们需要了解下面的知识: 一、渲染管线 下图中展示整个OpenGL ES 2.0可编程渲染管线 渲染管线.png 图中Vertex Shader和Fragment Shader 是可编程
清墨
2018/05/07
2.3K0
OpenGLES-02 绘制基本图元(点、线、三角形)
用OpenGL绘制平滑着色的三角形与相交区域的混合着色
一、三角形的绘制 在OpenGL中,面是由多边形构成的。三角形可能是最简单的多边形,它有三条边。可以使用GL_TRIANGLES模式通过把三个顶点连接到一起而绘出三角形。 使用GL_TRIANGLE_STRIP模式可以绘制几个相连的三角形,系统根据前三个顶点绘制第一个多边形,以后每指定一个顶点,就与构成上一个三角形的后两个顶点绘制形的一个三角形。 使用GL_TRIANGLE_FAN模式可以绘制一组相连的三角形,这些三角形绕着一个中心点成扇形排列。 第一个顶点构成扇形的中心,用前三个顶点绘制会最初的三角形后,
Zoctopus
2018/06/04
2.2K0
OpenGLES讲解稿
今天我们讲一下OpenGL与OpenGL在移动端的应用 OpenGL,Open Graphics Library,开放式图形库,就是一个库,与我们平时使用的三方库差不多。 OpenGL在移动端的表现形式为OpenGLES(OpenGL for Embedded Systems),是 OpenGL 三维图形 API 的子集,针对手机、PDA和游戏主机等嵌入式设备而设计。
清墨
2020/01/15
1.1K0
OpenGLES讲解稿
今天的技术干货由 ChatGPT 买单了~~
ChatGPT 技术最近有多火就不用再介绍了吧,连超级大佬都说了 ChatGPT 这是几百年不遇的、类似发明电的工业革命一样的机遇。
音视频开发进阶
2023/08/25
2880
今天的技术干货由 ChatGPT 买单了~~
Unity Shader
对于透明物体的处理,是游戏引擎的一个重要能力,通常通过模型的 透明通道 alpha 来控制物体的透明情况,alpha取值范围为
ruochen
2021/11/26
3.4K0
相关推荐
OpenGL ES实践教程(八)blend混合与shader混合
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验