混合

作者: 不决书 | 来源:发表于2023-09-16 08:43 被阅读0次

混合(Blending)通常是实现物体透明度(Transparency)的一种技术。


image.png

丢弃片段

#version 330 core
out vec4 FragColor;

in vec2 TexCoords;

uniform sampler2D texture1;

void main()
{             
    vec4 texColor = texture(texture1, TexCoords);
    if(texColor.a < 0.1)
        discard;
    FragColor = texColor;
}

注意,当采样纹理的边缘的时候,OpenGL会对边缘的值和纹理下一个重复的值进行插值(因为我们将它的环绕方式设置为了GL_REPEAT。这通常是没问题的,但是由于我们使用了透明值,纹理图像的顶部将会与底部边缘的纯色值进行插值。这样的结果是一个半透明的有色边框,你可能会看见它环绕着你的纹理四边形。要想避免这个,每当你alpha纹理的时候,请将纹理的环绕方式设置为GL_CLAMP_TO_EDGE:
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

混合

要想渲染有多个透明度级别的图像,我们需要启用混合(Blending)。

  glEnable(GL_BLEND);

OpenGL中的混合是通过下面这个方程来实现的:


image.png

有一个专门的函数,叫做glBlendFunc
glBlendFunc(GLenum sfactor, GLenum dfactor)函数接受两个参数,来设置源和目标因子。OpenGL为我们定义了很多个选项,我们将在下面列出大部分最常用的选项。注意常数颜色向量C¯constant
可以通过glBlendColor函数来另外设置。

image.png

为了获得之前两个方形的混合结果,我们需要使用源颜色向量的alpha
作为源因子,使用1−alpha
作为目标因子。这将会产生以下的glBlendFunc:

  glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

也可以使用glBlendFuncSeparate为RGB和alpha通道分别设置不同的选项:

  glBlendFuncSeparate(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA, GL_ONE, GL_ZERO);

glBlendEquation(GLenum mode)允许我们设置运算符,它提供了三个选项:

  • GL_FUNC_ADD:默认选项,将两个分量相加:C¯result=Src+Dst

  • GL_FUNC_SUBTRACT:将两个分量相减: C¯result=Src−Dst

  • GL_FUNC_REVERSE_SUBTRACT:将两个分量相减,但顺序相反:C¯result=Dst−Src

    深度测试和混合一起使用的话会产生一些麻烦。当写入深度缓冲时,深度缓冲不会检查片段是否是透明的,所以透明的部分会和其它值一样写入到深度缓冲中。结果就是窗户的整个四边形不论透明度都会进行深度测试。即使透明的部分应该显示背后的窗户,深度测试仍然丢弃了它们。
    所以我们不能随意地决定如何渲染窗户,让深度缓冲解决所有的问题了。这也是混合变得有些麻烦的部分。要想保证窗户中能够显示它们背后的窗户,我们需要首先绘制背后的这部分窗户。这也就是说在绘制的时候,我们必须先手动将窗户按照最远到最近来排序,再按照顺序渲染。

相关文章

  • Shader学习——渲染顺序,混合命令

    渲染顺序 混合 只要有关键字Blend,就代表开启混合(除Blend off以外) 混合因子 常见混合操作类型 混合操作

  • ps学习笔记19 混合模式上

    色光的混合类型 一般利用一种混合模式对上下两个图层进行混合。 基色,就是下方被混合的颜色。 混合色,就是产生混合模...

  • 页面混合布局

    混合布局 混合布局 混合布局 body{margin:0;padding:0;} ...

  • Day 6 freakonomics

    1.blend vt. 混合vi. 混合;协调n. 混合;掺合物[网络] 混合材质;融合;调和[专业] 混纺 [机...

  • 混合

    1.合并 一种分发Vue组件中可复用功能的方式 Vue.extend()合并策略相同 2.全局混合 谨慎使用全局混...

  • 混合

    每一件事如果都去思考背后的本质,总能找到一些看到不一样的东西。 房子的装修一半,到了粉刷的地方步骤了,我们...

  • Sass 带参混合

    本节我们来学习带参混合,Sass 中混合可以接受参数,我们可以通过使用 @include 调用混合时给混合传参,来...

  • Sass 带参混合

    本节我们来学习带参混合,Sass 中混合可以接受参数,我们可以通过使用 @include 调用混合时给混合传参,来...

  • wepy小程序框架笔记

    一.Mixin混合 混合可以将组件公共部分抽出,组件中需要使用的时候直接注入就可以了。Mixin混合分为默认式混合...

  • 混合性肌肤如何护理?分区域护理这3点才是关键!

    混合性肌肤是很普遍的皮肤类型,其中分为混合偏油和混合偏干。一般而言,夏天容易混合偏油,冬天容易混合偏干。很多人会把...

网友评论

      本文标题:混合

      本文链接:https://www.haomeiwen.com/subject/qbibvdtx.html