哇_哈哈_哈，簡(jiǎn)書(shū)的一個(gè)月內(nèi)容清查竟然提前搞完了，有種久旱逢甘霖般的開(kāi)心，掘金的界面不夠好看，太單調(diào)了，好啦，不扯了，開(kāi)始上今天的干貨

一、圖像渲染之深入了解混合

OpenGL渲染時(shí)，會(huì)分別的把顏色值存在顏色緩沖區(qū)中，每個(gè)片段的深度值也是存在深度緩沖區(qū)中。當(dāng)深度緩沖區(qū)被關(guān)閉的時(shí)候，新的顏色值將簡(jiǎn)單的直接覆蓋掉原來(lái)顏色緩沖區(qū)中的顏色值，當(dāng)深度緩沖區(qū)再次被打開(kāi)時(shí)，新的顏色片段只是當(dāng)它們比原來(lái)的值更接近鄰近的裁剪平面才會(huì)替換原來(lái)的顏色片段。

所以O(shè)penGL默認(rèn)是不開(kāi)啟混合效果的；

如果你想得到圖像或者顏色混合后的效果，比如紅色和藍(lán)色混合，是需要自己手動(dòng)打開(kāi)的;如果不手動(dòng)打開(kāi)，重合的一部分圖像或者顏色會(huì)被覆蓋掉。

1、打開(kāi)和關(guān)閉混合的指令：

//開(kāi)啟混合
glEnable(GL_BLEND);

//關(guān)閉混合
glDisable(GL_BLEND);

2、設(shè)置顏色的組合方式

當(dāng)混合功能被啟用時(shí)，源顏色和目標(biāo)顏色的組合方式是混合方程式控制的。在默認(rèn)情況下，混合方程式如下圖所示：

 Cf = (Cs * S) + (Cd * D);
 
 Cf: 最終計(jì)算參數(shù)的顏色
 Cs: 源顏色：作為當(dāng)前渲染命令結(jié)果進(jìn)入顏色緩沖區(qū)的顏色值
 Cd: 目標(biāo)顏色：已經(jīng)存儲(chǔ)在顏色緩沖區(qū)的顏色值
 S: 源混合因子
 D: 目標(biāo)混合因子

3、設(shè)置混合因子

設(shè)置混合因子需要用到glBlendFun函數(shù)

glBlendFunc(GLenum S, GLenum D);

 S: 源混合因子
 D: 目標(biāo)混合因子

源混合因子和目標(biāo)混合因子都是可以在下表進(jìn)行選擇的

混合因子.jpg

其中R，G，B，A分別代表紅，綠，藍(lán)，alpha
表中：
含有下標(biāo)S的代表可選的源混合因子，
含有下標(biāo)D代表可選的目標(biāo)混合因子

其中的C代表常量顏色(默認(rèn)是黑色)

4、設(shè)置混合因子舉例，方便理解

比如設(shè)置了這樣一個(gè)混合函數(shù)組合

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

如果顏色緩沖區(qū)中已經(jīng)有一種紅色Red(1.0f, 0.0f, 0.0f, 0.0f),之前我們說(shuō)過(guò)，已經(jīng)存在顏色緩沖區(qū)中的顏色是目標(biāo)顏色；
現(xiàn)在在這個(gè)顏色的上面再用一種alpa為0.6的藍(lán)色Blue(0.0f,0.0f,1.0f,0.6f)

此刻我們把這個(gè)場(chǎng)景中的變量和公式對(duì)號(hào)入座一下

Cf = (Cs * S) + (Cd * D);

 Cs: 源顏色：就是后來(lái)的這個(gè)帶透明度的藍(lán)色 Blue(0.0f,0.0f,1.0f,0.6f)
 Cd: 目標(biāo)顏色：已經(jīng)存儲(chǔ)在顏色緩沖區(qū)的紅色 Red(1.0f, 0.0f, 0.0f, 0.0f)
 S: 源混合因子是GL_SRC_ALPHA，經(jīng)過(guò)查表得知S為源顏色Blue的alpha值為0.6f
 D: 目標(biāo)混合因子是GL_ONE_MINUS_SRC_ALPHA,經(jīng)過(guò)查表得知D為1-alpha的值，為0.4f

所以設(shè)置以上混合方式之后，最后的顏色等價(jià)于(Blue * 0.6f + Red * 0.4f)，計(jì)算之后得到顏色值(0.4f, 0.0f, 0.6f);

所以最終的顏色是以原先的紅色(目標(biāo)顏色)與后來(lái)的藍(lán)色(源顏色)進(jìn)行組合。源顏色的alpha的值越高，添加的藍(lán)色顏色成分越高，目標(biāo)顏色所保留的紅色成分就越少。

混合函數(shù)經(jīng)常用于實(shí)現(xiàn)在其他一些不透明的物體面前繪制一個(gè)透明物體的效果。

5、改變組合方程式

默認(rèn)的組合方程式是上面我們說(shuō)的

Cf = (Cs * S) + (Cd * D);

我們也可以修改混合的方程式，目前有五種可用的混合方程模式，可以通過(guò)如下混合方程函數(shù)來(lái)修改

glBlendEquation(GLenum mode);

可用的五種方程式如下表

可使用的五種混合方程模式.png

6、glBlendFuncSeparate函數(shù)

除了glBlendFunc函數(shù)能設(shè)置混合因子，還有更靈活的選擇

void glBlendFuncSeparate(GLenum strRGB,GLenum dstRGB ,GLenum strAlpha,GLenum dstAlpha);

strRGB: 源顏?的混合因?
dstRGB: ?標(biāo)顏?的混合因?
strAlpha: 源顏色的Alpha因?
dstAlpha: ?標(biāo)顏色的Alpha因?

需要注意的是

glBlendFunc指定源和目標(biāo)RGBA值的混合函數(shù)；但是glBlendFuncSeparate函數(shù)則允許為RGB和Alpha單獨(dú)指定混合函數(shù)

在混合因子表中，
GL_CONSTANT_COLOR,
GL_ONE_MINUS_CONSTANT_COLOR,
GL_CONSTANT_ALPHA,
GLONE_MINUS_CONSTANT值允許混合方程式中引入一個(gè)常量混合顏色。

7、常量混合顏色

默認(rèn)初始化為黑色 (0.0f,0.0f,0.0f,0.0f),但是還是可以修改這個(gè)常量混合顏色

void glBlendColor(GLclampf red ,GLclampf green ,GLclampf blue ,GLclampf alpha );

二、圖像渲染之混合案例實(shí)現(xiàn)

接下來(lái)我們用代碼實(shí)現(xiàn)一個(gè)完整的顏色混合案例,函數(shù)的意思不明白的可以移至我前幾節(jié)的博客，里面有詳細(xì)的解釋

1、首先是固定配置OpenGL環(huán)境以及注冊(cè)函數(shù)部分

int main(int argc, char* argv[])
{
    gltSetWorkingDirectory(argv[0]);
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA | GLUT_DEPTH);
    glutInitWindowSize(800, 600);
    glutCreateWindow("移動(dòng)矩形，觀察顏色");
    
    GLenum err = glewInit();
    if (GLEW_OK != err)
    {
        fprintf(stderr, "Error: %s\n", glewGetErrorString(err));
        return 1;
    }
    
    glutReshapeFunc(ChangeSize);
    glutDisplayFunc(RenderScene);
    glutSpecialFunc(SpecialKeys);
    
    SetupRC();
    
    glutMainLoop();
    return 0;
}

2、開(kāi)始定義一些矩形批次類(lèi)，著色器管理以及一個(gè)可移動(dòng)的矩形一維數(shù)組

GLBatch squareBatch;
GLBatch greenBatch;
GLBatch redBatch;
GLBatch blueBatch;
GLBatch blackBatch;

GLShaderManager shaderManager;


GLfloat blockSize = 0.2f;
GLfloat vVerts[] = { -blockSize, -blockSize, 0.0f,
    blockSize, -blockSize, 0.0f,
    blockSize,  blockSize, 0.0f,
    -blockSize,  blockSize, 0.0f};

3、設(shè)置changeSize函數(shù)，設(shè)置視口

void ChangeSize(int w, int h)
{
    glViewport(0, 0, w, h);
}

4、setupRC設(shè)置清屏顏色，以及繪制一堆矩形批次類(lèi)

void SetupRC()
{
    glClearColor(1.0f, 1.0f, 1.0f, 1.0f );
    shaderManager.InitializeStockShaders();

    //繪制1個(gè)移動(dòng)矩形
    squareBatch.Begin(GL_TRIANGLE_FAN, 4);
    squareBatch.CopyVertexData3f(vVerts);
    squareBatch.End();
    
    //繪制4個(gè)固定矩形
    GLfloat vBlock[] = { 0.25f, 0.25f, 0.0f,
        0.75f, 0.25f, 0.0f,
        0.75f, 0.75f, 0.0f,
        0.25f, 0.75f, 0.0f};
    
    greenBatch.Begin(GL_TRIANGLE_FAN, 4);
    greenBatch.CopyVertexData3f(vBlock);
    greenBatch.End();
    
    
    GLfloat vBlock2[] = { -0.75f, 0.25f, 0.0f,
        -0.25f, 0.25f, 0.0f,
        -0.25f, 0.75f, 0.0f,
        -0.75f, 0.75f, 0.0f};
    
    redBatch.Begin(GL_TRIANGLE_FAN, 4);
    redBatch.CopyVertexData3f(vBlock2);
    redBatch.End();
    
    
    GLfloat vBlock3[] = { -0.75f, -0.75f, 0.0f,
        -0.25f, -0.75f, 0.0f,
        -0.25f, -0.25f, 0.0f,
        -0.75f, -0.25f, 0.0f};
    
    blueBatch.Begin(GL_TRIANGLE_FAN, 4);
    blueBatch.CopyVertexData3f(vBlock3);
    blueBatch.End();
    
    
    GLfloat vBlock4[] = { 0.25f, -0.75f, 0.0f,
        0.75f, -0.75f, 0.0f,
        0.75f, -0.25f, 0.0f,
        0.25f, -0.25f, 0.0f};
    
    blackBatch.Begin(GL_TRIANGLE_FAN, 4);
    blackBatch.CopyVertexData3f(vBlock4);
    blackBatch.End();
}

5、然后設(shè)置特殊鍵位，來(lái)控制中間矩形的移動(dòng)

//上下左右鍵位控制移動(dòng)
void SpecialKeys(int key, int x, int y)
{
    GLfloat stepSize = 0.025f;
    
    GLfloat blockX = vVerts[0];
    GLfloat blockY = vVerts[7];
    
    if(key == GLUT_KEY_UP)
        blockY += stepSize;
    
    if(key == GLUT_KEY_DOWN)
        blockY -= stepSize;
    
    if(key == GLUT_KEY_LEFT)
        blockX -= stepSize;
    
    if(key == GLUT_KEY_RIGHT)
        blockX += stepSize;
    
    
    if(blockX < -1.0f) blockX = -1.0f;
    if(blockX > (1.0f - blockSize * 2)) blockX = 1.0f - blockSize * 2;;
    if(blockY < -1.0f + blockSize * 2)  blockY = -1.0f + blockSize * 2;
    if(blockY > 1.0f) blockY = 1.0f;
    
    
    vVerts[0] = blockX;
    vVerts[1] = blockY - blockSize*2;
    
    vVerts[3] = blockX + blockSize*2;
    vVerts[4] = blockY - blockSize*2;
    
    vVerts[6] = blockX + blockSize*2;
    vVerts[7] = blockY;
    
    vVerts[9] = blockX;
    vVerts[10] = blockY;
    
    squareBatch.CopyVertexData3f(vVerts);
    
    glutPostRedisplay();
}

6、前面的都不是重點(diǎn)，之前的文章都有詳細(xì)的注釋分解介紹，混合重點(diǎn)是在RenderScence函數(shù)中進(jìn)行的，需要注意的是使用單元著色器，因?yàn)闋顟B(tài)機(jī)機(jī)制，如果不重新設(shè)置顏色，那么最后畫(huà)出來(lái)的矩形顏色都是一種顏色，所以如果設(shè)置不同顏色渲染矩形，就要在繪制之前修改著色器管理器的渲染顏色

//召喚場(chǎng)景
void RenderScene(void)
{
    
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT);
    
    //定義4種顏色
    GLfloat vRed[] = { 1.0f, 0.0f, 0.0f, 0.5f };
    GLfloat vGreen[] = { 0.0f, 1.0f, 0.0f, 1.0f };
    GLfloat vBlue[] = { 0.0f, 0.0f, 1.0f, 1.0f };
    GLfloat vBlack[] = { 0.0f, 0.0f, 0.0f, 1.0f };
    
    //召喚場(chǎng)景的時(shí)候，將4個(gè)固定矩形繪制好
    //使用 單位著色器
    //參數(shù)1：簡(jiǎn)單的使用默認(rèn)笛卡爾坐標(biāo)系（-1，1），所有片段都應(yīng)用一種顏色。GLT_SHADER_IDENTITY
    //參數(shù)2：著色器顏色
    shaderManager.UseStockShader(GLT_SHADER_IDENTITY, vGreen);
    greenBatch.Draw();
    
    shaderManager.UseStockShader(GLT_SHADER_IDENTITY, vRed);
    redBatch.Draw();
    
    shaderManager.UseStockShader(GLT_SHADER_IDENTITY, vBlue);
    blueBatch.Draw();
    

    shaderManager.UseStockShader(GLT_SHADER_IDENTITY, vBlack);
    blackBatch.Draw();
    
    //組合核心代碼
    //1.開(kāi)啟混合
    glEnable(GL_BLEND);
    //2.開(kāi)啟組合函數(shù) 計(jì)算混合顏色因子
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
    //3.使用著色器管理器
    //*使用 單位著色器
    //參數(shù)1：簡(jiǎn)單的使用默認(rèn)笛卡爾坐標(biāo)系（-1，1），所有片段都應(yīng)用一種顏色。GLT_SHADER_IDENTITY
    //參數(shù)2：著色器顏色
    shaderManager.UseStockShader(GLT_SHADER_IDENTITY, vRed);
    //4.容器類(lèi)開(kāi)始繪制
    squareBatch.Draw();
    //5.關(guān)閉混合功能
    glDisable(GL_BLEND);
    
    //同步繪制命令
    glutSwapBuffers();
}

最終實(shí)現(xiàn)的效果如下：

混合1.png

混合2.png

混合3.png

混合4.png

溪浣雙鯉的技術(shù)摸爬滾打之路