最近學習OpenGL,雖然說Qt可以使用原生OpenGL的API,但是Qt也提供了封裝的QOpenGL系列。我用原生的和封裝的分別實現了一次簡單渲染（都是渲染兩個有深度和顏色的三角形）。

       原生的OpenGL用法我就不贅述了（主要是總結不好TvT，而且有很多資料可查）。（PS:兩個程式的原始碼附在最後了）
       主要說一下封裝的QOpenGL幾個注意的地方
一、 QOpenGLBuffer類
在使用前，建構函式處可指定Buffer型別。預設為VertexBuffer。

在使用之前先要create()，之後bind到當前的OpenGL context上。
使用allocate()分配儲存空間，同時可以用某個資料來初始化分配的空間。

相當於原生API中：

<code class="hljs" style="display: inline-block; padding: 0.5em; background-color: rgb(35, 35, 35); color: rgb(230, 225, 220); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; overflow-x: auto; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">glGenBuffers();
glBindBuffer();
glBufferData();
</code>

二、 QOpenGLShader類
可以在建構函式的地方選擇shader的型別。可以有多種方式新增原始碼，詳情參見Qt幫助文件，很簡單。

相當於原生API中：

三、 QOpenGLShaderProgram類
可以直接從檔案、原始碼之類的新增Shader。也可以使用addShader新增現有的Shader。需要呼叫link()將新增到這個program的shader都連結起來。之後呼叫bind()使該program成為當前唯一繫結到OpenGL Context上的其它porgram將被釋放（release）掉。

相當於原生API中：

之後使用enableAttributeArray來啟用相應的頂點屬性陣列（Enables the vertex array at location in this shader program so that the value set by setAttributeArray() on location will be used by the shader program.）

相當於原生API中：

由於程式很簡單，沒有涉及QOpenGLContext類和其他一些類的介紹~感興趣可以去翻閱他人的部落格之類的。。。（PS：我還是喜歡用原生的。。。）

       不過我是看不出來有什麼深度，

 main.cpp

#include"mainwindow.h"

#include<QApplication>

intmain(intargc,char*argv[])

{

QApplicationa(argc,argv);

MainWindoww;

w.show();

returna.exec();

}

mainwindow.h

#ifndefMAINWINDOW_H

#defineMAINWINDOW_H

#include<QMainWindow>

namespaceUi{

classMainWindow;

}

classMainWindow:publicQMainWindow

{

Q_OBJECT

public:

explicitMainWindow(QWidget*parent=0);

~MainWindow();

private:

Ui::MainWindow*ui;

};

#endif//MAINWINDOW_H

mainwindow.cpp

#include"mainwindow.h"

#include"ui_mainwindow.h"

MainWindow::MainWindow(QWidget*parent):

QMainWindow(parent),

ui(newUi::MainWindow)

{

ui->setupUi(this);

}

MainWindow::~MainWindow()

{

deleteui;

}

      看到這裡，是不是感到很奇怪，就一個普通的QMainWindow，opengl的內容在哪呼叫？

      這個倒是看到了以前沒碰到多的方法，在mainwindow.ui中

      <widgetclass="xiaoGLWidget"name="openGLWidget">

<propertyname="sizePolicy">

<sizepolicyhsizetype="Expanding"vsizetype="Expanding">

<horstretch>0</horstretch>

<verstretch>0</verstretch>

</sizepolicy>

</property>

</widget>

      在UI佈局中使用了一個自定義的widget，不知道他是怎麼拖出來的，很神奇。

xiaoglwidget.h

#ifndefXIAOGLWIDGET_H

#defineXIAOGLWIDGET_H

#include<QOpenGLWidget>

#include<QOpenGLFunctions_4_3_Compatibility>

#include<QOpenGLShader>

#include<QOpenGLShaderProgram>

#include<QOpenGLBuffer>

classxiaoGLWidget:publicQOpenGLWidget,protectedQOpenGLFunctions_4_3_Compatibility

{

public:

xiaoGLWidget(QWidget*parent);

virtual~xiaoGLWidget();

voidinstallShader();

voidsendDataToOpenGL();

protected:

voidinitializeGL();

voidpaintGL();

voidresizeGL(intw,inth);

private:

QOpenGLShaderProgramm_program;

QOpenGLBufferm_vertexBuf;

QOpenGLBufferm_indexBuf;

};

#endif//XIAOGLWIDGET_H

xiaoglwidget.cpp

#include"xiaoglwidget.h"

externconstchar*vertexShaderCode;

externconstchar*fragmentShaderCode;

xiaoGLWidget::xiaoGLWidget(QWidget*parent):m_program(this),m_indexBuf(QOpenGLBuffer::IndexBuffer)

{

}

xiaoGLWidget::~xiaoGLWidget()

{

m_vertexBuf.destroy();

m_indexBuf.destroy();

}

voidxiaoGLWidget::initializeGL()

{

initializeOpenGLFunctions();

installShader();

sendDataToOpenGL();

glEnable(GL_DEPTH_TEST);

}

voidxiaoGLWidget::paintGL()

{

initializeOpenGLFunctions();

glClear(GL_DEPTH_BUFFER_BIT|GL_COLOR_BUFFER_BIT);

glDrawElements(GL_TRIANGLES,6,GL_UNSIGNED_SHORT,NULL);

}

voidxiaoGLWidget::resizeGL(intw,inth)

{

}

voidxiaoGLWidget::sendDataToOpenGL()

{

initializeOpenGLFunctions();

constGLfloatRED_TRIANGLE_DEPTH=-0.5f;

constGLfloatBLUE_TRIANGLE_DEPTH=0.5f;

GLfloatverts[]={

+0.0f,-1.0f,RED_TRIANGLE_DEPTH,

+1.0f,+0.0f,+0.0f,

+1.0f,+1.0f,RED_TRIANGLE_DEPTH,

+1.0f,+0.0f,+0.0f,

-1.0f,+1.0f,RED_TRIANGLE_DEPTH,

+1.0f,+0.0f,+0.0f,

+0.0f,+1.0f,BLUE_TRIANGLE_DEPTH,

+0.0f,+0.0f,+1.0f,

-1.0f,-1.0f,BLUE_TRIANGLE_DEPTH,

+0.0f,+0.0f,+1.0f,

+1.0f,-1.0f,BLUE_TRIANGLE_DEPTH,

+0.0f,+0.0f,+1.0f,

};

GLushortindices[]={0,1,2,3,4,5};

this->m_vertexBuf.create();

this->m_indexBuf.create();

this->m_vertexBuf.bind();

this->m_indexBuf.bind();

this->m_vertexBuf.allocate(verts,sizeof(verts));

this->m_indexBuf.allocate(indices,sizeof(indices));

m_program.enableAttributeArray(0);

m_program.setAttributeBuffer(0,GL_FLOAT,0,3,sizeof(float)*6);

m_program.enableAttributeArray(1);

m_program.setAttributeBuffer(1,GL_FLOAT,sizeof(float)*3,3,sizeof(float)*6);

}

voidxiaoGLWidget::installShader()

{

QOpenGLShadervertexShader(QOpenGLShader::Vertex);

vertexShader.compileSourceCode(vertexShaderCode);

QOpenGLShaderfragmentShader(QOpenGLShader::Fragment);

fragmentShader.compileSourceCode(fragmentShaderCode);

m_program.addShader(&vertexShader);

m_program.addShader(&fragmentShader);

m_program.link();

m_program.bind();

}

shadercode.cpp

constchar*vertexShaderCode=

"#version430\r\n"

""

"inlayout(location=0)vec3position;"

"inlayout(location=1)vec3vertexColor;"

""

"outvec3theColor;"

""

"voidmain()"

"{"

"gl_Position=vec4(position,1.0);"

"theColor=vertexColor;"

"}";

constchar*fragmentShaderCode=

"#version430\r\n"

""

"outvec4daColor;"

"invec3theColor;"

""

"voidmain()"

"{"

"daColor=vec4(theColor,1.0);"

"}";

       定義了一個widget，

classxiaoGLWidget:publicQOpenGLWidget,protectedQOpenGLFunctions_4_3_Compatibility

      繼承自QOpenGLWidget，然後初始化opengl functions api。

      關於shader，就和我前面的第二個程式寫法不同了。

QOpenGLShadervertexShader(QOpenGLShader::Vertex);

QOpenGLShaderfragmentShader(QOpenGLShader::Fragment);

      建立了兩個著色器之後，使用compileSourceCode來載入程式

（

      而之前的我是先建立一個專案物件，用專案物件的addShaderFromSourceCode來載入程式

      去看下qt的原始碼實現，就是呼叫者和被呼叫者的關係。

）

      然後呼叫addShader載入進去

      之後就是link、bind

constGLfloatRED_TRIANGLE_DEPTH=-0.5f;

constGLfloatBLUE_TRIANGLE_DEPTH=0.5f;

      z軸正向指向裡，所以負數的會在正數上方，也就是紅色在藍色上方，哦，這就是他說的深度。

GLfloatverts[]={

+0.0f,-1.0f,RED_TRIANGLE_DEPTH,

+1.0f,+0.0f,+0.0f,

+1.0f,+1.0f,RED_TRIANGLE_DEPTH,

+1.0f,+0.0f,+0.0f,

-1.0f,+1.0f,RED_TRIANGLE_DEPTH,

+1.0f,+0.0f,+0.0f,

+0.0f,+1.0f,BLUE_TRIANGLE_DEPTH,

+0.0f,+0.0f,+1.0f,

-1.0f,-1.0f,BLUE_TRIANGLE_DEPTH,

+0.0f,+0.0f,+1.0f,

+1.0f,-1.0f,BLUE_TRIANGLE_DEPTH,

+0.0f,+0.0f,+1.0f,

};

      這裡定義了12組，為什麼定義這麼多？

this->m_vertexBuf.create();

this->m_indexBuf.create();

     這裡有兩個buf，幹什麼用的？

GLushortindices[]={0,1,2,3,4,5};

this->m_vertexBuf.allocate(verts,sizeof(verts));

this->m_indexBuf.allocate(indices,sizeof(indices));

    一個存放頂點資料，一個存放索引 ？

m_program.enableAttributeArray(0);

m_program.enableAttributeArray(1);

      使能了，那要先看下著色器，先看片段的

constchar*fragmentShaderCode=

"#version430\r\n"

""

"outvec4daColor;"

"invec3theColor;"

""

"voidmain()"

"{"

"daColor=vec4(theColor,1.0);"

"}";

      有了之前的基礎，看著就簡單了，之前就知道了 120之後就沒有了gl_FragColor，所以要自己定義一個輸出，設定為輸入的顏色，alpha為1.0f，輸入即頂點著色器的顏色輸出

constchar*vertexShaderCode=

"#version430\r\n"

""

"inlayout(location=0)vec3position;"

"inlayout(location=1)vec3vertexColor;"

""

"outvec3theColor;"

""

"voidmain()"

"{"

"gl_Position=vec4(position,1.0);"

"theColor=vertexColor;"

"}";

      顏色設定為輸入的vertexColor顏色

     他這裡直接使用layout(location=0)定義了位置

     使能後裝載

m_program.setAttributeBuffer(0,GL_FLOAT,0,3,sizeof(float)*6);

m_program.setAttributeBuffer(1, GL_FLOAT, sizeof(float)*3, 3, sizeof(float)*6);

     （之前的我是用glVertexAttribPointer裝載頂點和顏色資料的）

     這裡裝載前面的buffer

voidsetAttributeBuffer(intlocation,GLenumtype,intoffset,inttupleSize,intstride=0);

void glVertexAttribPointer(GLuintindx,GLintsize,GLenumtype,GLbooleannormalized,GLsizeistride,constvoid*ptr)

     使能深度測試

glEnable(GL_DEPTH_TEST);

     繪製     

glClear(GL_DEPTH_BUFFER_BIT|GL_COLOR_BUFFER_BIT);

glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, NULL);

      沒有看到buffer使用的地方

“

在使用之前先要create()，之後bind到當前的OpenGL context上。
使用allocate()分配儲存空間，同時可以用某個資料來初始化分配的空間

”

     十二組資料，是一組頂點資料，一組顏色資料，那怎麼區分的呢

setAttributeBuffer(0,GL_FLOAT,0,3,sizeof(float)*6);

      offset = 0，第一組開始，

      tuplesize = 3，三個資料，就是第一組三個資料

      stride = sizeof(float) * 6，步幅這麼長，下次去就是6個數據之後，就是第三組資料開始

setAttributeBuffer(1, GL_FLOAT, sizeof(float)*3, 3, sizeof(float)*6);

     offset = sizeof(float) * 3, 就是第二組資料的開始，

     tuplesize = 3，也就是第二組三個資料，

     stride = sizeof(float) * 6，步幅這麼長，下次去就是6個數據之後，就是第四組資料開始

     取的順序呢，indices[]={0,1,2,3,4

相關推薦