在自定义QML元素中进行平滑绘制

时间：2015-01-24 12:25:05

标签： qt qml shader qtquick2

我现在尝试创建源自QQuickItem的自定义QML元素。所以我压倒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 个答案:

答案 0 :(得分：16)

场景图支持两种类型的抗锯齿。通过沿着图元的边缘添加更多顶点使得边缘渐变为透明，将对诸如矩形和图像的图元进行抗锯齿处理。这种方法称为顶点抗锯齿。如果您请求多重采样OpenGL上下文，则场景图将更喜欢基于多重采样的抗锯齿（MSAA）。

顶点抗锯齿可以在相邻图元的边缘之间产生接缝，即使两条边在数学上是相同的。多重采样抗锯齿不会。

多重采样抗锯齿

多重采样抗锯齿是硬件功能，其中硬件计算基元中每个像素的覆盖值。某些硬件可以以非常低的成本进行多重采样，而其他硬件可能需要更多内存和更多GPU周期来渲染帧。

要启用多重采样抗锯齿，您应使用QSurfaceFormat

将QQuickWindow::setFormat()设置为大于0的样本 
QQuickView view;
QSurfaceFormat format = view.format();
format.setSamples(16);
view.setFormat(format);
view.show();

顶点抗锯齿

可以使用Item::antialiasing属性在每个项目的基础上启用和禁用顶点抗锯齿。无论底层硬件支持什么，它都可以工作，并为正常渲染的图元和捕获到帧缓冲对象中的图元生成更高质量的抗锯齿。

使用顶点抗锯齿的缺点是必须混合启用了抗锯齿的每个基元。就batching而言，这意味着渲染器需要做更多的工作来确定原始是否可以批处理，并且由于与场景中的其他元素重叠，它也可能导致更少的批处理，可能影响绩效。

要将顶点抗锯齿应用于从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）为AttributeSet创建自定义QSGGeometry。

<强> 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;
 }
相关问题
最新问题