Skip to content

nanovg Compositor + context.filter blur #1489

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 28 commits into from
Apr 7, 2025
Merged

nanovg Compositor + context.filter blur #1489

merged 28 commits into from
Apr 7, 2025

Conversation

Pheo
Copy link

@Pheo Pheo commented Mar 26, 2025 •
edited
Loading

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.:
image

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:
image

Also, on Babylon.js side, have raised a PR adding filter to context.
BabylonJS/Babylon.js#16424

CedricGuillemet and others added 15 commits March 7, 2025 16:38
@CedricGuillemet
nanovg Compositor
7304a31
@CedricGuillemet
method visibility
05ddd44
@CedricGuillemet
a bit of clean up
09aa481
@CedricGuillemet
remove 2nd encoder
2aacc5e
@CedricGuillemet
Merge branch 'CanvasTest' of https://github.com/BabylonJS/BabylonNative…
6a4f4f3 
… into BNCanvasComposite

# Conflicts:
#	Apps/Playground/Scripts/experience.js
#	Polyfills/Canvas/Source/Context.cpp
#	Polyfills/Canvas/Source/nanovg/nanovg_babylon.cpp
@CedricGuillemet
Merge branch 'master' of https://github.com/BabylonJS/BabylonNative i…
704650a 
…nto BNCanvasComposite
@CedricGuillemet
filter stack PoC
d1223cb
@Pheo
parse filter string with regex, wire up glnvg__stroke
36fc856
@Pheo
add basic framebuffer management
da979cd
@Pheo
Multi-pass rendering
d63e3bb
@Pheo
Move bind/unbind into Context.cpp acquire/release
b66f2f9
@Pheo
WIP - filterstack uniform handling, separated gaussian blur
d21d7da
@Pheo
fixed - working filterstack uniform+program handling
93e1af1
@Pheo
wire up radius/strength to blur filter, support alpha blur
b64e17a
@Pheo
clean up comments
19b6d52
@Pheo Pheo changed the base branch from master to CanvasTest March 26, 2025 14:36
@Pheo Pheo mentioned this pull request Mar 26, 2025
Closed
@CedricGuillemet CedricGuillemet mentioned this pull request Mar 26, 2025
Closed
@Pheo Pheo force-pushed the BNCanvasCompositeBlur branch from 1b849cf to 13a3b8e Compare March 31, 2025 02:39
@Pheo Pheo marked this pull request as ready for review March 31, 2025 06:56
Pheo
Pheo commented Mar 31, 2025
View reviewed changes
@Pheo Pheo mentioned this pull request Mar 31, 2025
Merged
Pheo
Pheo commented Mar 31, 2025
View reviewed changes
Pheo
Pheo commented Mar 31, 2025
View reviewed changes
Polyfills/Canvas/Source/Shaders/fs_gaussblur.sc Outdated

for (int i = 1; i <= 6; i++)
{
vec2 offset = u_direction.xy * float(i); // TODO: normalize against u_viewSize.xy
Copy link
Author

@Pheo Pheo Mar 31, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like I'm not setting u_viewSize between filter passes. Or any uniforms for that matter (outside of the ones explicitly specified in setUniform. Will fix.

EDIT: After abit more reading, I think I understand how to scale blur strength taking into account viewSize. WIP updated fragment shader.

CedricGuillemet
CedricGuillemet reviewed Mar 31, 2025
View reviewed changes
CedricGuillemet
CedricGuillemet reviewed Mar 31, 2025
View reviewed changes
CedricGuillemet
CedricGuillemet reviewed Mar 31, 2025
View reviewed changes
CedricGuillemet
CedricGuillemet reviewed Mar 31, 2025
View reviewed changes
CedricGuillemet
CedricGuillemet reviewed Mar 31, 2025
View reviewed changes
RaananW pushed a commit to BabylonJS/Babylon.js that referenced this pull request Apr 1, 2025
@Pheo
Native: Canvas context.filter (#16424)
c446e32 
Adds `filter`
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter
This calls to BabylonNative as implemented in
BabylonJS/BabylonNative#1489
@Pheo Pheo force-pushed the BNCanvasCompositeBlur branch from e5cd68d to 7ff2c0c Compare April 1, 2025 13:59
@Pheo
Copy link
Author

Pheo commented Apr 2, 2025 •
edited
Loading

Have just pushed a couple of fixes. Notable changes/fixes include:

  • Always clear released framebuffers
  • Bind canvas framebuffer before applying filter stack
  • Fixed up blur shader to account for u_viewSize + u_halfTexel
  • Wired up remaining glnv__* methods to draw with filterstack

@Pheo Pheo force-pushed the BNCanvasCompositeBlur branch from 2d2dbd4 to 287ff01 Compare April 3, 2025 05:57
@Pheo Pheo changed the title nanovg Compositor nanovg Compositor + context.filter blur Apr 3, 2025
@Pheo
Copy link
Author

Pheo commented Apr 3, 2025 •
edited
Loading

I've just noticed that Gradient Text is broken in this branch. Have narrowed it down to sometime before the "filter stack PoC" commit.
CanvasTest...Pheo:BabylonNative:d1223cb72c1fd91bbb5c40ef9f6c9936cf7ac22d

EDIT: Oh, it was just missing the 2nd texture in glnvg__triangles. Fixed!
image
EDIT2: Need to pre-multiply alpha to get rid of the dark edges

@Pheo Pheo requested a review from CedricGuillemet April 3, 2025 10:55
@Pheo Pheo force-pushed the BNCanvasCompositeBlur branch 2 times, most recently from 62c668f to d514391 Compare April 4, 2025 07:15
@Pheo
Copy link
Author

Pheo commented Apr 7, 2025

Have pulled in CanvasTest. And also added the texture management cleanup? from #1491 for FrameBufferPool textures

@CedricGuillemet CedricGuillemet merged commit f222e21 into BabylonJS:CanvasTest Apr 7, 2025
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@CedricGuillemet CedricGuillemet Awaiting requested review from CedricGuillemet

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@Pheo @CedricGuillemet