Introduce hardware accelerated curve renderer for Shapes

This implements the Loop/Blinn algorithm for quadratic curves
as an optional backend for Qt Quick Shapes, basically distance
fields where the distance to curves are calculated in the
fragment shader.

This means cubic curves are approximated, which will give
varying results, but for many shapes (such as text) this is
efficient and means the shapes can be zoomed indefinitely
while still retaining curvature as well as anti-aliasing
working without MSAA.

Preliminary results give some frame rate improvements
compared to doing MSAA and GeometryRenderer, but the major
improvement is that you can get smooth curves at any zoom
level without re-triangulating the shape.

Note that the renderer currently does not do antialiasing
for straight lines. This would still require MSAA, but at
a lower cost than for GeometryRenderer since there are
much fewer triangles. Adding AA here as well is work in
progress.

Task-number: QTBUG-104122
Done-with: Paul Olav Tvete <paul.tvete@qt.io>
Done-with: Eirik Aavitsland <eirik.aavitsland@qt.io>
Done-with: Amr Elsayed <amr.elsayed@qt.io>
Change-Id: I6b4a1103546fbdfe760906f7a183101f8eedb9d3
Reviewed-by: Eirik Aavitsland <eirik.aavitsland@qt.io>
Reviewed-by: Eskil Abrahamsen Blomfeldt <eskil.abrahamsen-blomfeldt@qt.io>

2 files changed, 31 insertions, 12 deletions

diff --git a/examples/quick/shapes/interactive.qml b/examples/quick/shapes/interactive.qml
index f986eaff43..0525f4eed3 100644
--- a/examples/quick/shapes/interactive.qml
+++ b/examples/quick/shapes/interactive.qml
@@ -56,7 +56,7 @@ Rectangle {
                 property Component shapeType: Component {
                     ShapePath {
                         id: quadShapePath
-                        strokeColor: root.palette.windowText
+                        strokeColor: strokeSwitch.checked ? root.palette.windowText : "transparent"
                         strokeWidth: widthSlider.value
                         fillColor: fillSwitch.checked ? "green" : "transparent"
                         PathQuad {
@@ -83,7 +83,7 @@ Rectangle {
                 property Component shapeType: Component {
                     ShapePath {
                         id: cubicShapePath
-                        strokeColor: root.palette.windowText
+                        strokeColor: strokeSwitch.checked ? root.palette.windowText : "transparent"
                         strokeWidth: widthSlider.value
                         fillColor: fillSwitch.checked ? "green" : "transparent"
                         PathCubic {
@@ -109,6 +109,15 @@ Rectangle {
                     }
                 }
             }
+            ToolButton {
+                id: modifyButton
+                text: qsTr("Modify")
+                checkable: true
+                onCheckedChanged: {
+                    if (checked)
+                        showHandlesSwitch.checked = true;
+                }
+            }
         }
 
         Label {
@@ -130,6 +139,12 @@ Rectangle {
             id: fillSwitch
             text: qsTr("Fill")
         }
+
+        Switch {
+            id: strokeSwitch
+            text: qsTr("Stroke")
+            checked: true
+        }
     }
 
     Component {
@@ -144,9 +159,11 @@ Rectangle {
 
             width: 20
             height: width
+            radius: halfWidth
             visible: showHandlesSwitch.checked
             color: hh.hovered  ? "yellow" : idleColor
             border.color: "grey"
+            opacity: 0.75
 
             property real halfWidth: width / 2
             property bool complete: false
@@ -203,14 +220,16 @@ Rectangle {
             property ShapePath activePath: null
             onActiveChanged: {
                 const tool = toolButtons.checkedButton;
-                if (active) {
-                    activePath = tool.shapeType.createObject(root, {
-                        startX: centroid.position.x, startY: centroid.position.y
-                    });
-                    shape.data.push(activePath);
-                } else {
-                    activePath.finishCreation();
-                    activePath = null;
+                if (tool != modifyButton) {
+                    if (active) {
+                        activePath = tool.shapeType.createObject(root, {
+                            startX: centroid.position.x, startY: centroid.position.y
+                        });
+                        shape.data.push(activePath);
+                    } else {
+                        activePath.finishCreation();
+                        activePath = null;
+                    }
                 }
             }
             onCentroidChanged: if (activePath) {
diff --git a/examples/quick/shapes/shapegallery.qml b/examples/quick/shapes/shapegallery.qml
index 34056a0ccd..b74c0b9631 100644
--- a/examples/quick/shapes/shapegallery.qml
+++ b/examples/quick/shapes/shapegallery.qml
@@ -159,8 +159,8 @@ Rectangle {
         }
         color: "darkBlue"
         font.pointSize: 12
-        readonly property variant rendererStrings: [ qsTr("Unknown"), qsTr("Generic (QtGui triangulator)"), qsTr("GL_NV_path_rendering"), qsTr("Software (QPainter)") ]
-        text: qsTr("Active Shape backend: ") + rendererStrings[dummyShape.rendererType]
+        readonly property variant rendererStrings: [ qsTr("Unknown"), qsTr("Generic (QtGui triangulator)"), qsTr("GL_NV_path_rendering"), qsTr("Software (QPainter)"), qsTr("Curve Renderer") ]
+        text: "Active Shape backend: " + rendererStrings[dummyShape.rendererType]
         SequentialAnimation on opacity {
             NumberAnimation {
                 from: 1