Drastically improve quality of JUCE rendered text and components by aligning image to pixel grid

timothyschoen · timothyschoen · commit 7944c4df134b · 2025-07-18T16:30:13.000+02:00
diff --git a/Libraries/nanovg b/Libraries/nanovg
@@ -1 +1 @@
-Subproject commit f9acedc9d69b8a4f40854c3a826518633bd16ec1
+Subproject commit aa8ce261f48e2366dd458ec7b2d1cc0cb5f7427b
diff --git a/Source/Canvas.cpp b/Source/Canvas.cpp
@@ -499,7 +499,7 @@ void Canvas::parentHierarchyChanged()
 
 void Canvas::updateFramebuffers(NVGcontext* nvg)
 {
-    auto const pixelScale = getRenderScale();
+    auto const pixelScale = editor->getRenderScale();
     auto zoom = getValue<float>(zoomScale);
 
     constexpr int resizerLogicalSize = 9;
@@ -642,7 +642,7 @@ void Canvas::performRender(NVGcontext* nvg, Rectangle<int> invalidRegion)
             constexpr auto pos = Point<int>(halfSize, halfSize);
 
             auto scaledStrokeSize = zoom < 1.0f ? jmap(zoom, 1.0f, 0.25f, 1.5f, 4.0f) : 1.5f;
-            if (zoom < 0.3f && getRenderScale() <= 1.0f)
+            if (zoom < 0.3f && editor->getRenderScale() <= 1.0f)
                 scaledStrokeSize = jmap(zoom, 0.3f, 0.25f, 4.0f, 8.0f);
 
             if (bg) {
@@ -817,11 +817,6 @@ void Canvas::performRender(NVGcontext* nvg, Rectangle<int> invalidRegion)
     }
 }
 
-float Canvas::getRenderScale() const
-{
-    return editor->nvgSurface.getRenderScale();
-}
-
 void Canvas::renderAllObjects(NVGcontext* nvg, Rectangle<int> const area)
 {
     for (auto* obj : objects) {
diff --git a/Source/Canvas.h b/Source/Canvas.h
@@ -151,8 +151,6 @@ class Canvas final : public Component
 
     void zoomToFitAll();
 
-    float getRenderScale() const;
-
     bool autoscroll(MouseEvent const& e);
 
     // Multi-dragger functions
diff --git a/Source/NVGSurface.h b/Source/NVGSurface.h
@@ -307,12 +307,29 @@ class NVGImage {
 
     void renderJUCEComponent(NVGcontext* nvg, Component& component, float const scale)
     {
-        Image componentImage = component.createComponentSnapshot(Rectangle<int>(0, 0, component.getWidth(), component.getHeight()), false, scale);
-        if (componentImage.isNull())
-            return;
-
+        nvgSave(nvg);
+        nvgScale(nvg, 1.0f / scale, 1.0f / scale);
+        
+        Point<float> offset;
+        nvgTransformGetSubpixelOffset(nvg, &offset.x, &offset.y);
+        
+        auto w = roundToInt (scale * (float) component.getWidth()) + 1;
+        auto h = roundToInt (scale * (float) component.getHeight()) + 1;
+
+        Image componentImage (component.isOpaque() ? Image::RGB : Image::ARGB, w, h, true);
+        {
+            Graphics g (componentImage);
+            g.addTransform(AffineTransform::translation(offset.x, offset.y));
+            g.addTransform(AffineTransform::scale(scale, scale));
+            component.paintEntireComponent (g, true);
+        }
+        
         loadJUCEImage(nvg, componentImage);
-        render(nvg, { 0, 0, component.getWidth(), component.getHeight() });
+        
+        // Make sure image pixel grid aligns with physical pixels
+        nvgTransformQuantize(nvg);
+        render(nvg, { 0, 0, w, h });
+        nvgRestore(nvg);
     }
     
     
diff --git a/Source/Object.cpp b/Source/Object.cpp
@@ -1206,7 +1206,7 @@ void Object::render(NVGcontext* nvg)
 
     if (newObjectEditor) {
         nvgDrawRoundedRect(nvg, 0, 0, b.getWidth(), b.getHeight(), cnv->textObjectBackgroundCol, isSelected() ? cnv->selectedOutlineCol : cnv->objectOutlineCol, Corners::objectCornerRadius);
-        textEditorRenderer.renderJUCEComponent(nvg, *newObjectEditor, getValue<float>(cnv->zoomScale) * cnv->getRenderScale());
+        textEditorRenderer.renderJUCEComponent(nvg, *newObjectEditor, getValue<float>(cnv->zoomScale) * editor->getRenderScale());
     }
 
     // If autoconnect is about to happen, draw a fake inlet with a dotted outline
@@ -1295,7 +1295,7 @@ void Object::renderLabel(NVGcontext* nvg)
             NVGScopedState scopedState(nvg);
             nvgTranslate(nvg, label->getX(), label->getY());
             if (label->isVisible()) {
-                label->renderLabel(nvg, cnv->getRenderScale() * 2.0f);
+                label->renderLabel(nvg, editor->getRenderScale() * 2.0f);
             }
         }
     }
diff --git a/Source/Objects/CommentObject.h b/Source/Objects/CommentObject.h
@@ -49,7 +49,7 @@ class CommentObject final : public ObjectBase
     {
         if (!editor) {
             auto const textArea = border.subtractedFrom(getLocalBounds());
-            textRenderer.renderText(nvg, textArea, getImageScale());
+            textRenderer.renderText(nvg, textArea.toFloat(), getImageScale());
         } else {
             imageRenderer.renderJUCEComponent(nvg, *editor, getImageScale());
         }
diff --git a/Source/Objects/GraphOnParent.h b/Source/Objects/GraphOnParent.h
@@ -396,7 +396,7 @@ class GraphOnParent final : public ObjectBase {
             } else {
                 auto const text = getText();
                 if (text != "graph" && text.isNotEmpty()) {
-                    textRenderer.renderText(nvg, Rectangle<int>(5, 0, getWidth() - 5, 16), getImageScale());
+                    textRenderer.renderText(nvg, Rectangle<float>(5, 0, getWidth() - 5, 16), getImageScale());
                 }
             }
         }
diff --git a/Source/Objects/MessageObject.h b/Source/Objects/MessageObject.h
@@ -167,7 +167,7 @@ class MessageObject final : public ObjectBase
         if (editor) {
             imageRenderer.renderJUCEComponent(nvg, *editor, getImageScale());
         } else {
-            textRenderer.renderText(nvg, border.subtractedFrom(getLocalBounds()), getImageScale());
+            textRenderer.renderText(nvg, border.subtractedFrom(getLocalBounds()).toFloat(), getImageScale());
         }
     }
 
diff --git a/Source/Objects/ObjectBase.cpp b/Source/Objects/ObjectBase.cpp
@@ -498,18 +498,10 @@ float ObjectBase::getImageScale()
     }
     if (topLevel->editor->pluginMode) {
         auto const scale = std::sqrt(std::abs(topLevel->getTransform().getDeterminant()));
-        return topLevel->getRenderScale() * std::max(1.0f, scale);
+        return object->editor->getRenderScale() * std::max(1.0f, scale);
     }
 
-    // Use rng to gradually update them all as we zoom
-    // For perfomance, it's not desirable (or necessary) to update them all at once
-    // So we do it randomly, forcing a repaint if the different is larger than 0.15
-    auto const randval = rand() % 4;
-    auto const bestScale = topLevel->getRenderScale() * getValue<float>(topLevel->zoomScale);
-    auto const newScale = topLevel->isZooming && randval != 0 && std::abs(bestScale - lastImageScale) < 0.15f ? lastImageScale : bestScale;
-    lastImageScale = newScale; // TODO: getters shouldn't have side-effects!
-
-    return newScale;
+    return object->editor->getRenderScale() * getValue<float>(topLevel->zoomScale);
 }
 
 ObjectParameters ObjectBase::getParameters()
diff --git a/Source/Objects/ObjectBase.h b/Source/Objects/ObjectBase.h
@@ -257,7 +257,6 @@ class ObjectBase : public Component
 
 protected:
     String type;
-    float lastImageScale = 2.0f;
     PropertyListener propertyListener;
 
     NVGImage imageRenderer;
diff --git a/Source/Objects/PopMenu.h b/Source/Objects/PopMenu.h
@@ -227,7 +227,7 @@ class PopMenu final : public ObjectBase {
         
         auto textBounds = getLocalBounds().reduced(2).translated(2, 0);
         if(!textBounds.isEmpty()) {
-            textRenderer.renderText(nvg, textBounds, getImageScale());
+            textRenderer.renderText(nvg, textBounds.toFloat(), getImageScale());
         }
         
         auto triangleBounds = b.removeFromRight(20).withSizeKeepingCentre(20, std::min(getHeight(), 12));
diff --git a/Source/Objects/ScalarObject.h b/Source/Objects/ScalarObject.h
@@ -364,12 +364,13 @@ class DrawableSymbol final : public DrawableTemplate
 
     void render(NVGcontext* nvg) override
     {
-        auto const scale = canvas->isZooming ? canvas->getRenderScale() * 2.0f : canvas->getRenderScale() * std::max(1.0f, getValue<float>(canvas->zoomScale));
+        
+        auto const scale = canvas->isZooming ? canvas->editor->getRenderScale() * 2.0f : canvas->editor->getRenderScale() * std::max(1.0f, getValue<float>(canvas->zoomScale));
         auto const bounds = getBoundingBox().getBoundingBox().toNearestInt();
         NVGScopedState scopedState(nvg);
         nvgTranslate(nvg, bounds.getX(), bounds.getY());
         textRenderer.prepareLayout(getText(), getFont(), getColour(), getWidth(), getWidth(), false);
-        textRenderer.renderText(nvg, bounds.withZeroOrigin(), scale);
+        textRenderer.renderText(nvg, bounds.withZeroOrigin().toFloat(), scale);
     }
 
     void handleMouseDown(MouseEvent const& e)
diff --git a/Source/Objects/TextObject.h b/Source/Objects/TextObject.h
@@ -220,7 +220,7 @@ class TextBase : public ObjectBase
         if (editor && editor->isVisible()) {
             imageRenderer.renderJUCEComponent(nvg, *editor, getImageScale());
         } else {
-            cachedTextRender.renderText(nvg, border.subtractedFrom(b), getImageScale());
+            cachedTextRender.renderText(nvg, border.subtractedFrom(b).toFloat(), getImageScale());
         }
     }
 
diff --git a/Source/Pd/MessageListener.h b/Source/Pd/MessageListener.h
@@ -18,12 +18,6 @@ class MessageListener {
     JUCE_DECLARE_WEAK_REFERENCEABLE(MessageListener)
 };
 
-// A simple memory block structure to manage free list.
-struct MemoryBlock {
-    void* ptr;
-    size_t size;
-};
-
 template<typename T>
 class MessageVector {
 private:
diff --git a/Source/PluginEditor.cpp b/Source/PluginEditor.cpp
@@ -873,6 +873,11 @@ Canvas* PluginEditor::getCurrentCanvas()
     return tabComponent.getCurrentCanvas();
 }
 
+float PluginEditor::getRenderScale() const
+{
+    return nvgSurface.getRenderScale();
+}
+
 void PluginEditor::valueChanged(Value& v)
 {
     // Update theme
diff --git a/Source/PluginEditor.h b/Source/PluginEditor.h
@@ -110,6 +110,8 @@ class PluginEditor final : public AudioProcessorEditor
 
     SmallArray<Canvas*> getCanvases();
     Canvas* getCurrentCanvas();
+    
+    float getRenderScale() const;
 
     void modifierKeysChanged(ModifierKeys const& modifiers) override;
 
diff --git a/Source/Utility/CachedTextRender.h b/Source/Utility/CachedTextRender.h
@@ -4,21 +4,32 @@ class CachedTextRender {
 public:
     CachedTextRender() = default;
 
-    void renderText(NVGcontext* nvg, Rectangle<int> const& bounds, float const scale)
+    void renderText(NVGcontext* nvg, Rectangle<float> const& bounds, float const scale)
     {
-        if (updateImage || !image.isValid() || lastRenderBounds != bounds || lastScale != scale) {
-            renderTextToImage(nvg, Rectangle<int>(bounds.getX(), bounds.getY(), bounds.getWidth() + 6, bounds.getHeight()), scale);
-            lastRenderBounds = bounds;
+        auto intBounds = bounds.toNearestInt();
+        if (updateImage || !image.isValid() || lastRenderBounds != intBounds || lastScale != scale) {
+            renderTextToImage(nvg, bounds, scale);
+            lastRenderBounds = intBounds;
             lastScale = scale;
             updateImage = false;
         }
 
         NVGScopedState scopedState(nvg);
-        nvgIntersectScissor(nvg, bounds.getX(), bounds.getY(), bounds.getWidth(), bounds.getHeight());
-        auto const imagePattern = isSyntaxHighlighted ? nvgImagePattern(nvg, 0, 0, bounds.getWidth() + 6, bounds.getHeight(), 0, image.getImageId(), 1.0f) : nvgImageAlphaPattern(nvg, 0, 0, bounds.getWidth() + 6, bounds.getHeight(), 0, image.getImageId(), NVGComponent::convertColour(lastColour));
+        
+        nvgScale(nvg, 1.0f / scale, 1.0f / scale);
+        nvgTranslate(nvg, roundToInt(bounds.getX() * scale), roundToInt((bounds.getY() - 1) * scale));
+        
+        // Since JUCE text was calculated on a pixel grid, we need to make sure that we also display the text on a whole pixel grid
+        nvgTransformQuantize(nvg);
+        
+        int imageW = roundToInt(bounds.getWidth() * scale) + 1;
+        int imageH = roundToInt(bounds.getHeight() * scale) + 1;
+
+        nvgIntersectScissor(nvg, 0, 0, imageW, imageH);
+        auto const imagePattern = isSyntaxHighlighted ? nvgImagePattern(nvg, 0, 0, imageW, imageH, 0, image.getImageId(), 1.0f) : nvgImageAlphaPattern(nvg, 0, 0, imageW, imageH, 0, image.getImageId(), NVGComponent::convertColour(lastColour));
 
         nvgFillPaint(nvg, imagePattern);
-        nvgFillRect(nvg, bounds.getX(), bounds.getY(), bounds.getWidth() + 6, bounds.getHeight());
+        nvgFillRect(nvg, 0, 0, imageW, imageH);
     }
 
     static AttributedString getSyntaxHighlightedString(String const& text, Font const& font, Colour const& colour, Colour const& nameColour)
@@ -94,14 +105,27 @@ class CachedTextRender {
         return needsUpdate;
     }
 
-    void renderTextToImage(NVGcontext* nvg, Rectangle<int> const& bounds, float scale)
+    void renderTextToImage(NVGcontext* nvg, Rectangle<float> const& bounds, float scale)
     {
-        int const width = std::floor(bounds.getWidth() * scale);
-        int const height = std::floor(bounds.getHeight() * scale);
-
-        image = NVGImage(nvg, width, height, [this, bounds, scale](Graphics& g) {
+        int const width = roundToInt(bounds.getWidth() * scale) + 1;
+        int const height = roundToInt(bounds.getHeight() * scale) + 1;
+
+        // Calculate the offset we need to apply to align to pixel grid, then offset the drawn content by that amount
+        // This makes sure that the logical position of the text is correct when we align the image's grid to align with the screen pixel grid
+        Point<float> offset;
+        {
+            NVGScopedState scopedState(nvg);
+            
+            nvgScale(nvg, 1.0f / scale, 1.0f / scale);
+            nvgTranslate(nvg, roundToInt(bounds.getX() * scale), roundToInt(bounds.getY() * scale));
+            nvgTransformGetSubpixelOffset(nvg, &offset.x, &offset.y);
+        }
+        
+        image = NVGImage(nvg, width, height, [this, bounds, scale, offset](Graphics& g) {
+            g.addTransform(AffineTransform::translation(offset.x, offset.y));
             g.addTransform(AffineTransform::scale(scale, scale));
-            layout.draw(g, bounds.toFloat()); }, isSyntaxHighlighted ? 0 : NVGImage::AlphaImage);
+            layout.draw(g, bounds.withZeroOrigin());
+        }, isSyntaxHighlighted ? 0 : NVGImage::AlphaImage);
     }
 
     Rectangle<int> getTextBounds()

Original file line number	Diff line number	Diff line change
`@@ -499,7 +499,7 @@ void Canvas::parentHierarchyChanged()`
`499`	`499`
`500`	`500`	`void Canvas::updateFramebuffers(NVGcontext* nvg)`
`501`	`501`	`{`
`502`		`- auto const pixelScale = getRenderScale();`
	`502`	`+ auto const pixelScale = editor->getRenderScale();`
`503`	`503`	`auto zoom = getValue<float>(zoomScale);`
`504`	`504`
`505`	`505`	`constexpr int resizerLogicalSize = 9;`
`@@ -642,7 +642,7 @@ void Canvas::performRender(NVGcontext* nvg, Rectangle<int> invalidRegion)`
`642`	`642`	`constexpr auto pos = Point<int>(halfSize, halfSize);`
`643`	`643`
`644`	`644`	`auto scaledStrokeSize = zoom < 1.0f ? jmap(zoom, 1.0f, 0.25f, 1.5f, 4.0f) : 1.5f;`
`645`		`- if (zoom < 0.3f && getRenderScale() <= 1.0f)`
	`645`	`+ if (zoom < 0.3f && editor->getRenderScale() <= 1.0f)`
`646`	`646`	`scaledStrokeSize = jmap(zoom, 0.3f, 0.25f, 4.0f, 8.0f);`
`647`	`647`
`648`	`648`	`if (bg) {`
`@@ -817,11 +817,6 @@ void Canvas::performRender(NVGcontext* nvg, Rectangle<int> invalidRegion)`
`817`	`817`	`}`
`818`	`818`	`}`
`819`	`819`
`820`		`-float Canvas::getRenderScale() const`
`821`		`-{`
`822`		`- return editor->nvgSurface.getRenderScale();`
`823`		`-}`
`824`		`-`
`825`	`820`	`void Canvas::renderAllObjects(NVGcontext* nvg, Rectangle<int> const area)`
`826`	`821`	`{`
`827`	`822`	`for (auto* obj : objects) {`
Original file line number	Diff line number	Diff line change
`@@ -1206,7 +1206,7 @@ void Object::render(NVGcontext* nvg)`
`1206`	`1206`
`1207`	`1207`	`if (newObjectEditor) {`
`1208`	`1208`	`nvgDrawRoundedRect(nvg, 0, 0, b.getWidth(), b.getHeight(), cnv->textObjectBackgroundCol, isSelected() ? cnv->selectedOutlineCol : cnv->objectOutlineCol, Corners::objectCornerRadius);`
`1209`		`- textEditorRenderer.renderJUCEComponent(nvg, newObjectEditor, getValue<float>(cnv->zoomScale) cnv->getRenderScale());`
	`1209`	`+ textEditorRenderer.renderJUCEComponent(nvg, newObjectEditor, getValue<float>(cnv->zoomScale) editor->getRenderScale());`
`1210`	`1210`	`}`
`1211`	`1211`
`1212`	`1212`	`// If autoconnect is about to happen, draw a fake inlet with a dotted outline`
`@@ -1295,7 +1295,7 @@ void Object::renderLabel(NVGcontext* nvg)`
`1295`	`1295`	`NVGScopedState scopedState(nvg);`
`1296`	`1296`	`nvgTranslate(nvg, label->getX(), label->getY());`
`1297`	`1297`	`if (label->isVisible()) {`
`1298`		`- label->renderLabel(nvg, cnv->getRenderScale() * 2.0f);`
	`1298`	`+ label->renderLabel(nvg, editor->getRenderScale() * 2.0f);`
`1299`	`1299`	`}`
`1300`	`1300`	`}`
`1301`	`1301`	`}`
Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,7 @@ class CommentObject final : public ObjectBase`
`49`	`49`	`{`
`50`	`50`	`if (!editor) {`
`51`	`51`	`auto const textArea = border.subtractedFrom(getLocalBounds());`
`52`		`- textRenderer.renderText(nvg, textArea, getImageScale());`
	`52`	`+ textRenderer.renderText(nvg, textArea.toFloat(), getImageScale());`
`53`	`53`	`} else {`
`54`	`54`	`imageRenderer.renderJUCEComponent(nvg, *editor, getImageScale());`
`55`	`55`	`}`
Original file line number	Diff line number	Diff line change
`@@ -396,7 +396,7 @@ class GraphOnParent final : public ObjectBase {`
`396`	`396`	`} else {`
`397`	`397`	`auto const text = getText();`
`398`	`398`	`if (text != "graph" && text.isNotEmpty()) {`
`399`		`- textRenderer.renderText(nvg, Rectangle<int>(5, 0, getWidth() - 5, 16), getImageScale());`
	`399`	`+ textRenderer.renderText(nvg, Rectangle<float>(5, 0, getWidth() - 5, 16), getImageScale());`
`400`	`400`	`}`
`401`	`401`	`}`
`402`	`402`	`}`
Original file line number	Diff line number	Diff line change
`@@ -167,7 +167,7 @@ class MessageObject final : public ObjectBase`
`167`	`167`	`if (editor) {`
`168`	`168`	`imageRenderer.renderJUCEComponent(nvg, *editor, getImageScale());`
`169`	`169`	`} else {`
`170`		`- textRenderer.renderText(nvg, border.subtractedFrom(getLocalBounds()), getImageScale());`
	`170`	`+ textRenderer.renderText(nvg, border.subtractedFrom(getLocalBounds()).toFloat(), getImageScale());`
`171`	`171`	`}`
`172`	`172`	`}`
`173`	`173`
Original file line number	Diff line number	Diff line change
`@@ -498,18 +498,10 @@ float ObjectBase::getImageScale()`
`498`	`498`	`}`
`499`	`499`	`if (topLevel->editor->pluginMode) {`
`500`	`500`	`auto const scale = std::sqrt(std::abs(topLevel->getTransform().getDeterminant()));`
`501`		`- return topLevel->getRenderScale() * std::max(1.0f, scale);`
	`501`	`+ return object->editor->getRenderScale() * std::max(1.0f, scale);`
`502`	`502`	`}`
`503`	`503`
`504`		`- // Use rng to gradually update them all as we zoom`
`505`		`- // For perfomance, it's not desirable (or necessary) to update them all at once`
`506`		`- // So we do it randomly, forcing a repaint if the different is larger than 0.15`
`507`		`- auto const randval = rand() % 4;`
`508`		`- auto const bestScale = topLevel->getRenderScale() * getValue<float>(topLevel->zoomScale);`
`509`		`- auto const newScale = topLevel->isZooming && randval != 0 && std::abs(bestScale - lastImageScale) < 0.15f ? lastImageScale : bestScale;`
`510`		`- lastImageScale = newScale; // TODO: getters shouldn't have side-effects!`
`511`		`-`
`512`		`- return newScale;`
	`504`	`+ return object->editor->getRenderScale() * getValue<float>(topLevel->zoomScale);`
`513`	`505`	`}`
`514`	`506`
`515`	`507`	`ObjectParameters ObjectBase::getParameters()`