Qt新渲染底层Scene Graph研究（三）
来源：互联网 发布：js字符串包含 某个元素 编辑：程序博客网 时间：2024/04/28 19:26
Qt新渲染底层Scene Graph研究（三）
上一篇文章介绍了Qt Quick和SceneGraph的一些理论上的内容。这也是我最新的研究成果。接下来我要介绍一下如何使用Scene Graph来制作一些好玩的效果。这也是我进行一次SceneGraph的尝试。
我的目标是希望在Scene Graph这一套渲染框架下实现一个带有纹理的立方体，并且旋转。花了几天，虽然不是那么满意，但是已经告一段落了。
蒋彩阳原创文章，首发地址：http://blog.csdn.net/gamesdev/article/details/43196787。欢迎同行前来探讨。
本文难度偏大，适合有经验的同行进行交流。
首先，对比C++，QML这边的代码稍微简单一些，那么从最简单开始说起吧。
import QtQuick 2.4import QtQuick.Window 2.2import TexturedCube 1.0Window{ title: qsTr( "Scene Graph Textured Object" ) width: isMobileDevice( )? Screen.width: 480 height: isMobileDevice( )? Screen.height: 320 visible: true Rectangle { anchors.fill: parent color: "orange" Cube { id: theCube anchors.centerIn: parent length: 60 source: "../image/avatar.jpg" property int rotateAngle: 0 transform: [ Rotation { angle: theCube.rotateAngle axis { x: 1 y: 1 } } ] NumberAnimation on rotateAngle { from: 0 to: 360 duration: 1000 loops: Animation.Infinite } Timer { interval: 3000 repeat: true property int tCount: 0 running: true onTriggered: { var sourceList = [ "../image/soul.png", "../image/avatar.jpg" ]; theCube.source = sourceList[tCount++ % 2]; } } } } function isMobileDevice( )// 判断是否是移动平台 { return Qt.platform.os === "android" || Qt.platform.os === "blackberry" || Qt.platform.os === "ios" || Qt.platform.os === "winphone"; }}一个普通的窗口，背景是橙色的，在上面显示了我们的Cube。我希望我的Cube沿着一个轴进行旋转，所以设定了NumberAnimationon rotateAngle。此外，我希望每隔三秒Cube更换纹理，所以设定了一个Timer来更换纹理。每一个Item都有transform成员，它表示Item经过什么样的转换，目前transform支持Translation、Rotation以及Scale，有人想要让MouseArea成为不规则的，其实如果官方提供了Shear这个类，那么就更方便了。
我们看到的QML代码仅仅是表象，其实在幕后，是一个较为复杂的C++类：TexturedCube。下面我们再来看看TexturedCube.h的内容：
#ifndef TEXTUREDCUBE#define TEXTUREDCUBE#include <QUrl>#include <QQuickItem>#define DECLRARE_QUICKITEM_PROPERTY( aType, aProperty ) protected:\ aType m_ ## aProperty; public: \ aType aProperty( void ) { return m_ ## aProperty; } \ void set ## aProperty( aType _ ## aProperty ) \ {\ if ( m_ ## aProperty == _ ## aProperty ) return; \ m_ ## aProperty = _ ## aProperty; \ emit aProperty ## Changed( _ ## aProperty ); \ update( ); \ }class TexturedCube: public QQuickItem{ Q_OBJECT Q_PROPERTY( qreal length READ Length WRITE setLength NOTIFY LengthChanged ) Q_PROPERTY( QUrl source READ Source WRITE setSource NOTIFY SourceChanged )public: explicit TexturedCube( void ); QSGNode* updatePaintNode( QSGNode* oldNode, UpdatePaintNodeData* );private slots: void checkTextureReconstruct( QUrl source );signals: void LengthChanged( qreal length ); void SourceChanged( QUrl source );private: QString source2Path( QUrl source ); QUrl m_LastSource; bool m_TextureNeedsReconstruct;protected: DECLRARE_QUICKITEM_PROPERTY( qreal, Length ) DECLRARE_QUICKITEM_PROPERTY( QUrl, Source )};#endif // TEXTUREDCUBE在头文件我首先定义了一个方便的宏，包含了属性：Getter-Setter，以及Notifier。和QQuickItem的大多数属性一样，一旦某个属性发生了改变，那么就要发出改变的信号，也就是我们称的notifier，并且要告诉QQuickItem进行下一次更新。这里的update()并不是立即更新的意思，而是告诉QQuickItem在下个循环周期之前调用updatePaintNode()这个函数。接下来我们看看TexturedCube.cpp文件。
// TexturedCube.cpp#include <QQmlFile>#include <QSGGeometryNode>#include <QSGGeometry>#include <QSGOpaqueTextureMaterial>#include <QQuickWindow>#include "TexturedCube.h"#define VERTEX_COUNT 36TexturedCube::TexturedCube( void ){ m_Length = 10.0; m_Source = ""; setFlag( ItemHasContents, true ); connect( this, SIGNAL( SourceChanged( QUrl ) ), this, SLOT( checkTextureReconstruct( QUrl ) ) );}struct TexturedCubeVertex{ QVector3D position; QVector2D texCoord;};QSGNode *TexturedCube::updatePaintNode( QSGNode* oldNode, QQuickItem::UpdatePaintNodeData* ){ QSGGeometryNode* node = Q_NULLPTR; QSGGeometry* geometry = Q_NULLPTR; if ( oldNode == Q_NULLPTR ) { // 创建几何体 static QSGGeometry::Attribute attributes[] = { QSGGeometry::Attribute::create( 0, // 数组元素的下标 3, // 元的个数 GL_FLOAT, // 元的类型 true ), // 是不是顶点位置元素 QSGGeometry::Attribute::create( 1, // 数组元素的下标 2, // 元的个数 GL_FLOAT, // 元的类型 false ) // 是不是顶点位置元素 }; static QSGGeometry::AttributeSet attributeSet = { 2, // 属性的个数 sizeof( TexturedCubeVertex ), // 个性化顶点结构的大小 attributes // 属性的数组 }; geometry = new QSGGeometry( attributeSet, // 属性集 VERTEX_COUNT ); // 顶点个数 geometry->setDrawingMode( GL_TRIANGLES ); geometry->setVertexDataPattern( QSGGeometry::DynamicPattern ); geometry->allocate( VERTEX_COUNT ); // 创建材质 QImage image( source2Path( m_Source ) ); QSGTexture* texture = window( )->createTextureFromImage( image.mirrored( ) ); texture->setParent( window( ) ); QSGOpaqueTextureMaterial* material = new QSGOpaqueTextureMaterial; material->setTexture( texture ); // 创建节点 node = new QSGGeometryNode; node->setGeometry( geometry ); node->setMaterial( material ); node->setFlag( QSGNode::OwnsGeometry ); node->setFlag( QSGNode::OwnsOpaqueMaterial ); node->markDirty( QSGNode::DirtyGeometry | QSGNode::DirtyMaterial ); } else { node = static_cast<QSGGeometryNode*>( oldNode ); geometry = node->geometry( ); QSGNode::DirtyState dirtyState = QSGNode::DirtyGeometry; if ( m_TextureNeedsReconstruct ) { QSGOpaqueTextureMaterial* material = static_cast<QSGOpaqueTextureMaterial*>( node->material( ) ); if ( material != Q_NULLPTR ) { QSGTexture* texture = material->texture( ); texture->setParent( Q_NULLPTR ); delete texture; QImage image( source2Path( m_Source ) ); texture = window( )->createTextureFromImage( image.mirrored( ) ); texture->setParent( window( ) ); material->setTexture( texture ); dirtyState |= QSGNode::DirtyMaterial; } } node->markDirty( dirtyState ); } TexturedCubeVertex* v = static_cast<TexturedCubeVertex*>( geometry->vertexData( ) ); // 设置顶点坐标 qreal semi = m_Length / 2.0; const QVector3D basicVertices[] = { QVector3D( semi, -semi, semi ), QVector3D( semi, -semi, -semi ), QVector3D( -semi, -semi, -semi ), QVector3D( -semi, -semi, semi ), QVector3D( semi, semi, semi ), QVector3D( semi, semi, -semi ), QVector3D( -semi, semi, -semi ), QVector3D( -semi, semi, semi ) }; // 前面 v[0].position = basicVertices[6]; v[0].texCoord = QVector2D( 0.0, 0.0 ); v[1].position = basicVertices[2]; v[1].texCoord = QVector2D( 0.0, 1.0 ); v[2].position = basicVertices[5]; v[2].texCoord = QVector2D( 1.0, 0.0 ); v[3].position = basicVertices[2]; v[3].texCoord = QVector2D( 0.0, 1.0 ); v[4].position = basicVertices[1]; v[4].texCoord = QVector2D( 1.0, 1.0 ); v[5].position = basicVertices[5]; v[5].texCoord = QVector2D( 1.0, 0.0 ); // 后面 v[6].position = basicVertices[4]; v[6].texCoord = QVector2D( 0.0, 0.0 ); v[7].position = basicVertices[0]; v[7].texCoord = QVector2D( 0.0, 1.0 ); v[8].position = basicVertices[7]; v[8].texCoord = QVector2D( 1.0, 0.0 ); v[9].position = basicVertices[0]; v[9].texCoord = QVector2D( 0.0, 1.0 ); v[10].position = basicVertices[3]; v[10].texCoord = QVector2D( 1.0, 1.0 ); v[11].position = basicVertices[7]; v[11].texCoord = QVector2D( 1.0, 0.0 ); // 上面 v[12].position = basicVertices[2]; v[12].texCoord = QVector2D( 0.0, 0.0 ); v[13].position = basicVertices[3]; v[13].texCoord = QVector2D( 0.0, 1.0 ); v[14].position = basicVertices[1]; v[14].texCoord = QVector2D( 1.0, 0.0 ); v[15].position = basicVertices[3]; v[15].texCoord = QVector2D( 0.0, 1.0 ); v[16].position = basicVertices[0]; v[16].texCoord = QVector2D( 1.0, 1.0 ); v[17].position = basicVertices[1]; v[17].texCoord = QVector2D( 1.0, 0.0 ); // 下面 v[18].position = basicVertices[7]; v[18].texCoord = QVector2D( 0.0, 0.0 ); v[19].position = basicVertices[6]; v[19].texCoord = QVector2D( 0.0, 1.0 ); v[20].position = basicVertices[4]; v[20].texCoord = QVector2D( 1.0, 0.0 ); v[21].position = basicVertices[6]; v[21].texCoord = QVector2D( 0.0, 1.0 ); v[22].position = basicVertices[5]; v[22].texCoord = QVector2D( 1.0, 1.0 ); v[23].position = basicVertices[4]; v[23].texCoord = QVector2D( 1.0, 0.0 ); // 左面 v[24].position = basicVertices[7]; v[24].texCoord = QVector2D( 0.0, 0.0 ); v[25].position = basicVertices[3]; v[25].texCoord = QVector2D( 0.0, 1.0 ); v[26].position = basicVertices[6]; v[26].texCoord = QVector2D( 1.0, 0.0 ); v[27].position = basicVertices[3]; v[27].texCoord = QVector2D( 0.0, 1.0 ); v[28].position = basicVertices[2]; v[28].texCoord = QVector2D( 1.0, 1.0 ); v[29].position = basicVertices[6]; v[29].texCoord = QVector2D( 1.0, 0.0 ); // 右面 v[30].position = basicVertices[5]; v[30].texCoord = QVector2D( 0.0, 0.0 ); v[31].position = basicVertices[1]; v[31].texCoord = QVector2D( 0.0, 1.0 ); v[32].position = basicVertices[4]; v[32].texCoord = QVector2D( 1.0, 0.0 ); v[33].position = basicVertices[1]; v[33].texCoord = QVector2D( 0.0, 1.0 ); v[34].position = basicVertices[0]; v[34].texCoord = QVector2D( 1.0, 1.0 ); v[35].position = basicVertices[4]; v[35].texCoord = QVector2D( 1.0, 0.0 ); const QRectF bounding = boundingRect( ); const float factor = m_Length; for ( int i = 0; i < VERTEX_COUNT; ++i )// 调整位置 { // 这里由于坐标系x向右增大，y向下增大，符合屏幕坐标系，那么根据OpenGL右手坐标系， // Z轴朝里面增大。 float x = v[i].position.x( ) + bounding.width( ) / 2; float y = v[i].position.y( ) + bounding.height( ) / 2; float z = ( v[i].position.z( ) + semi ) / factor; v[i].position.setX( x ); v[i].position.setY( y ); v[i].position.setZ( z ); } return node;}void TexturedCube::checkTextureReconstruct( QUrl source ){ m_TextureNeedsReconstruct = m_LastSource != source;}QString TexturedCube::source2Path( QUrl source ){ QUrl url( source ); if ( url.isRelative( ) ) { QUrl baseURL( "file:///" + qApp->applicationFilePath( ) ); url = baseURL.resolved( url ); } return QQmlFile::urlToLocalFileOrQrc( url );}经过实践，要渲染一个带六个纹理面的立方体，需要36个顶点。所以我设定了一个宏VERTEX_COUNT，值是36。此外，QtScene Graph默认的渲染是AoS（Array of Structure），这一点和Direct3D9一样的，所以我们需要定义自己的顶点格式。structTexturedCubeVertex里面包含了顶点位置以及纹理坐标（又称uv坐标）。在TexturedCube的构造函数，我们通过设定setFlag(ItemHasContents, true );来告诉Scene Graph，此项目有内容，需要调用updatePaintNode()函数，然后当source改变的时候，为了调用相应的处理函数，需要连接处理器。这里的核心就是updatePaintNode()函数。这个函数的作用类似于一个中转站，火车从远处来，进站，如果有什么变化，比如说上下客，那么车内的人员也会变化。最后火车驶离车站，开往下一个目的地。此函数颇有这一个意思。第一次，我们发现oldNode指针为空，那么我们创建几何体、材质和纹理。否则oldNode指针不为空，我们认为这不是第一次渲染了，我们取出它的几何体和纹理。如果纹理路径发生了改变，那么我们也需要进行重新载入，通过source2Path()来解析路径。这里可能没有Qt源码那么复杂，因为Qt里面如果来自网络，即以http协议开始的，那么需要调用QQmlEngine里面的QNetworkAccessManager，此外QtQuick的Image类还有cache功能，我们这个例子没有那么复杂，能根据source的改变同步改变纹理内容就可以了。
由于Qt的SceneGraph的灵活性，我们需要使用许多类一起写作才能按照我们的要求创建几何体。首先我们要创建QSGGeometry::Attribute的一个数组，以便告诉SceneGraph和OpenGL，我们需要什么样的顶点缓存。注意这个数组绝对不能在栈上，因为要在updatePaintNode()函数以外用到这个数组，因此我标记为static类型。随后，我们需要QSGGeometry::AttributeSet结构的对象标识我们所需要的属性。
在设置上、下、左、右、前、后面的顶点位置坐标以及纹理坐标之后，需要对坐标进行一次适配。因为QQuickItem毕竟是一个矩形的控件，所以指定了width和height之后，boundingRect()就有相应的值了。这里需要说明的是z值。如上面几篇文章所述，要将坐标值限制在x∈[0，Screen.width]，y∈[0，Screen.height]，z∈[0，stackLayer]（其中stackLayer为Item堆叠的层数），这样才能在视口中看见。最后是Qt的source2Path()方法，用来处理路径的。
main.cpp文件也比较简单，这里我只介绍主要部分：
……int main( int argc, char** argv ){QApplication app( argc, argv );……// 注册一些类 qmlRegisterType<TexturedCube>( "TexturedCube", 1, 0, "Cube" );QQmlApplicationEngine engine;engine.load( QUrl( "qrc:///qml/main.qml" ) );……return app.exec( );}最后就是效果了。在Windows下的效果如下图所示：
大家可能觉得奇怪，本来不是设置的是立方体吗？怎么看起来像一个面片？其实如果设置QSG_VISUALIZE=overdraw的话，我们就明白了。
其实是有一个立方体显示的，只是因为视立方体的范围是x∈[0，Screen.width]，y∈[0，Screen.height]，z∈[0，stackLayer]（其中stackLayer为Item堆叠的层数），在这种情况下，左右和上下共四个面被挤压得很小，所以我们几乎感觉不到它们的存在。
后记：也正是因为这样的原因，让我认识到，在Scene Graph下绘制出3D模型有些不合适。由于z和视口限制，所以让我们看3D对象都觉得是扁平一片。可能我半年前制作的示例更有实用价值吧。
- Qt新渲染底层Scene Graph研究（三）
- Qt新渲染底层Scene Graph研究（一）
- Qt新渲染底层Scene Graph研究（二）
- Qt Scene Graph渲染方式在不同系统的差异
- Qt Scene graph画线
- Qt Quick Scene Graph
- QtQuick基础教程（四）---场景渲染(Scene Graph)
- Qt之Scene Graph画图
- QML Scene Graph 的文本渲染
- QT之 scene graph 的局部刷新尝试（一）
- Scene Management --- scene graph
- Scene Management - Scene Graph
- Scene Management - Scene Graph
- 3ds Max插件开发（三）The Scene Graph and Nodes 场景节点
- Qt 3D的研究（七）：渲染至纹理
- Open Scene Graph
- 4.7 Scene Graph Compilers
- Overlay Scene Graph
- 一分钟驾驭word 高效经典教程（整理版）
- ubuntu下配置lamp
- css 超过长度变为...
- sumtable(第二次重写)
- 探秘I/O队列对磁盘性能的影响
- Qt新渲染底层Scene Graph研究（三）
- Apache 与 Tomcat 整合（Linux + Windows）
- Function,Object,Prototypes,__proto__
- 2.3.5 磁盘调度和电梯算法
- WinForm与Webform之间传值问题实例
- 《探索式测试-实践之路》--读书笔记
- 10167—Birthday Cake
- NAT与NAT穿透(二)
- 第十九周项目一:动态链表体验（三）：删除链表中的第一个结点
