Qt新渲染底層Scene Graph研究（二），scenegraph

Qt新渲染底層Scene Graph研究（二），scenegraph

Qt新渲染底層Scene Graph研究（二）

       上一篇文章初步介紹了Qt新渲染底層Scene Graph，我們該如何利用這個架構為應用程式增添絢麗的效果呢？首先，我們要明確利用Scene Graph開發的目的是什麼。如果是簡單的，純粹的顯示2D圖形介面，那麼直接利用構建在Scene Graph之上的Qt Quick和Qt Quick Widget即可。如果覺得Qt Quick為我們提供的功能不夠，在QML這一層無法很好地實現，那麼我們或許需要考慮更低一層的Scene Graph了。一個使用Scene Graph的常見需求就是實現3D模型的渲染以及2D圖元在其上的疊加（Overlay）。

蔣彩陽原創文章，首發地址：http://blog.csdn.net/gamesdev/article/details/43067265。歡迎同行前來探討。

       本文難度偏大，適合有經驗的Qt開發同行學習交流。

       目前我發現了兩種和Scene Graph整合渲染3D的方法。第一是採用Scene Graph提供的相關類，比如說QSGNode等一類和 QSGGeometry等一類進行渲染，此方法在Qt的例子中對應customgeometry例子，這個例子顯示了2D的三次貝茲路徑是如何顯示的；第二種是完全使用OpenGL相關的API進行渲染（為了和Qt相容，還是建議使用QOpenGL*來包裹之），對應的例子是OpenGL under QML。我大概半年前也寫了一個類似的例子(參見《Qt行動裝置 App開發（八）：實現跨平台的QML和OpenGL混合渲染》)。兩個例子對比下來，發現第二種方法，對於第三方庫整合更容易一些，因為僅需知道OpenGL的API以及著色器的知識就好了。當然，最近我對第一種方法進行了探索，瞭解了SceneGraph的一些知識。

       好了，大家可以拿出自己的Qt Quick程式進行實驗（如果沒有的話，我的獨立遊戲《十日驅鬼記》和《吃藥了》的Windows獨立運行版可以免費下載進行實驗），Windows下進入cmd，設定QSG_VISUALIZE為overdraw，大家來觀察一下顯示的情況。我們發現一個立方體在視窗內部晃悠，其實呢，並不是立方體在晃悠，而是Qt設定的攝像機在晃悠，情境是不動的。而這個立方體則是正常情況下我們要顯示的視景體（又稱平截頭體）。在Qt Quick中，渲染2D使用的是正交投影而不是透視投影，所以我們看到這個是一個立方體而不是立方台。但是注意，這其中和我們建立的OpenGL情境有些微的差別。我們發現，在Qt Quick中，x向右遞增，y向下遞增，這和OpenGL的x向右遞增，y向上遞增是不一樣的，而QtQuick又使用了OpenGL，也就是遵循了右手座標系，那麼它的座標系又是怎麼擺放的呢？上篇文章講到了這個立方體的的範圍是x∈[0，Screen.width]，y∈[0，Screen.height]，z∈[0，1]，我們可以通過一張圖來瞭解座標系：

       現在用右手四指指向x，大拇指指向y，那麼手掌的指向就是z了。沒錯，這就是OpenGL右手座標系，只不過Qt將它倒置了。同時，overdraw模式的攝像機是處在z軸的負半軸，看的大體位置在z的正半軸。而圖中從左至右兩個紋理的z值分別為-1和0。

在瞭解這一點後，我們的目標就是讓我們繪製的圖元儘可能地落在x∈[0，Screen.width]，y∈[0，Screen.height]，z∈[0，1]的範圍內。這就需要我們在VBO裡面詳細地設定每一個頂點的位置。此外，Qt Quick中的Item::z值和OpenGL的z不是一個概念，Item::z表示疊放順序，值越大就越擺在前面，OpenGL的z值，越小的越表示在前。此外，情境疊放了n層，那麼就對整個視景體n等分，各層顯示在前面。這個可能不好理解，還是看圖吧。

對應QML代碼：

Window{    title: qsTr( "Scene Graph TexturedObject" )    width: 480    height: 320    visible: true     Rectangle    {        anchors.fill: parent        color: "orange"         Rectangle        {            anchors.centerIn: parent            width: 100            height: 100            color: "blue"        }       }}

對應QML代碼：

Window{    title: qsTr( "Scene Graph TexturedObject" )    width: 480    height: 320    visible: true     Rectangle    {        anchors.fill: parent        color: "orange"         Rectangle        {            anchors.centerIn: parent            width: 100            height: 100            color: "blue"             Rectangle            {                anchors.centerIn: parent                width: 20                height: 20                color: "red"            }        }       }}

       下篇文章將要介紹我在Scene Graph中顯示3D物體的嘗試。