九、OpenGL初探之OpenGL圖像渲染對圖像混合的理解

時間  2019-11-07
標籤 opengl 初探 圖像 渲染 混合 理解 简体版
原文   原文鏈接

1、圖像渲染之深刻了解混合

OpenGL渲染時，會分別的把顏色值存在顏色緩衝區中，每一個片斷的深度值也是存在深度緩衝區中。當深度緩衝區被關閉的時候，新的顏色值將簡單的直接覆蓋掉原來顏色緩衝區中的顏色值，當深度緩衝區再次被打開時，新的顏色片斷只是當它們比原來的值更接近鄰近的裁剪平面纔會替換原來的顏色片斷。數組

因此OpenGL默認是不開啓混合效果的；bash

若是你想獲得圖像或者顏色混合後的效果，好比紅色和藍色混合，是須要本身手動打開的;若是不手動打開，重合的一部分圖像或者顏色會被覆蓋掉。函數

一、打開和關閉混合的指令：oop

//開啓混合
glEnable(GL_BLEND);

複製代碼
//關閉混合
glDisable(GL_BLEND);

複製代碼

二、設置顏色的組合方式ui

當混合功能被啓用時，源顏色和目標顏色的組合方式是混合方程式控制的。在默認狀況下，混合方程式以下圖所示：

 Cf = (Cs * S) + (Cd * D);
 
 Cf: 最終計算參數的顏色
 Cs: 源顏色：做爲當前渲染命令結果進入顏色緩衝區的顏色值
 Cd: 目標顏色：已經存儲在顏色緩衝區的顏色值
 S: 源混合因子
 D: 目標混合因子

複製代碼

三、設置混合因子spa

設置混合因子須要用到glBlendFun函數code

glBlendFunc(GLenum S, GLenum D);

 S: 源混合因子
 D: 目標混合因子

複製代碼

源混合因子和目標混合因子都是能夠在下表進行選擇的cdn

混合因子.jpg

其中R，G，B，A分別表明紅，綠，藍，alpha 表中： 含有下標S的表明可選的源混合因子， 含有下標D表明可選的目標混合因子blog

其中的C表明常量顏色(默認是黑色)ci

四、設置混合因子舉例，方便理解

好比設置了這樣一個混合函數組合

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

複製代碼

若是顏色緩衝區中已經有一種紅色Red(1.0f, 0.0f, 0.0f, 0.0f),以前咱們說過，已經存在顏色緩衝區中的顏色是目標顏色； 如今在這個顏色的上面再用一種alpa爲0.6的藍色Blue(0.0f,0.0f,1.0f,0.6f)

此刻咱們把這個場景中的變量和公式對號入座一下

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

 Cs: 源顏色：就是後來的這個帶透明度的藍色 Blue(0.0f,0.0f,1.0f,0.6f)
 Cd: 目標顏色：已經存儲在顏色緩衝區的紅色 Red(1.0f, 0.0f, 0.0f, 0.0f)
 S: 源混合因子是GL_SRC_ALPHA，通過查表得知S爲源顏色Blue的alpha值爲0.6f
 D: 目標混合因子是GL_ONE_MINUS_SRC_ALPHA,通過查表得知D爲1-alpha的值，爲0.4f

複製代碼

因此設置以上混合方式以後，最後的顏色等價於(Blue * 0.6f + Red * 0.4f)，計算以後獲得顏色值(0.4f, 0.0f, 0.6f);

因此最終的顏色是以原先的紅色(目標顏色)與後來的藍色(源顏色)進行組合。源顏色的alpha的值越高，添加的藍色顏色成分越高，目標顏色所保留的紅色成分就越少。

混合函數常常用於實如今其餘一些不透明的物體面前繪製一個透明物體的效果。

五、改變組合方程式

默認的組合方程式是上面咱們說的

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

複製代碼

咱們也能夠修改混合的方程式，目前有五種可用的混合方程模式，能夠經過以下混合方程函數來修改

glBlendEquation(GLenum mode);

複製代碼

可用的五種方程式以下表

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

六、glBlendFuncSeparate函數

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

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

strRGB: 源顏⾊的混合因⼦
dstRGB: ⽬標顏⾊的混合因⼦
strAlpha: 源顏色的Alpha因⼦
dstAlpha: ⽬標顏色的Alpha因⼦

複製代碼

須要注意的是

glBlendFunc指定源和目標RGBA值的混合函數；可是glBlendFuncSeparate函數則容許爲RGB和Alpha單獨指定混合函數

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

複製代碼

七、常量混合顏色

默認初始化爲黑色 (0.0f,0.0f,0.0f,0.0f),可是仍是能夠修改這個常量混合顏色

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

複製代碼

2、圖像渲染之混合案例實現

接下來咱們用代碼實現一個完整的顏色混合案例,函數的意思不明白的能夠移至我前幾節的博客，裏面有詳細的解釋

一、首先是固定配置OpenGL環境以及註冊函數部分

int main(int argc, char* argv[])
{
    gltSetWorkingDirectory(argv[0]);
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA | GLUT_DEPTH);
    glutInitWindowSize(800, 600);
    glutCreateWindow("移動矩形，觀察顏色");
    
    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;
}

複製代碼

二、開始定義一些矩形批次類，着色器管理以及一個可移動的矩形一維數組

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

複製代碼

三、設置changeSize函數，設置視口

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

複製代碼

四、setupRC設置清屏顏色，以及繪製一堆矩形批次類

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

    //繪製1個移動矩形
    squareBatch.Begin(GL_TRIANGLE_FAN, 4);
    squareBatch.CopyVertexData3f(vVerts);
    squareBatch.End();
    
    //繪製4個固定矩形
    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();
}

複製代碼

五、而後設置特殊鍵位，來控制中間矩形的移動

//上下左右鍵位控制移動
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();
}


複製代碼

六、前面的都不是重點，以前的文章都有詳細的註釋分解介紹，混合重點是在RenderScence函數中進行的，須要注意的是使用單元着色器，由於狀態機機制，若是不從新設置顏色，那麼最後畫出來的矩形顏色都是一種顏色，因此若是設置不一樣顏色渲染矩形，就要在繪製以前修改着色器管理器的渲染顏色

//召喚場景
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 };
    
    //召喚場景的時候，將4個固定矩形繪製好
    //使用 單位着色器
    //參數1：簡單的使用默認笛卡爾座標系（-1，1），全部片斷都應用一種顏色。GLT_SHADER_IDENTITY
    //參數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.開啓混合
    glEnable(GL_BLEND);
    //2.開啓組合函數 計算混合顏色因子
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
    //3.使用着色器管理器
    //*使用 單位着色器
    //參數1：簡單的使用默認笛卡爾座標系（-1，1），全部片斷都應用一種顏色。GLT_SHADER_IDENTITY
    //參數2：着色器顏色
    shaderManager.UseStockShader(GLT_SHADER_IDENTITY, vRed);
    //4.容器類開始繪製
    squareBatch.Draw();
    //5.關閉混合功能
    glDisable(GL_BLEND);
    
    //同步繪製命令
    glutSwapBuffers();
}


複製代碼

最終實現的效果以下：

混合1.png

混合2.png

混合3.png

混合4.png
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程