Mar 13 2014 How to draw a red square in Magnum — in one statement

The fol­low­ing state­ment cre­ates and renders a red square in Mag­num. The state­ment is wrapped on four lines for bet­ter read­ab­il­ity:

MeshTools::compile(Primitives::squareSolid()))
    .draw(Shaders::Flat2D{}
        .setTransformationProjectionMatrix(Matrix3::scaling({0.2f, 0.3f}))
        .setColor(0xff0000_rgbf));

Copy-past­ing it in­to draw event of the ba­sic boostrap ap­plic­a­tion and do­ing a bunch of #include and lib­rary link­ing bur­eau­cracy will res­ult in this im­age:

import QtQuick 2.0

Item {
    Rectangle {
        color: "red"
        width: 100
        height: 100
        x: 100
        y: 100
    }
}

The Qt Quick code, shown on the right, is slightly short­er, but the C++ ver­sion of com­par­able per­form­ance shown in the post is far more verb­ose in Qt than in Mag­num. A couple things worth not­ing:

• Un­like in the Qt code we aren’t us­ing any scene graph but do everything dir­ectly. In this par­tic­u­lar case the scene graph would com­plic­ate things rather than make them sim­pler.
• Thanks to ex­pres­sion-ori­ented (and not state­ment-ori­ented) API and meth­od chain­ing it’s pos­sible to con­cat­en­ate many calls on one line.
• In C++ all tem­por­ar­ies are kept un­til the end of the state­ment (the ; char­ac­ter), so the code doesn’t rely on any un­defined be­ha­vi­or, even though it might look like that.
• This is ob­vi­ously only per­form­ant as an one-off draw, re­cre­at­ing all ob­jects every frame wouldn’t be ex­actly ef­fi­cient.
• This ex­act thing can be done even sim­pler (and faster) us­ing scis­sor test and frame­buf­fer clear, but that’s not the point.

The fol­low­ing code is the ex­act equi­val­ent of the above, with ex­pli­cit tem­por­ar­ies for bet­ter un­der­stand­ing:

Trade::MeshData2D meshData = Primitives::squareSolid();
GL::Mesh mesh = MeshTools::compile(meshData);

Shaders::Flat2D shader;
shader.setTransformationProjectionMatrix(Matrix3::scaling({0.2f, 0.3f}))
      .setColor(0xff0000_rgbf);

mesh.draw(shader);

The setup and ac­tu­al draw­ing is now clearly sep­ar­ated. You can now see that we ab­used meth­od chain­ing to cre­ate, con­fig­ure and pass the shader to GL::Mesh::draw() in a single ex­pres­sion, but that’s a per­fectly leg­al thing to do. Hav­ing 2D equi­val­ents of everything also makes things a bit sim­pler, on the oth­er hand dis­play­ing a 3D cube would only need a dif­fer­ent prim­it­ive, a dif­fer­ent shader with more in­volved con­fig­ur­a­tion and en­abling the depth test. The code is also as fast as it could get, un­less you have a very spe­cif­ic use case (like draw­ing thou­sands of squares in a particle sys­tem).

constexpr Vector2 data[]{{ 1.0f, -1.0f}, { 1.0f,  1.0f},
                         {-1.0f, -1.0f}, {-1.0f,  1.0f}};

GL::Buffer buffer;
buffer.setData(data);

GL::Mesh mesh{MeshPrimitive::TriangleStrip};
mesh.setCount(4)
    .addVertexBuffer(buffer, 0, Shaders::Flat2D::Position{});

struct FlatShader: GL::AbstractShaderProgram {
    typedef GL::Attribute<0, Vector2> Position;

    FlatShader() {
        GL::Shader vert{GL::Version::GL430, GL::Shader::Type::Vertex};
        vert.addSource(R"GLSL(
layout(location = 0) uniform mat3 matrix;
layout(location = 0) in vec4 position;

void main() {
    gl_Position = vec4(matrix*position.xyw, 0.0).xywz;
}
)GLSL").compile();

        GL::Shader frag{GL::Version::GL430, GL::Shader::Type::Fragment};
        frag.addSource(R"GLSL(
layout(location = 1) uniform vec4 color;
out vec4 fragmentColor;

void main() {
    fragmentColor = color;
}
)GLSL").compile();

        attachShader(vert);
        attachShader(frag);
        link();
    }

    FlatShader& setTransformationProjectionMatrix(const Matrix3& matrix) {
        setUniform(0, matrix);
        return *this;
    }

    FlatShader& setColor(const Color4& color) {
        setUniform(1, color);
        return *this;
    }
};

// ...

GL::Mesh mesh{MeshPrimitive::TriangleStrip};
mesh.setCount(4)
    .addVertexBuffer(buffer, 0, FlatShader::Position{});

FlatShader shader;
shader.setTransformationProjectionMatrix(Matrix3::scaling({0.2f, 0.3f}))
      .setColor(0xff0000_rgbf);

// ...