Alpha颜色混合的魔法 下篇

最新推荐文章于 2023-06-26 21:35:36 发布
最新推荐文章于 2023-06-26 21:35:36 发布
阅读量6.9k 收藏 12
点赞数
分类专栏： 图形图像 文章标签： c border div dst 优化 distance
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/housisong/article/details/1824756
版权

                        Alpha颜色混合的魔法 下篇
                   HouSisong@GMail.com   2007.10.14

摘要：本系列文章介绍了一种在图像处理、2D游戏、3D游戏中经常使用的图片混合模型:Alpha颜色混合;
它就像神奇的魔法一样，在电脑屏幕上给我们展现出一个个绚丽多彩的世界!

全文 分为: 上篇 各种Alpha颜色混合方式
           下篇 其他一些颜色混合方案、补充

tag:Alpha,Blend,透明,颜色混合,颜色混合公式

正文： 
  为了便于讨论，这里只处理32bit的ARGB颜色；
  代码使用C++,编译器:VC2005
  (一些数据定义等代码请参见《Alpha颜色混合的魔法 上篇》)

  (文章中的效果图片都是用给出的例子代码实际生成)

A: 利用Alpha颜色混合给图片上蒙一层颜色
 
void PicBlendColor(const TPicRegion& picDst,const TARGB32&  SrcColor)
{
    unsigned long Alpha=SrcColor.a;
    for (long y=0;y<picDst.height;++y)
    {
        for (long x=0;x<picDst.width;++x)
        {
            TARGB32& DstColor=Pixels(picDst,x,y);
            DstColor.b=(DstColor.b*(255-Alpha) + SrcColor.b*Alpha)/255;
            DstColor.g=(DstColor.g*(255-Alpha) + SrcColor.g*Alpha)/255;
            DstColor.r=(DstColor.r*(255-Alpha) + SrcColor.r*Alpha)/255;
            DstColor.a=(DstColor.a*(255-Alpha) + SrcColor.a*Alpha)/255;
        }
    }
}
 
  函数效果:
        
                      源图片  
            

         
       混合颜色(B=0,G=0,R=255,A=127)后的图片   


         
   在多处混合3个不同颜色(B=0,G=0,R=255,A=127)、
          (B=0,G=255,R=0,A=127)、(B=255,G=0,R=0,A=127)后的图片   


B.用乘以一个颜色来调节图片颜色通道
 
void PicBlend_Mul(const TPicRegion& picDst,const TARGB32& MulColor)
{
    for (long y=0;y<picDst.height;++y)
    {
        for (long x=0;x<picDst.width;++x)
        {
            TARGB32& DstColor=Pixels(picDst,x,y);
            DstColor.b=(DstColor.b*MulColor.b)/255;
            DstColor.g=(DstColor.g*MulColor.g)/255;
            DstColor.r=(DstColor.r*MulColor.r)/255;
            DstColor.a=(DstColor.a*MulColor.a)/255;
        }
    }
}

   函数效果:
      
                    源图片  

      
   乘以颜色(B=255,G=255,R=127,A=255)后的图片
      (相当于将红色通道的颜色值减半)  

C.Alpha通道的逆表示法的优势
 
  前面带Alpha通道的图片混合时使用的混合公式:
      Dst=( Dst*(255-Src.Alpha) + Src*Src.Alpha ) / 255;
  为了优化运算,我们可以将图片格式改为Alpha的逆表示法；
       将颜色中的颜色值R保存为R*Alpha/255;
       将颜色中的颜色值G保存为G*Alpha/255;
       将颜色中的颜色值B保存为B*Alpha/255;
       将颜色中的Alpha通道值保存为RAlpha(RAlpha=255-Alpha);
     那么混合的时候可以简化为Dst=(Dst*Src.RAlpha)/255 + Src;

D.多个带Alpha通道的图片的绘制顺序的问题
  图片按透明属性可以分为3种：所有像素完全不透明、部分像素完全透
明另一部分完全不透明、带Alpha通道的图片(透明度为0到255)；做过3D
渲染的人应该都知道，在绘制纹理的时候，带Alpha通道的纹理需要最后
绘制，并且需要排好序才能正确绘制，而用其它两种就不需要排序；因为
可以使用深度缓冲区就能保证按任何绘制顺序都能正确的渲染图像(请自
己想想怎么实现:)  (补充: 实际上，就是排好序的带Alpha通道图片绘制
也不能保证就正确(排序只是是情况稍好些)；最简单的一种情况:3维空间
中的3张带Alpha通道图片相互压住；这时排序绘制也得到错误的渲染；游
戏中经常可以看到这种贴图错误；(一种解决办法是将相互压住的部分分裂
成多个纹理))
 
  我们来看看3个像素的Alpha混合的情况:
  三个颜色为 C1,C2,C3,先是C2混合到C1,得到C12,然后C3再混合到C12得到C123;
  由Alpha混合公式有:
    C12=(C1*(255-C2.A)+C2*C2.A)/255;
    C123=(C12*(255-C3.A)+C3*C3.A)/255;
        =( C1*(255-C2.A)(255-C3.A) + C2*C2.A*255 + C3.C3.A*255 - C2*C2.A*C3.A ) / (255*255)
  由该公式可以看看出，C1先混合C2和先混合C3将得到不同的混合结果(C2/C3的不对称性)；
  所以使用Alpha混合时要得到正确的混合结果必须保证图片颜色值的混合顺序；
 
  那么我想完成这样的一个功能是否就不能完成呢？我想“将需要依次绘制的两张
带Alpha通道图片(两次绘制)，预先合成为一张图片，而保持绘制它的时候和以前
的两次绘制得到的效果一致”
  这个要求实际上要求更改3个颜色的绘制顺序，而得到相同的混合效果；这个功能是
能够完成的，只是需要一个新的混合公式(前面已经证明Alpha混合公式做不到)；
我们来推导一下这个有用的公式：
  三个颜色为 C1,C2,C3,假设用新公式混合C2,C3得到C23,然后C23再用Alpha混合到
C1从而得到C123';
  所以有C123'=(C1*(255-C23.A)+C23*C23.A)/255;
  由于要求C123'等于前面的C123,所以有:
  (C1*(255-C23.A)+C23*C23.A)/255
   = ( C1*(255-C2.A)(255-C3.A) + C2*C2.A*255 + C3.C3.A*255 - C2*C2.A*C3.A ) / (255*255)
  即：C1*(255-C23.A)*255=C1*(255-C2.A)*(255-C3.A)            ----(1)
          C23*C23.A*255=C2*C2.A*255 + C3.C3.A*255 - C2*C2.A*C3.A ----(2)
  由(1)有: C23.A=(C2.A+C3.A) - (C2.A*C3.A/255)    ----(3)
  由(2)有: C23=(C2*C2.A*255 + C3.C3.A*255 - C2*C2.A*C3.A)/(C23.A*255) ----(4)
  (3),(4)就是我们需要的预处理混合公式;
  (提示: (4)中当C23.A=0的时候C23可以为任意值)
  (提示: 更多颜色的预先混合公式用类似的推导也很容易得到；用浮点颜色有利于提高精度，
       用Alpha通道的逆表示法在这里也有很多优势)
 
 
  (不知道谁能想到不排序也能得到正确的Alpha混合方式的快速方法，或者添加
新的混合参数通道,使图片不排序也能正确混合。)

(颜色之间还能进行很多其他类型的混合运算，下面做一些简单示例)

E. 颜色的最大值、最小值混合

void PicBlend_Max(const TPicRegion& picDst,const TPicRegion& picSrc)
{
    long width =min(picDst.width ,picSrc.width );
    long height=min(picDst.height,picSrc.height);
    for (long y=0;y<height;++y)
    {
        for (long x=0;x<width;++x)
        {
            TARGB32& DstColor=Pixels(picDst,x,y);
            TARGB32  SrcColor=Pixels(picSrc,x,y);

            DstColor.b=max(DstColor.b , SrcColor.b);
            DstColor.g=max(DstColor.g , SrcColor.g);
            DstColor.r=max(DstColor.r , SrcColor.r);
            DstColor.a=max(DstColor.a , SrcColor.a);
        }
    }
}
   函数效果:
         
                 源图片0                             源图片1
  

                            
                            (源图片0-源图片1)效果   

void PicBlend_Min(const TPicRegion& picDst,const TPicRegion& picSrc)
{
    long width =min(picDst.width ,picSrc.width );
    long height=min(picDst.height,picSrc.height);
    for (long y=0;y<height;++y)
    {
        for (long x=0;x<width;++x)
        {
            TARGB32& DstColor=Pixels(picDst,x,y);
            TARGB32  SrcColor=Pixels(picSrc,x,y);

            DstColor.b=min(DstColor.b , SrcColor.b);
            DstColor.g=min(DstColor.g , SrcColor.g);
            DstColor.r=min(DstColor.r , SrcColor.r);
            DstColor.a=min(DstColor.a , SrcColor.a);
        }
    }
}
   函数效果:
         
                 源图片0                             源图片1     

                      
                                  混合后效果

F. 颜色的相减和颜色距离
    inline long border_color_down(long color)
    {
        if (color<0)
            return 0;
        else
            return color;
    }
void PicBlend_Sub(const TPicRegion& picDst,const TPicRegion& picSrc)
{
    long width =min(picDst.width ,picSrc.width );
    long height=min(picDst.height,picSrc.height);
    for (long y=0;y<height;++y)
    {
        for (long x=0;x<width;++x)
        {
            TARGB32& DstColor=Pixels(picDst,x,y);
            TARGB32  SrcColor=Pixels(picSrc,x,y);

            DstColor.b=border_color_down(DstColor.b - SrcColor.b);
            DstColor.g=border_color_down(DstColor.g - SrcColor.g);
            DstColor.r=border_color_down(DstColor.r - SrcColor.r);
            DstColor.a=border_color_down(DstColor.a - SrcColor.a);
        }
    }
}
   函数效果:
     
          
                   源图片0                             源图片1       
  
          
            (源图片0-源图片1)效果                  (源图片1-源图片0)效果      

 (提示:比如用减去图片的亮度来得到物体的假阴影(需要考虑方向或倾斜))

void PicBlend_Distance(const TPicRegion& picDst,const TPicRegion& picSrc)
{
    long width =min(picDst.width ,picSrc.width );
    long height=min(picDst.height,picSrc.height);
    for (long y=0;y<height;++y)
    {
        for (long x=0;x<width;++x)
        {
            TARGB32& DstColor=Pixels(picDst,x,y);
            TARGB32  SrcColor=Pixels(picSrc,x,y);

            DstColor.b=abs(DstColor.b - SrcColor.b);
            DstColor.g=abs(DstColor.g - SrcColor.g);
            DstColor.r=abs(DstColor.r - SrcColor.r);
            DstColor.a=abs(DstColor.a - SrcColor.a);
        }
    }
}
   函数效果:
          
                   源图片0                             源图片1       

  
                        
                                    混合效果  

 (提示:比如用连续帧之间的颜色距离图，以得到视野中运动物体的信息(背景会被减掉))

G. 颜色除法
    inline long color_div(long color,long colordiv)
    {
        if (colordiv==0)
            return 255;
        else
            return border_color_up(color*255/colordiv);
    }
void PicBlend_Div(const TPicRegion& picDst,const TPicRegion& picSrc)
{
    long width =min(picDst.width ,picSrc.width );
    long height=min(picDst.height,picSrc.height);
    for (long y=0;y<height;++y)
    {
        for (long x=0;x<width;++x)
        {
            TARGB32& DstColor=Pixels(picDst,x,y);
            TARGB32  SrcColor=Pixels(picSrc,x,y);

            DstColor.b=color_div(DstColor.b , SrcColor.b);
            DstColor.g=color_div(DstColor.g , SrcColor.g);
            DstColor.r=color_div(DstColor.r , SrcColor.r);
            DstColor.a=color_div(DstColor.a , SrcColor.a);
        }
    }
}
   函数效果:
          
                   源图片0                             源图片1            
          
            
          (源图片0 div 源图片1)效果             (源图片1 div 源图片0)效果     

   
H. 把颜色亮度当作为混合系数的混合效果
    inline unsigned long gray(const TARGB32& Color)
    {
        return (Color.r+Color.g+Color.b)/3;
    }

void PicBlend_MixByGray(const TPicRegion& picDst,const TPicRegion& picSrc)
{
    long width =min(picDst.width ,picSrc.width );
    long height=min(picDst.height,picSrc.height);
    for (long y=0;y<height;++y)
    {
        for (long x=0;x<width;++x)
        {
            TARGB32& DstColor=Pixels(picDst,x,y);
            TARGB32  SrcColor=Pixels(picSrc,x,y);
            unsigned long Alpha=(gray(SrcColor)+255-gray(DstColor))>>1;

            DstColor.b=(DstColor.b*(255-Alpha) + SrcColor.b*Alpha)/255;
            DstColor.g=(DstColor.g*(255-Alpha) + SrcColor.g*Alpha)/255;
            DstColor.r=(DstColor.r*(255-Alpha) + SrcColor.r*Alpha)/255;
            DstColor.a=(DstColor.a*(255-Alpha) + SrcColor.a*Alpha)/255;
        }
    }
}

   函数效果:
          
                   源图片0                             源图片1                
          
                        
                                  混合后效果


    inline unsigned char mix_color(unsigned long a,unsigned long b)
    {
        return a+b-((a*b) >>7 );
    }

void PicBlend_MixByColor(const TPicRegion& picDst,const TPicRegion& picSrc)
{
    long width =min(picDst.width ,picSrc.width );
    long height=min(picDst.height,picSrc.height);
    for (long y=0;y<height;++y)
    {
        for (long x=0;x<width;++x)
        {
            TARGB32& DstColor=Pixels(picDst,x,y);
            TARGB32  SrcColor=Pixels(picSrc,x,y);

            DstColor.b=mix_color(DstColor.b,SrcColor.b);
            DstColor.g=mix_color(DstColor.g,SrcColor.g);
            DstColor.r=mix_color(DstColor.r,SrcColor.r);
            DstColor.a=mix_color(DstColor.a,SrcColor.a);
        }
    }
}

   函数效果:
          
                   源图片0                             源图片1                
          
                       
                                   混合后效果

提示: 还有其他很多颜色之间的混合运算，你也可组合各种运算用到颜色的混合中，
也许你会得到一种新的有趣或有用的算法呢:) 


(颜色混合系列原来计划写3篇文章,后来将速度优化部分取消了；考虑主
要有：例子函数很多，只能选择其中的几个来优化；很多优化的效果和优
化侧重点可能和实际要处理的数据有关；我的blog中已经有很多优化的具
体文章，本系列文章就不再重复这"体力活"了:)


 

housisong
关注
专栏目录
stable diffusion 模型融合
liguandong
06-21 356
use MBW：分层对模型融合，Merge Block Weighted，已经集成在superMerger中了，注意alpha和beta是两个模型加权的两个参数，Weights Setting和Weights Presets，后者里面有详细的参数，可以修改，Weights Setting->Werights for alpha->Preset中有很多模式，这些模式都是可选的。下面是官方的融合预设。模型合并：对多个模型进行加权混合，从而得到一个合并后的模型，简单的说，就是每个模型乘一个系数，然后混合在一起。
Direct-X学习笔记--Alpha颜色混合
puppet_master的专栏
08-08 4385
Alpha混合技术是灰常有用的东东。待我好好学习一下。 一.简介 首先看一下Alpha通道，Alpha通道是计算机中存储图片透明度信息的通道，它是一个8位灰度的通道，用256级灰度记录图像中的透明信息，定义透明，不透明，半透明等，其中黑色表示完全透明，白色表示不透明，灰色为半透明。 如果不用Alpha混合，我们绘制图形的颜色总是替换当前颜色缓冲区中存在的颜色，这样后面的物体总是覆盖在原有的物
D3D中的Alpha颜色混合（3）
weixin_34160277的博客
09-20 192
本篇是D3D中的Alpha颜色混合（2）的后续篇。另一种实现实现背景透明显示的简便方法是直接应用渲染管道流水线的Alpha测试功能进行，D3D中的Alpha颜色混合（2）介绍的接口方法实际就是对Alpha测试的一个包装。Alpha测试是对需要写入绘图表面的像素颜色Alpha值进行测试，判断该Alpha值是否满足预先设定的条件，如果满足条件，则将该像素颜色值写入绘图表面，否则不写入。 如上图所示，瞄...
Alpha颜色混合的魔法 上篇
HouSisong的专栏
08-14 7089
                           Alpha颜色混合的魔法 上篇                      HouSisong@GMail.com   2007.08.14摘要：本系列文章介绍了一种在图像处理、2D游戏、3D游戏中经常使用的图片混合模型:Alpha颜色混合;它就像神奇的魔法一样，在电脑屏幕上给我们展现出一个个绚丽多彩的世界!全文 分为: 上篇 各种Alp
alpha混合原理
woaitmac1314的专栏
05-18 1050
alpha混合原理在前面介绍的示例程序中，绘制图形的颜色总是替换当前颜色缓冲区中存在的颜色，这样后面的物体总是覆盖在原有的物体上。但是当想要绘制类似于玻璃、水等具有透明效果的物体时，这种方法显然满足不了要求。通过定义一个表示物体半透明度的alpha值和一个半透明计算公式，可以将要绘制的物体颜色与颜色缓冲区中存在的颜色相混合，从而绘制出具有半透明效果的物体。Direct3D计算alpha颜色混合的方法如下：color = (RGBsrc * Ksrc) OP (RGBdst * Kdst)其中color表示a
Alpha颜色混合的魔法 上篇 “法术篇”
OpenGL 技术
10-23 2390
 为了便于讨论，这里只处理32bit的ARGB颜色；代码使用C++,编译器:VC2005A: 一些颜色和图片的数据定义: #define asm __asmtypedef unsigned char TUInt8; // [0..255]struct TARGB32 //32 bit color{TUInt8 b,g,r,a; //a is alpha};struct TPicRe
Alpha混合：一个颜色上覆盖另一个透明颜色
我是菜鸡
04-28 2151
事情起因本来是这样的，我在网站里加了一张纯色的图片，颜色是#EFCAC3 结果网站上呈现出来的时候变色了？？？变成了#A78D88。 一脸懵逼，然后我打开控制台看了一下，页面上其有一条rgba(0,0,0,0.3) Σ( ￣д￣；) ！！！…… 那想让显示之后的效果为#EFCAC3就得重新设置原来的图片颜色了，这就涉及到计算alpha混合了。 Alpha混合就是实现一种混合之后的颜色效果。 假...
混合动作空间｜揭秘创造人工智能的黑魔法（3）
m0_55289267的博客
06-20 357
我们将从本篇博客开始，揭秘学术界和工业界解决混合动作空间的种种黑魔法。本篇将介绍，基于Q函数的强化学习混合动作空间算法。
混合动作空间｜揭秘创造人工智能的黑魔法（4）
最新发布
m0_55289267的博客
06-26 379
还记得我们的混合动作空间专栏吗？从本篇专栏起，我们将为大家讲解基于V函数的混合动作空间算法，包括H-PPO、HiPPO、腾讯绝悟、OpenAI Five，AlphaStar等。
混合动作空间｜揭秘创造人工智能的黑魔法（2）
m0_55289267的博客
06-15 301
本文则将以游戏环境为例，介绍如何对强化学习的动作空间进行预处理（action space shaping），以提升算法性能和收敛速度。
Qt for iOS，Qt 与Objective C混合编程
安晓辉生涯——聚焦程序员的职业规划与成长
02-02 2万+
介绍如何在 Qt 项目里使用 Objective C，介绍如何在 Qt Quick 界面上叠加 iOS 原生界面……
颜色透明度或 alpha 值与十六进制对照表
UserGuan的博客
12-08 1万+
透明度分为256个等级，即 0 ~ 256 之间的取值，0 表示完全透明，255 表示完全不透明。透明度 0 (完全透明) –> 255 (完全不透明)对应的 16 进制是 00 (完全透明) –> FF (完全不透明)，如: 50% 透明度的 50% 是 256 的一半即 128，因为是从 0 开始算的，所以是 127，转换成 16 进制就是 7F。注意：透明度 和 不透明度 是两个概念，它们加起来是1，或者100%
十六进制颜色透明度alpha值对照表
莫问前程F1的博客
05-18 1988
100% — FF 99% — FC 98% — FA 97% — F7 96% — F5 95% — F2 94% — F0 93% — ED 92% — EB 91% — E8 90% — E6 89% — E3 88% — E0 87% — DE 86% — DB 85% — D9 84% — D6 83% — D4 82% — D1 81% — CF 80% — CC 79% — C9 78% — C7 77% — C4 76% — C2 75% — BF 74% — BD 73% — BA 72%
减少图像的颜色数量（除法运算）
晴天tingzi
03-09 2674
color=color/div*div+div/2若div为8，则原来RGB每个通道的256种颜色减少为32种若div为64，则原来RGB每个通道的256种颜色减少为4种，此使三通道所有能表示的颜色由4*4*4=64种。256个数表示的范围是0~255255/64=3，所有运算后其实得到的是4个数，也就是0，1，2，3255/64*64，上面的4个*64=0，64，128，192256/64*64...
ARGB 颜色取值与透明度对照表
热门推荐
赵小贱的博客
02-09 2万+
1.  ARGB 依次代表透明度（alpha）、红色(red)、绿色(green)、蓝色(blue)。2. 透明度分为256阶（0-255），计算机上用16进制表示为（00-ff）。透明就是0阶，不透明就是255阶,如果50%透明就是127阶（256的一半当然是128，但因为是从0开始，所以实际上是127）。3.透明度 和 不透明度 是两个概念， 它们加起来是1，或者100%.//透明度对照表 ...
alpha值是色彩的强度 1 最强，不透明 0 最弱，透明的。
非正经研究生的猪圈
07-11 4981
alpha值是色彩的强度 1 最强，不透明 0 最弱，透明的。
窗体的Alpha通道透明色支持
weixin_33733810的博客
01-08 345
参考： http://www.delphibbs.com/delphibbs/dispq.asp?lid=2190768Windows 2000后，为了支持类似MAC界面的Alpha通道混合效果，提供了GDI+，提供了很多的界面功能函数，可以实现很好的界面效果。例如可以使用UpdateLayeredWindow来实现窗体的颜色透明。但是一旦 Form 被定义为利用 LayeredWindow ，窗...
Unity_Shader学习笔记_02_透明度测试，透明度混合，半透明.shader入门精要
bin1479的博客
05-19 414
关于透明度测试，主要是通过clip函数来实现裁剪功能 函数：void clip(float4 x);void clip(float3 x);void clip(float2 x);void clip(float x). 如果指定的一个参数为负数，就会舍弃当前像素的输出颜色 SubShader { Tags {“Queue”=“AlphaTest” “IgnoreProjector”=“True” ...
【unity shader 入门精要 读书笔记】透明
赖张殷-Eagle
05-06 382
一、透明 1、透明度测试【Alpha Test】 它采用一种“霸道极端”的机制：只要有一个片元的透明度不满足条件【通常是小于某个阈值】，那么它对应的片元就会被舍弃。被舍弃的片元将不会再进行任何处理，也不会对颜色缓冲产生任何影响；否则，就会按照普通的不透明物体的处理方式来处理它，即进行深度测试、深度写入等。 也就是说，透明度测试是不需要关闭深度写入的，它和其他不透明物体最大的不同就是它会根据透...
深入了解Alpha颜色混合与D3D图像处理技术
Alpha混合模型基于颜色值的Alpha通道，该通道表示颜色的不透明度，或者说是颜色的透明度。 ### 知识点详解 #### 1. Alpha通道概念 Alpha通道是一个8位的图像通道，用于表示像素的透明度，其值的范围从0到255。其中...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值