logo标签列表

如何使自定义QML元素的绘制更加流畅？

c++qtqmlshaderqtquick2
12

我现在尝试创建一个自定义的 QML 元素，它是从 QQuickItem 派生而来的。因此，我重写了 QQuickItem::updatePaintNode 并想要绘制一条线。我的代码：

QSGNode *StrikeLine::updatePaintNode(QSGNode *oldNode, QQuickItem::UpdatePaintNodeData *)
{
    QSGGeometryNode *node = 0;

    QSGGeometry *geometry;
    QSGFlatColorMaterial *material;
    node = static_cast<QSGGeometryNode *>(oldNode);
    if(!node) {
        node = new QSGGeometryNode;
        geometry = new QSGGeometry(QSGGeometry::defaultAttributes_Point2D(), 2);
        geometry->setDrawingMode(GL_LINES);
        geometry->setLineWidth(3);
        material = new QSGFlatColorMaterial;
        material->setColor(QColor(255, 0, 0));
        node->setGeometry(geometry);
        node->setFlag(QSGNode::OwnsGeometry);
        node->setMaterial(material);
        node->setFlag(QSGNode::OwnsMaterial);
        getColor();
    } else {
        geometry = node->geometry();
        material = static_cast<QSGFlatColorMaterial *>(node->material());
    }
    geometry->vertexDataAsPoint2D()[0].set(p_startPoint.x(), p_startPoint.y());
    geometry->vertexDataAsPoint2D()[1].set(p_endPoint.x(), p_endPoint.y());
    material->setColor(getColor());
    node->markDirty(QSGNode::DirtyGeometry);

    return node;
}

但是我的线看起来很丑。边缘很粗糙，看起来像DOS图形一样。所以我的问题是 - 我怎样可以应用平滑的绘画？我知道可能是某种着色器之类的东西，但我找不到任何文档。

1
我认为抗锯齿默认设置为false，导致出现锯齿状的线条。尝试将其设置为true。顺便问一下，为什么不使用QQuickPaintedItem？那会更容易/更安全，可以参考这个例子。 - BaCaRoZzo
1
QQuickPaintedItem由于双重绘制而过慢。是的，对于小型或不复杂的场景可能有用，但我的目标平台是Android，我希望尽可能快地完成它。 - folibis
1个回答
24
场景图支持两种类型的抗锯齿。例如矩形和图像等基本元素将通过在其边缘上添加更多顶点来进行抗锯齿处理，使得边缘逐渐变为透明。这种方法称为顶点抗锯齿。如果您请求一个多采样OpenGL上下文，场景图将优先使用基于多采样的抗锯齿（MSAA）。
即使两个边缘在数学上相同，顶点抗锯齿也可能在相邻基本元素的边缘之间产生接缝。而多采样抗锯齿则不会出现这种情况。
多采样抗锯齿是一种硬件功能，其中硬件计算每个像素在基元中的覆盖值。某些硬件可以以非常低的成本进行多采样，而其他硬件可能需要更多的内存和GPU周期来呈现帧。
要启用多采样抗锯齿，您应该使用QQuickWindow::setFormat()设置具有大于0的样本的QSurfaceFormat。
QQuickView view;
QSurfaceFormat format = view.format();
format.setSamples(16);
view.setFormat(format);
view.show();

顶点抗锯齿

可以使用Item::antialiasing属性在每个项目上启用或禁用顶点抗锯齿。它将在不考虑底层硬件支持的情况下工作，并为通常渲染的基本图形和捕获到帧缓冲对象中的基本图形产生更高质量的抗锯齿效果。

使用顶点抗锯齿的缺点是必须对启用了抗锯齿的每个基本图形进行混合。在批处理方面，这意味着渲染器需要做更多的工作来确定是否可以对基本图形进行批处理，由于与场景中其他元素的重叠，这也可能导致较少的批处理，从而影响性能。

要将顶点抗锯齿应用于从QQuickItem派生的自定义QML元素，请按照以下步骤进行：

1）创建自定义材料和OpenGL着色器程序。

smoothcolormaterial.h

#include <QSGMaterial>
#include <QSGMaterialShader>

//----------------------------------------------------------------------

class QSGSmoothColorMaterial : public QSGMaterial
{
public:
    QSGSmoothColorMaterial();
    int compare(const QSGMaterial *other) const;
protected:
    virtual QSGMaterialType *type() const;
    virtual QSGMaterialShader *createShader() const;
};

//----------------------------------------------------------------------

class QSGSmoothColorMaterialShader : public QSGMaterialShader
{
public:
    QSGSmoothColorMaterialShader();
    virtual void updateState(const RenderState &state, QSGMaterial *newEffect, QSGMaterial *oldEffect);
    virtual char const *const *attributeNames() const;
private:
    void initialize();
    int m_matrixLoc;
    int m_opacityLoc;
    int m_pixelSizeLoc;
};

smoothcolormaterial.cpp

QSGSmoothColorMaterial::QSGSmoothColorMaterial()
{
    setFlag(RequiresFullMatrixExceptTranslate, true);
    setFlag(Blending, true);
}

int QSGSmoothColorMaterial::compare(const QSGMaterial *other) const
{
    Q_UNUSED(other)
    return 0;
}

QSGMaterialType *QSGSmoothColorMaterial::type() const
{
    static QSGMaterialType type;
    return &type;
}

QSGMaterialShader *QSGSmoothColorMaterial::createShader() const
{
    return new QSGSmoothColorMaterialShader();
}

//----------------------------------------------------------------------

QSGSmoothColorMaterialShader::QSGSmoothColorMaterialShader()
    : QSGMaterialShader()
{
    setShaderSourceFile(QOpenGLShader::Vertex, QStringLiteral(":/shaders/smoothcolor.vert"));
    setShaderSourceFile(QOpenGLShader::Fragment, QStringLiteral(":/shaders/smoothcolor.frag"));
}

void QSGSmoothColorMaterialShader::updateState(const QSGMaterialShader::RenderState &state, QSGMaterial *newEffect, QSGMaterial *oldEffect)
{
    Q_UNUSED(newEffect)

    if (state.isOpacityDirty())
        program()->setUniformValue(m_opacityLoc, state.opacity());

    if (state.isMatrixDirty())
        program()->setUniformValue(m_matrixLoc, state.combinedMatrix());

    if (oldEffect == 0) {
        // The viewport is constant, so set the pixel size uniform only once.
        QRect r = state.viewportRect();
        program()->setUniformValue(m_pixelSizeLoc, 2.0f / r.width(), 2.0f / r.height());
    }
}

const char * const *QSGSmoothColorMaterialShader::attributeNames() const
{
    static char const *const attributes[] = {
        "vertex",
        "vertexColor",
        "vertexOffset",
        0
    };
    return attributes;
}

void QSGSmoothColorMaterialShader::initialize()
{
    m_matrixLoc = program()->uniformLocation("matrix");
    m_opacityLoc = program()->uniformLocation("opacity");
    m_pixelSizeLoc = program()->uniformLocation("pixelSize");
}

片段着色器

varying lowp vec4 color;

void main()
{
    gl_FragColor = color;
}

顶点着色器

uniform highp vec2 pixelSize;
uniform highp mat4 matrix;
uniform lowp float opacity;

attribute highp vec4 vertex;
attribute lowp vec4 vertexColor;
attribute highp vec2 vertexOffset;

varying lowp vec4 color;

void main()
{
    highp vec4 pos = matrix * vertex;
    gl_Position = pos;

    if (vertexOffset.x != 0.) {
        highp vec4 delta = matrix[0] * vertexOffset.x;
        highp vec2 dir = delta.xy * pos.w - pos.xy * delta.w;
        highp vec2 ndir = .5 * pixelSize * normalize(dir / pixelSize);
        dir -= ndir * delta.w * pos.w;
        highp float numerator = dot(dir, ndir * pos.w * pos.w);
        highp float scale = 0.0;
        if (numerator < 0.0)
            scale = 1.0;
        else
            scale = min(1.0, numerator / dot(dir, dir));
        gl_Position += scale * delta;
    }

    if (vertexOffset.y != 0.) {
        highp vec4 delta = matrix[1] * vertexOffset.y;
        highp vec2 dir = delta.xy * pos.w - pos.xy * delta.w;
        highp vec2 ndir = .5 * pixelSize * normalize(dir / pixelSize);
        dir -= ndir * delta.w * pos.w;
        highp float numerator = dot(dir, ndir * pos.w * pos.w);
        highp float scale = 0.0;
        if (numerator < 0.0)
            scale = 1.0;
        else
            scale = min(1.0, numerator / dot(dir, dir));
        gl_Position += scale * delta;
    }

    color = vertexColor * opacity;
}

2) 为 QSGGeometry 创建自定义的 AttributeSet。

myquickitem.cpp

namespace
{
    struct Color4ub
    {
        unsigned char r, g, b, a;
    };

    inline Color4ub colorToColor4ub(const QColor &c)
    {
        Color4ub color = { uchar(c.redF() * c.alphaF() * 255),
                           uchar(c.greenF() * c.alphaF() * 255),
                           uchar(c.blueF() * c.alphaF() * 255),
                           uchar(c.alphaF() * 255)
                         };
        return color;
    }

    struct SmoothVertex
    {
        float x, y;
        Color4ub color;
        float dx, dy;
        void set(float nx, float ny, Color4ub ncolor, float ndx, float ndy)
        {
            x = nx; y = ny; color = ncolor;
            dx = ndx; dy = ndy;
        }
    };

    const QSGGeometry::AttributeSet &smoothAttributeSet()
    {
        static QSGGeometry::Attribute data[] = {
            QSGGeometry::Attribute::create(0, 2, GL_FLOAT, true),
            QSGGeometry::Attribute::create(1, 4, GL_UNSIGNED_BYTE, false),
            QSGGeometry::Attribute::create(2, 2, GL_FLOAT, false)
        };
        static QSGGeometry::AttributeSet attrs = { 3, sizeof(SmoothVertex), data };
        return attrs;
    }
}

3) 将自定义材质和自定义几何图形应用于 QSGGeometryNode。

myquickitem.cpp

QSGNode *MyQuickItem::updatePaintNode(QSGNode *oldNode, QQuickItem::UpdatePaintNodeData *data)
{
     QSGGeometryNode *node = 0;

     QSGGeometry *geometry;
     QSGSmoothColorMaterial *material;
     node = static_cast<QSGGeometryNode *>(oldNode);
     if(!node) {
         node = new QSGGeometryNode;
         geometry = new QSGGeometry(smoothAttributeSet(), 0);
         geometry->setDrawingMode(GL_TRIANGLE_STRIP);
         material = new QSGSmoothColorMaterial();
         node->setGeometry(geometry);
         node->setFlag(QSGNode::OwnsGeometry);
         node->setMaterial(material);
         node->setFlag(QSGNode::OwnsMaterial);
     } else {
         geometry = node->geometry();
         material = static_cast<QSGSmoothColorMaterial *>(node->material());
     }

4) 获取顶点数据的指针。

 int vertexStride = geometry->sizeOfVertex();
 int vertexCount = 8;

 geometry->allocate(vertexCount, 0);
 SmoothVertex *smoothVertices = reinterpret_cast<SmoothVertex *>(geometry->vertexData());
 memset(smoothVertices, 0, vertexCount * vertexStride);

5) 设置顶点数据。

您需要4个点。

 float lineWidth = 4;
 float tlX = 0;   float tlY = 0;               //top-left
 float blX = 0;   float blY = 0 + lineWidth;   //bottom-left
 float trX = 500; float trY = 100;             //top-right
 float brX = 500; float brY = 100 + lineWidth; //bottom-right
 float delta = lineWidth * 0.5f;

 Color4ub fillColor = colorToColor4ub(QColor(255,0,0,255));
 Color4ub transparent = { 0, 0, 0, 0 };

为了绘制抗锯齿线，您需要设置8个顶点以绘制6个三角形（2个用于线条，4个用于抗锯齿）。顶点0和2、1和3、4和6、5和7具有相同的坐标，但颜色不同且顶点偏移相反。

enter image description here 

 smoothVertices[0].set(trX, trY, transparent, delta, -delta);
 smoothVertices[1].set(tlX, tlY, transparent, -delta, -delta);

 smoothVertices[2].set(trX, trY, fillColor, -delta, delta);
 smoothVertices[3].set(tlX, tlY, fillColor, delta, delta);
 smoothVertices[4].set(brX, brY, fillColor, -delta, -delta);
 smoothVertices[5].set(blX, blY, fillColor, delta, -delta);

 smoothVertices[6].set(brX, brY, transparent, delta, delta);
 smoothVertices[7].set(blX, blY, transparent, -delta, delta);


 node->markDirty(QSGNode::DirtyGeometry);

 return node;
 }
2
由于多重采样本身具有不可忽略的成本，因此替代方案是为主要几何形状提供一个逐渐变为透明的小边框。这就是 QQ2 中 Rectangle 所做的事情。 - peppe
谢谢，@Meefte，这个方法可以用。但我怀疑这个方法是为整个场景设置的，而不是仅针对指定的物品。 - folibis
谢谢，@peppe。是的，我已经检查了Rectangle元素的源代码。它使用QSGRectangleNode来绘制自己，而QSGRectangleNode又使用了一些平滑着色器。但是...呼...很难理解它是如何工作的。也许你有一些例子？ - folibis
很棒的答案！能否重用QSGRectangleNode实现的部分，比如材料或属性？ - Konstantinos Gaitanis
2
如果有人因为使用QQmlApplicationEngine而不是QQuickView而无法设置多重采样格式，那么您需要像这个Qt示例中所示使用QSurfaceFormat::setDefaultFormat()。 - Loomchild
你的回答非常好。它正是Qt文档中缺少的关于这个类的内容。我已经在桌面上使其工作，但由于某种原因，在iOS上它不起作用。我已经简化了片段着色器，只是绘制了一个纯色，但在iOS上没有任何东西被绘制出来。你有什么线索吗？再次感谢你提供如此精彩的答案！ - Nuno Santos
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接