nanovg Compositor #1477
Closed
nanovg Compositor #1477
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
Co-authored-by: Ryan Tremblay <ryan.tremblay@microsoft.com>
- `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 <1312968+CedricGuillemet@users.noreply.github.com>
Gradient / color stop glue code and small example. 
… 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
…onJS#1473) - 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); ```
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 <1312968+CedricGuillemet@users.noreply.github.com>
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 
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 <1312968+CedricGuillemet@users.noreply.github.com>
… into BNCanvasComposite # Conflicts: # Apps/Playground/Scripts/experience.js # Polyfills/Canvas/Source/Context.cpp # Polyfills/Canvas/Source/nanovg/nanovg_babylon.cpp
…nto BNCanvasComposite
|
Closing in favor of #1489 |
CedricGuillemet
added a commit
that referenced
this pull request
Apr 7, 2025
- Adds basic framebuffer manager `FrameBufferPool`, enabling multi-pass composition in `nanovg_filterstack` - Wires up `context.filter` https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter - Incomplete implementation of `blur()` https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur This PR takes over @CedricGuillemet's #1477 Comments from CedricGuillemet#9 addressed before opening this for review. Added comments for the ones which I haven't addressed. RenderDoc shows filterstack correctly swapping between render targets for a 3-iterations (6 pass) blur.:  Will need to do abit of digging on weights to match how it looks on browser. Applying filter blur to couple of items in experience.js:  Also, on Babylon.js side, have raised a PR adding `filter` to context. BabylonJS/Babylon.js#16424 --------- Co-authored-by: Cedric Guillemet <1312968+CedricGuillemet@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hack to get a compositor prototype.
Core concept is to insert drawcalls (submit calls with bgfx) for some states. Like when drawing text with shadow: render text in a render target, blur it, then add a fullscreen pass into the canvas and finally draw the text.
A transient rendertarget is created in
canvas.cpp. It looks like a pre allocated pool of 2-3 render target is enough for blur/shadow effect blur.Blending will depend on type of compisiting in
nanovg_babylon.cpp.