Successfully reported this slideshow.
Your SlideShare is downloading. ×

Introduction to the Qt Quick Scene Graph

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 18 Ad

Introduction to the Qt Quick Scene Graph

Download to read offline

Interacting with the Qt Quick scene graph is a good bonus skill for any Qt developer to have. In this introductory webinar we will present this component: a graphical representation of the Item scene and an alternative method to QML coding. Proper use of the underlying scene graph can save performance at runtime. We will explore how to interact with the scene graph through a simple example and suggest when it is appropriate to use.

Interacting with the Qt Quick scene graph is a good bonus skill for any Qt developer to have. In this introductory webinar we will present this component: a graphical representation of the Item scene and an alternative method to QML coding. Proper use of the underlying scene graph can save performance at runtime. We will explore how to interact with the scene graph through a simple example and suggest when it is appropriate to use.

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Similar to Introduction to the Qt Quick Scene Graph (20)

Advertisement

More from ICS (20)

Recently uploaded (20)

Advertisement

Introduction to the Qt Quick Scene Graph

  1. 1. ©Integrated Computer Solutions Inc. www.ics.com Introduction to Qt Quick Scene Graph Vy Duong, Integrated Computer Solutions Visit us at http://www.ics.com Produced by Integrated Computer Solutions Material based on Qt 5.12 1
  2. 2. ©Integrated Computer Solutions Inc. www.ics.com About ICS ICS Designs User Experiences and Develops Software for Connected Devices • Largest source of independent Qt expertise in North America since 2002 • Headquartered in Waltham, MA with offices in California, Canada, Europe • Includes Boston UX, ICS’ UX design division • Embedded, touchscreen, mobile and desktop applications • Exclusive Open Enrollment Training Partner in North America 2
  3. 3. ©Integrated Computer Solutions Inc. www.ics.com UX/UI Design and Development for Connected Devices Across Many Industries 3
  4. 4. ©Integrated Computer Solutions Inc. www.ics.com Agenda ● What is a Qt Quick Scene Graph? ● What are the benefits? ● When to use it? ● What is provided by Qt? 4
  5. 5. ©Integrated Computer Solutions Inc. www.ics.com What is a Qt Quick Scene Graph? ● A node tree ● Graphical representation of the Item scene ● Contains enough information to render all the items ● Node do not contain any active drawing code or the paint() function ● Node tree is mostly built internally by the Qt Quick QML types, it is possible for users to add complete subtrees in C++ 5
  6. 6. ©Integrated Computer Solutions Inc. www.ics.com 6
  7. 7. ©Integrated Computer Solutions Inc. www.ics.com What are the benefits? ● Scene rendering can be retained between frames ● The complete set of items to render is known before rendering begins ● Enables batch rendering to minimize state changes and discarding of obscured items 7
  8. 8. ©Integrated Computer Solutions Inc. www.ics.com When to use it? ● Performance is impaired by normal drawing techniques ● A need for batch rendering of the items 8 Qt Quick 1 vs Qt Quick 2 Qt Quick 1 ● uses QGraphicsView and QPainter for rendering Qt Quick 2 ● Uses QWindow and QOpenGL* for rendering
  9. 9. ©Integrated Computer Solutions Inc. www.ics.com What is provided by Qt? QSGGeometryNode Used for all rendered content in the scene graph QSGNode The base class for all nodes in the scene graph QSGClipNode Implements the clipping functionality in the scene graph QSGOpacityNode Used to change opacity of nodes QSGTransformNode Implements transformations in the scene graph 9
  10. 10. ©Integrated Computer Solutions Inc. www.ics.com IMPORTANT NOTE! ● Custom Nodes are added to scene graph by subclassing QQuickItem::updatePaintNode() ● Setting the QQuickItem::ItemHasContents 10 class MySGExampleItem : public QQuickItem{ public: MyRect(){ setFlag(ItemHasContents); } QSGNode *updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *)override{ // Node Codes } }
  11. 11. ©Integrated Computer Solutions Inc. www.ics.com QSGGeometryNode ● Consists of geometry and material ● Geometry defines the mesh, the vertices and their structure ● Material defines how the shape is filled ● Uses QSGGeometry for defining geometry 11
  12. 12. ©Integrated Computer Solutions Inc. www.ics.com QSGGeometryNode QSGGeometry *geometryLine = new QSGGeometry(QSGGeometry::defaultAttributes_Point2D(), 2); geometryLine->setDrawingMode(QSGGeometry::DrawLines); geometryLine->setLineWidth(3); geometryLine->vertexDataAsPoint2D()[0].set(10, height()/2); // start point 1,1 geometryLine->vertexDataAsPoint2D()[1].set(50, height()); // end point 50, 1 QSGFlatColorMaterial *materialLine = new QSGFlatColorMaterial; materialLine->setColor(QColor(255, 0, 0)); QSGGeometryNode *node = new QSGGeometryNode; node->setGeometry(geometryLine); node->setFlag(QSGNode::OwnsGeometry); node->setMaterial(materialLine); node->setFlag(QSGNode::OwnsMaterial); rootScaleNode->appendChildNode(node); 12
  13. 13. ©Integrated Computer Solutions Inc. www.ics.com QSGNode ● The base class for all nodes in the scene graph ● Children nodes can be added by using: ● void QSGNode::appendChildNode(QSGNode *node) - append to the end of list ● void QSGNode::prependChildNode(QSGNode *node) - add to the beginning of list ● void QSGNode::insertChildNodeAfter(QSGNode *node, QSGNode *after) - insert after a node ● void QSGNode::insertChildNodeBefore(QSGNode *node, QSGNode *before) - insert before a node ● Order of children node matters ● Can mark nodes "Dirty" 13
  14. 14. ©Integrated Computer Solutions Inc. www.ics.com QSGClipNode ● Implements the clipping functionality in the scene graph ● Derives from QSGBasicGeometryNode ● void QSGBasicGeometryNode::setGeometry(QSGGeometry *geometry) ● void QSGClipNode::setClipRect(const QRectF &rect) ● void QSGClipNode::setIsRectangular(bool rectHint) 14 QSGClipNode * clipNode = new QSGClipNode; clipNode->setClipRect(QRectF(0,0, width(), 60)); clipNode->setIsRectangular(true); clipNode->appendChildNode(new QSGSimpleRectNode(QRectF(45,30, width(), height()), Qt::red)); rootScaleNode->appendChildNode(clipNode);
  15. 15. ©Integrated Computer Solutions Inc. www.ics.com QSGOpacityNode ● Used to change the opacity of nodes ● void QSGOpacityNode::setOpacity(qreal opacity) 15 QSGOpacityNode * opacityNode = new QSGOpacityNode; opacityNode->setOpacity(0.20); opacityNode->appendChildNode( new QSGSimpleRectNode(QRectF(0,0, 50, 50), Qt::red) ); rootScaleNode->appendChildNode(opacityNode);
  16. 16. ©Integrated Computer Solutions Inc. www.ics.com QSGTransformNode ● Implement transformation in the scene graph 16 // transformation example: QMatrix4x4 scaleMatrix; scaleMatrix.scale(0.5); QSGTransformNode *transformNode = new QSGTransformNode; transformNode->setMatrix(scaleMatrix); transformNode->appendChildNode(new QSGSimpleRectNode(QRectF(0,0, width(), height()), Qt::black)); rootScaleNode->appendChildNode(transformNode);
  17. 17. ©Integrated Computer Solutions Inc. www.ics.com 17
  18. 18. ©Integrated Computer Solutions Inc. www.ics.com Thank you! 18 Any questions?

×