Qt Quick Scene Graph 学习2：纹理

不念不忘少年蓝@ 2022-10-10 06:21 162阅读 0赞

Qt Quick Scene Graph 相关文档：[https://doc.qt.io/qt-5/qtquick-visualcanvas-scenegraph.html][https_doc.qt.io_qt-5_qtquick-visualcanvas-scenegraph.html]

参照示例 twotextureproviders

本文完整代码链接：[https://github.com/gongjianbo/MyTestCode2021/tree/master/Qml/LearnQSG\_20210624\_Texture][https_github.com_gongjianbo_MyTestCode2021_tree_master_Qml_LearnQSG_20210624_Texture]

[上一节][Link 1]学习了画线，通过设置顶点参数也可以绘制任意几何图元，这一节学习纹理的基本操作。

回顾下基本知识，一个几何节点 Node 由顶点 Geometry 和材质 Material 组成；QQuickItem 如果是可视类型需要设置 "setFlag(ItemHasContents, true);"；Geometry、Material 及其他更新后单独设置 dirty 标志，这样在刷新时判断对应的 dirty 标志可以减少不必要的操作。

如果只是简单的展示一个纹理，如图片等，可以使用 QSGTextureMaterial，基本操作如下：

#pragma once
    #include <QQuickItem>
    
    //学习QSGTextureMaterial的基本使用
    class MyTextureItem : public QQuickItem
    {
        Q_OBJECT
        Q_PROPERTY(QQuickItem *source READ getSource WRITE setSource NOTIFY sourceChanged)
    public:
        explicit MyTextureItem(QQuickItem * parent = nullptr);
    
        //设置提供纹理的item
        QQuickItem *getSource() const { return source; }
        void setSource(QQuickItem *item);
    
    protected:
        //更新渲染节点时调用
        QSGNode *updatePaintNode(QSGNode *oldNode, 
    QQuickItem::UpdatePaintNodeData *updatePaintNodeData) override;
    
    signals:
        void sourceChanged();
    
    private:
        //提供纹理的对象
        QQuickItem *source = nullptr;
        //变更source后需要重置texture
        bool sourceChange = false;
    };

#include "MyTextureItem.h"
    #include <QSGGeometryNode>
    #include <QSGGeometry>
    #include <QSGMaterial>
    #include <QSGTextureProvider>
    #include <QSGTextureMaterial>
    
    MyTextureItem::MyTextureItem(QQuickItem *parent)
        : QQuickItem(parent)
    {
        //要渲染的节点需要设置此标志
        setFlag(ItemHasContents, true);
    }
    
    void MyTextureItem::setSource(QQuickItem *item)
    {
        if(source == item)
            return;
        source = item;
        //变更source后需要重置texture
        sourceChange = true;
        emit sourceChanged();
        update();
    }
    
    QSGNode *MyTextureItem::updatePaintNode(QSGNode *oldNode, 
    QQuickItem::UpdatePaintNodeData *updatePaintNodeData)
    {
        //基本逻辑copy自Qt那几个scene graph的示例
        Q_UNUSED(updatePaintNodeData)
    
        bool abort = false;
        //未设置纹理源或者该Item不能创建纹理，就不显示
        if (!source || !source->isTextureProvider()) {
            qDebug() << "source is null or not a texture provider";
            abort = true;
        }
        if (abort) {
            delete oldNode;
            return nullptr;
        }
    
        //一个node包含geometry和material，类似于别的架构中的entity、mesh、material
        //node可以是要渲染的物体，也可以是透明度等
        //geometry定义了网格、顶点、结构等，比如坐标点
        //material定义了填充方式
        QSGGeometryNode *node = nullptr;
        QSGGeometry *geometry = nullptr;
    
        if (!oldNode) {
            //如果只是显示基本的线和纹理，用一个QSGGeometryNode即可
            node = new QSGGeometryNode;
    
            //使用纹理顶点，4个表示四个角
            geometry = new QSGGeometry(QSGGeometry::defaultAttributes_TexturedPoint2D(), 4);
            //绘制模式，设置为连续三角，这样只用四个点就可以表示一个矩形
            geometry->setDrawingMode(QSGGeometry::DrawTriangleStrip); //GL_TRIANGLE_STRIP
            //添加到node
            node->setGeometry(geometry);
            //此设置表示该节点拥有Geometry实例的所有权，并且会在该节点被销毁或重新设置时将其释放
            node->setFlag(QSGNode::OwnsGeometry);
    
            //创建纹理
            QSGTextureMaterial *material = new QSGTextureMaterial;
            //设置纹理数据，同一个item的纹理内容更新了会自动触发更新
            //但是更换item后需要重新设置texture
            material->setTexture(source->textureProvider()->texture());
            //添加到node
            node->setMaterial(material);
            //此设置表示该节点拥有Material实例的所有权，并且会在该节点被销毁或重新设置时将其释放
            node->setFlag(QSGNode::OwnsMaterial);
        } else {
            node = static_cast<QSGGeometryNode *>(oldNode);
            geometry = node->geometry();
            //如果item重置了就重新设置纹理
            if(sourceChange) {
                sourceChange = false;
                QSGTextureMaterial *material = static_cast<QSGTextureMaterial*>(node->material());
                material->setTexture(source->textureProvider()->texture());
            }
        }
    
        QSGGeometry::TexturedPoint2D *vertices = geometry->vertexDataAsTexturedPoint2D();
        //四个顶点，每个顶点为屏幕坐标xy+纹理坐标xy
        //opengl纹理坐标默认左下角为0点，但是QSG默认左上角为0点
        //（注意更新纹理的时候，width和height也要绑定更新）
        vertices[0].set(0,0,0,0);
        vertices[1].set(0,0+height(),0,1);
        vertices[2].set(0+width(),0,1,0);
        vertices[3].set(0+width(),0+height(),1,1);
        //效果同上
        //QSGGeometry::updateTexturedRectGeometry(geometry, boundingRect(), QRectF(0, 0, 1, 1));
        //标记为dirty后才会刷新节点对应内容
        node->markDirty(QSGNode::DirtyGeometry);
        node->markDirty(QSGNode::DirtyMaterial);
        return node;
    }

MyTextureItem{
                        id: texture
                        width: source.width
                        height: source.height
                        source: txt
                    }

Qt 提供的基本类型只给了单个纹理设置的接口，如果需要多个纹理同时处理则可以参照示例：twotextureproviders

但是这个示例有点小问题，很多版本都有改进该示例（如 5.12、5.15、5.1 代码都有差异），所以代码有差异。由于老的示例使用了废弃的接口，而新的示例又使用了 Qt RHI 的接口，所以我选择了 5.15 的示例进行学习。

这里有个小插曲就是我觉得示例这个棋盘背景挺有意思的，设计巧妙，所以复制粘贴过来了。

ShaderEffect {
            id: bg
            anchors.fill: parent
    
            property real tileSize: 16
            property color color1: Qt.rgba(0.9, 0.9, 0.9, 1);
            property color color2: Qt.rgba(0.8, 0.8, 0.8, 1);
            property size pixelSize: Qt.size(width / tileSize, height / tileSize);
    
            fragmentShader:
                "
            uniform lowp vec4 color1;
            uniform lowp vec4 color2;
            uniform highp vec2 pixelSize;
            varying highp vec2 qt_TexCoord0;
            void main() {
                highp vec2 tc = sign(sin(3.14159265358979323846 * qt_TexCoord0 * pixelSize));
                if (tc.x != tc.y)
                    gl_FragColor = color1;
                else
                    gl_FragColor = color2;
            }
            "
        }

下面进入正题。

首先是继承 QQuickItem 然后重写 updatePaintNode 接口，在接口内实例化了一个自定义的 Node 对象，而这个 Node 对象的功能就是将两个纹理进行异或操作，都有颜色的地方变为透明。

Node 设置了 setFlag(QSGNode::UsePreprocess, true)，在每次刷新的时候会回调 preprocess 接口，我们就在该接口内更新纹理。Node 的顶点使用基本类型 QSGGeometry，注意顶点参数为 4 ，GL\_TRIANGLE\_STRIP 时表示两个连续的三角，一般组合为矩形，纹理就在这个矩形范围内渲染：

//4个顶点表示绘制一个矩形，使用GL_TRIANGLE_STRIP
    m_node.setGeometry(new QSGGeometry(QSGGeometry::defaultAttributes_TexturedPoint2D(), 4));
    m_node.setFlag(QSGNode::OwnsGeometry);
    
    //顶点值在改变rect后才设置
    QSGGeometry::updateTexturedRectGeometry(m_node.geometry(), m_rect, QRectF(0, 0, 1, 1));

Node 的材质使用的自定义类型，以支持两个纹理的导入。这里面主要是给材质自定义了一个 Shader 类，在初始化时创建并绑定相应的 GL 属性：

void XorBlendShader::initialize()
    {
        m_matrix_id = program()->uniformLocation("qt_Matrix");
        m_opacity_id  = program()->uniformLocation("qt_Opacity");
        //相当于绑定到了GL_TEXTURE0上，后面设置纹理数据直接操作GL_TEXTURE0
        program()->setUniformValue("uSource1", 0); // GL_TEXTURE0
        program()->setUniformValue("uSource2", 1); // GL_TEXTURE1
    }

然后刷新的时候将纹理 bind 并进行渲染：

void XorBlendShader::updateState(const QSGMaterialShader::RenderState &state, QSGMaterial *newEffect, QSGMaterial *oldEffect)
    {
        XorBlendMaterial *material = static_cast<XorBlendMaterial *>(newEffect);
    
        if (state.isMatrixDirty())
            program()->setUniformValue(m_matrix_id, state.combinedMatrix());
    
        if (state.isOpacityDirty())
            program()->setUniformValue(m_opacity_id, state.opacity());
    
        QOpenGLFunctions *f = QOpenGLContext::currentContext()->functions();
        //先active再bind，步骤和使用Qt封装的OpenGL使用方式一样
        f->glActiveTexture(GL_TEXTURE1);
        material->state.texture2->bind();
        f->glActiveTexture(GL_TEXTURE0);
        material->state.texture1->bind();
    }

如果你熟悉 Qt 封装的 OpenGL 类，会感觉很熟悉，使用方式基本差不多。知道了流程后，我们就可以扩展为任意个纹理的组合。

最后再学习下示例异或纹理显示的片段着色器代码，取出该纹理坐标像素的颜色后根据透明度来处理，带入计算得，p1 透明 p2 不透明则显示 p2，p1 p2 都不透明则透明度为 0 都不显示，如果 p1 p2 都透明则透明度也为 0 都不显示。

uniform lowp float qt_Opacity;
    uniform lowp sampler2D uSource1;
    uniform lowp sampler2D uSource2;
    
    varying highp vec2 vTexCoord;
    
    void main()
    {
        lowp vec4 p1 = texture2D(uSource1, vTexCoord);
        lowp vec4 p2 = texture2D(uSource2, vTexCoord);
        gl_FragColor = (p1 * (1.0 - p2.a) + p2 * (1.0 - p1.a)) * qt_Opacity;
    }

[https_doc.qt.io_qt-5_qtquick-visualcanvas-scenegraph.html]: https://doc.qt.io/qt-5/qtquick-visualcanvas-scenegraph.html
[https_github.com_gongjianbo_MyTestCode2021_tree_master_Qml_LearnQSG_20210624_Texture]: https://github.com/gongjianbo/MyTestCode2021/tree/master/Qml/LearnQSG_20210624_Texture
[Link 1]: https://gongjianbo1992.blog.csdn.net/article/details/117923933