Canvas plugin #1468

CedricGuillemet · 2025-02-25T08:55:34Z

Canvas plugin with more support for Web Canvas API
Test PG
Small change in Compiler Traverser to support bgfx bundled spirv (instead of our spirv fork) when building bgfx shader tool

Adds implementation for canvas `transform` function https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform

Add `fontBoundingBoxAscent` and `fontBoundingBoxDescent` to textMetrics

- Adds bindings for setting and getting `letterSpacing` https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/letterSpacing - Adds implementation for setter and getter

…nto CanvasTest

Co-authored-by: Ryan Tremblay <[email protected]>

…bylonNative into CanvasTest

- `lineCap` https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap - `lineJoin` https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin - `miterLimit` https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/miterLimit --------- Co-authored-by: Cedric Guillemet <[email protected]>

Gradient / color stop glue code and small example. ![image](https://github.com/user-attachments/assets/e8f54174-3887-40e9-a4a8-48a6f41a1b92)

… into CanvasTest # Conflicts: # Polyfills/Canvas/Source/Context.cpp

- https://developer.mozilla.org/en-US/docs/Web/API/Path2D Adds nanosvg.h for SVG path parsing. Known missing functionality: 1. `addPath` doesn't accept DOMMatrix transform 2. `roundRect` doesn't accept CSS-style radii array 3. `ellipse` doesn't handle clockwise Called from BabylonJS/Babylon.js#16221

…nto CanvasTest

- https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getTransform - https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform - https://developer.mozilla.org/en-US/docs/Web/API/Path2D/addPath#transform usage: ``` // Path 2D let path = new _native.Path2D(); let path2 = new _native.Path2D("M 10,30 A 20, 20 0, 0, 1 50, 30 A 20, 20 0, 0, 1 90, 30 Q 90, 60 50, 90 Q 10, 60 10, 30 z"); path.addPath(path2, { a: 1, b: 0, c: 0, d: 1, e: 400, f: 0 }); // shift right 400 context.stroke(path); ```

…nto CanvasTest

… into CanvasTest

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect Known Issues: - clipping round rect does not have rounded corners Co-authored-by: Cedric Guillemet <[email protected]>

Small PR just so later PRs that require modifying nanovg have proper diffs

- allow NVGPaint to have 2 images (onlye used when text is mixed with gradient) - shader update ![image](https://github.com/user-attachments/assets/c0652079-5d45-49c8-acc6-1432c7928c46)

I'll need someone to generate the HSSL shader for me since I'm on Mac. Currently doesn't support blurred text but can add that in a future PR. --------- Co-authored-by: Cedric Guillemet <[email protected]>

- Adds example Path2D usage in experience.js. - Makes Path2D work with .fill as well ![image](https://github.com/user-attachments/assets/18aef1c2-ea8e-48c6-b175-1c1e31e2c0d3) --------- Co-authored-by: Cedric Guillemet <[email protected]>

Fixes: - Depth stencil missing. Not optional in nanovg - Unnecessary texture creation. This was caused by a bad merge resolution ([link](50697ff)) - Missing `m_available` increment when framebuffer released caused infinite framebuffer creation The various warnings about missing stencil bugger and failed to allocate framebuffer are now gone.

MDN: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect Implements CSS-style radius array argument ![image](https://github.com/user-attachments/assets/48ae0d13-fc96-4681-999a-3280f56268e5)

MDN: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/direction MDN: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getTransform - Context direction is incomplete. Further investigation is needed on a solution to deal with ligatures (eg. stb_freetype + harfbuzz?) - Context getTransform() now returns missing DOMMatrix properties

…nto CanvasTest # Conflicts: # Polyfills/Canvas/Source/Canvas.cpp # Polyfills/Canvas/Source/Canvas.h # Polyfills/Canvas/Source/Context.cpp # Polyfills/Canvas/Source/Context.h

W3: https://www.w3.org/TR/SVG11/filters.html#feGaussianBlurElement - 13-tap gaussian blur for s < 2 - 3-pass box blur for s >= 2 Notes: - gaussian weights no longer hardcoded. we can optimize by caching weights. - box blur handles even vs odd kernel as per W3. sanity limit of 1000px. - edge sampling set to mirror. this avoids artifacts when blurring close to edge. Testing with even-case box blur d=8: `ctx.filter='blur(4px)'` ![image](https://github.com/user-attachments/assets/9b885a9e-c1d3-41c5-b14d-c77bdd2ecc63)

MDN: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect Adds support for single DOMPoint argument in roundRect (Context, Path2D) Looks like `nvgRoundedRectVarying` already implemented seperate x/y radius, so just needed to add extra args ![image](https://github.com/user-attachments/assets/97ba3152-4d2d-4979-91cd-224200b28492)

@ryantrem

@ryantrem found that when we load in a replacement font buffer.. the old buffer passed to nvgCreateFontMem is freed and can get corrupted To solve this, we've made LoadTTFAsync effectively synchronous and don't allow loading in a duplicate font. We can consider future work to support safely updating existing fonts

small followup to #1516

…nto CanvasTest # Conflicts: # .github/jobs/test_install_win32.yml # Apps/UnitTests/Scripts/tests.js # Plugins/NativeEngine/CMakeLists.txt

CedricGuillemet · 2025-10-15T08:09:43Z

Comparison PG : https://playground.babylonjs.com/#TKVFSA

ryantrem

I think a lot of this has already been reviewed in the side branch, so mostly just commenting on some high level things related to bringing the code into master.

.github/jobs/test_install_win32.yml

ryantrem · 2025-10-15T16:07:00Z

Polyfills/Canvas/Source/nanovg/nanovg.h

Can we add a readme.md explaining where this OSS code came from and whether we have modified it?

And also how nanovg_babylon.* relates to the other files?

ryantrem · 2025-10-15T16:16:35Z

Polyfills/Canvas/Source/Context.cpp

+#include "Gradient.h"

 /*
 Most of these context methods are preliminary work. They are currenbly not tested properly.


Do we still want this comment? Also there is a typo in it anyway (currenbly).

Nope, it's better to add a readme and document the plugin as experimental IMHO.

Polyfills/Canvas/Source/Font.h

ryantrem · 2025-10-15T16:27:38Z

Polyfills/Canvas/Source/nanosvg.h

Maybe a readme.md explaining where this came from and if it has any Babylon modifications also?

bghgary · 2025-10-15T15:04:20Z

Plugins/NativeEngine/CMakeLists.txt

-    PRIVATE GraphicsDeviceContext
-    PRIVATE JsRuntime
-    PRIVATE SPIRV)
+if(BGFX_BUILD_TOOLS)


Can you explain this more? What's this for?

bgfx shaderc tool needed to be compiled to apply changes in nanovg shaders. But, BN and bgfx need different versions spirv/glslang with different dependencies.

Sorry, I still don't understand. What does bgfx's shaderc tool have to do with NativeEngine?

Polyfills/Canvas/Source/nanovg/nanovg_babylon.cpp

.github/jobs/test_install_win32.yml

bghgary · 2025-10-16T21:35:52Z

Polyfills/Canvas/Source/Font.h

        static constexpr int NORMAL_WEIGHT = 400;
        static constexpr int BOLD_WEIGHT = 700;


Suggested change

static constexpr int NORMAL_WEIGHT = 400;

static constexpr int BOLD_WEIGHT = 700;

static constexpr const int NORMAL_WEIGHT = 400;

static constexpr const int BOLD_WEIGHT = 700;

bghgary · 2025-10-16T21:35:56Z

Polyfills/Canvas/Source/Font.h

+        FontStyle style{FontStyle::Normal};
+        int weight{NORMAL_WEIGHT};
+        float size{10};
+        std::string family{"sans-serif"};


These variables should have m_ prefix.

Even public? I commented on them being public, so if we switch and have get functions, then it seems like they should be m_

I think this PR made all of these variables private?

bghgary · 2025-10-17T00:03:12Z

Polyfills/Canvas/Source/Font.h

+        float GetSize() const { return size; }
+        const std::string& GetFamiliy() const { return family; }


nit: Spelling, though I would recommend we do it like this.

Suggested change

float GetSize() const { return size; }

const std::string& GetFamiliy() const { return family; }

float Size() const { return size; }

const std::string& Family() const { return family; }

CedricGuillemet and others added 30 commits February 6, 2025 11:24

Canvas Context angle/fontsize fixes

0418e9f

Text/shape/state test script

bbdcce3

readme update

e0f88f3

Merge branch 'master' into CanvasTest

57ec8d7

Canvas transform implementation (#1460)

a9737fc

Adds implementation for canvas `transform` function https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform

plumb lineCap, lineJoin, miterLimit to nanovg

dadeca3

Add textMetrics implementation (#1461)

975e0dd

Add `fontBoundingBoxAscent` and `fontBoundingBoxDescent` to textMetrics

Add letterSpacing polyfill and implementation (#1462)

7bbca53

- Adds bindings for setting and getting `letterSpacing` https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/letterSpacing - Adds implementation for setter and getter

Merge branch 'master' of https://github.com/BabylonJS/BabylonNative i…

ef0b545

…nto CanvasTest

Canvas test update (#1463)

b733ab3

Co-authored-by: Ryan Tremblay <[email protected]>

map strings to lineCaps

bbe83fa

Merge branch 'CanvasLineImplementation' of https://github.com/Pheo/Ba…

c9be817

…bylonNative into CanvasTest

Gradient color stop (#1467)

aab744e

Gradient / color stop glue code and small example. ![image](https://github.com/user-attachments/assets/e8f54174-3887-40e9-a4a8-48a6f41a1b92)

Merge branch 'CanvasTest' of https://github.com/BabylonJS/BabylonNative…

d599479

… into CanvasTest # Conflicts: # Polyfills/Canvas/Source/Context.cpp

fix merge conflicts

4d03c02

JSI build

e404270

Merge branch 'master' of https://github.com/BabylonJS/BabylonNative i…

146210b

…nto CanvasTest

Merge branch 'master' of https://github.com/BabylonJS/BabylonNative i…

4c60d74

…nto CanvasTest

Merge branch 'CanvasTest' of https://github.com/BabylonJS/BabylonNative…

a4a0082

… into CanvasTest

Implement round rect (#1471)

de71606

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect Known Issues: - clipping round rect does not have rounded corners Co-authored-by: Cedric Guillemet <[email protected]>

Copy nanovg into Canvas sources (#1480)

7cb49ba

Small PR just so later PRs that require modifying nanovg have proper diffs

fixed MSVC build

e154eb9

Use bgfx more recent glslang/spirv for NativeEngine (#1478)

c914be2

fix mac build

2c1dcfe

Canvas gradient text (#1475)

f7a563d

- allow NVGPaint to have 2 images (onlye used when text is mixed with gradient) - shader update ![image](https://github.com/user-attachments/assets/c0652079-5d45-49c8-acc6-1432c7928c46)

Add strokeText support to canvas via SDFs (#1482)

58d3b2f

I'll need someone to generate the HSSL shader for me since I'm on Mac. Currently doesn't support blurred text but can add that in a future PR. --------- Co-authored-by: Cedric Guillemet <[email protected]>

canvas fill Path2D (#1483)

6bf07b3

- Adds example Path2D usage in experience.js. - Makes Path2D work with .fill as well ![image](https://github.com/user-attachments/assets/18aef1c2-ea8e-48c6-b175-1c1e31e2c0d3) --------- Co-authored-by: Cedric Guillemet <[email protected]>

Pheo and others added 6 commits April 8, 2025 13:24

Canvas Path2D roundRect (#1501)

5abadc2

MDN: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect Implements CSS-style radius array argument ![image](https://github.com/user-attachments/assets/48ae0d13-fc96-4681-999a-3280f56268e5)

Merge copy texture fix (#1505)

425bc34

Merge branch 'master' of https://github.com/BabylonJS/BabylonNative i…

dfb5a89

…nto CanvasTest # Conflicts: # Polyfills/Canvas/Source/Canvas.cpp # Polyfills/Canvas/Source/Canvas.h # Polyfills/Canvas/Source/Context.cpp # Polyfills/Canvas/Source/Context.h

missed bool NativeCanvas::UpdateRenderTarget()

d0eb88c

CedricGuillemet mentioned this pull request Apr 23, 2025

Fix texture copy when using multiple canvas #1481

Closed

Pheo and others added 6 commits April 28, 2025 09:02

Canvas synchronous LoadTTF (#1517)

068409d

small followup to #1516

Merge branch 'master' of https://github.com/BabylonJS/BabylonNative i…

981edd2

…nto CanvasTest # Conflicts: # .github/jobs/test_install_win32.yml # Apps/UnitTests/Scripts/tests.js # Plugins/NativeEngine/CMakeLists.txt

conflict

b20ce99

CedricGuillemet added 5 commits October 15, 2025 10:10

missing endif

1e55020

no member named 'floor' in namespace 'std'

7f39041

Canvas test

9e6c04a

empty line

8f0707e

disable canvas test on d3d12

45d6024

CedricGuillemet changed the title ~~Canvas test~~ Canvas plugin Oct 15, 2025

CedricGuillemet requested review from SergioRZMasson, bghgary, docEdub and ryantrem October 15, 2025 14:20

CedricGuillemet marked this pull request as ready for review October 15, 2025 14:28

ryantrem reviewed Oct 15, 2025

View reviewed changes

bghgary reviewed Oct 15, 2025

View reviewed changes

PR feedback

2b19c16

bghgary reviewed Oct 16, 2025

View reviewed changes

bghgary reviewed Oct 17, 2025

View reviewed changes

		static constexpr int NORMAL_WEIGHT = 400;
		static constexpr int BOLD_WEIGHT = 700;

		float GetSize() const { return size; }
		const std::string& GetFamiliy() const { return family; }

Canvas plugin #1468

Are you sure you want to change the base?

Canvas plugin #1468

Uh oh!

Conversation

CedricGuillemet commented Feb 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

CedricGuillemet commented Oct 15, 2025

Uh oh!

ryantrem left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

CedricGuillemet commented Feb 25, 2025 •

edited

Loading