Skip to content

Interpolate Canvas gradient stops in straight RGBA - #1889

Open
bkaradzic-microsoft wants to merge 1 commit into
BabylonJS:masterfrom
bkaradzic-microsoft:pr/canvas-gradient-interpolation
Open

bkaradzic-microsoft wants to merge 1 commit into
BabylonJS:masterfrom
bkaradzic-microsoft:pr/canvas-gradient-interpolation

Conversation

@bkaradzic-microsoft

@bkaradzic-microsoft bkaradzic-microsoft commented Sep 17, 2026 •

Copy link
Copy Markdown
Member

Draft: the stock Babylon.js upload-alpha dependency still blocks landing.

Interpolate Canvas gradient RGB and alpha independently, with exact CPU controls and linear/radial GPU controls over an opaque backdrop. Rebased onto 3428526f after #1913 merged, preserving its newer Canvas identity, lifetime, callback, and blur regressions.

Windows V8/D3D11 with stock Babylon.js 9.29.0: all 11 selected native Canvas/gradient cases pass. The unchanged GUI Gradient Linear with transparency scene still fails: 81,174 / 240,000 pixels (33.8225%), above its 2.5% allowance.

Stock updateDynamicTexture does not forward the requested alpha representation to getCanvasTexture. The standalone interpolation correction therefore remains dependent on the paired JavaScript upload change. No references, tolerances, exclusions, dependencies, or CI scripts are changed by this PR.

Copilot AI lite review requested due to automatic review settings September 17, 2026 20:38

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Warning

Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a copilot-code-review.yml file specifying one with the runs-on attribute. See the docs for more details.

Pull request overview

Updates Canvas gradient interpolation to blend RGB and alpha channels independently in straight RGBA space, while retaining NanoVG premultiplication during compositing.

Changes:

  • Replaces premultiplied/unpremultiplied interpolation in linear and radial gradients with straight RGBA interpolation.
  • Adds CPU regression coverage for translucent, opaque, fully transparent, and coincident stops.
  • Adds GPU readback coverage for linear and radial translucent gradients over an opaque backdrop.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File Description
Polyfills/Canvas/Source/Gradient.cpp Implements straight RGBA interpolation for gradient ramps and color sampling.
Apps/UnitTests/Source/Tests.Canvas.Readback.cpp Adds CPU and GPU regression tests for gradient interpolation behavior.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

@bkaradzic-microsoft
bkaradzic-microsoft marked this pull request as draft September 17, 2026 21:42
@bkaradzic-microsoft
bkaradzic-microsoft force-pushed the pr/canvas-gradient-interpolation branch 2 times, most recently from 8b6e8f4 to 49ba5b1 Compare September 22, 2026 20:05
bkaradzic-microsoft added a commit to bkaradzic-microsoft/BabylonNative that referenced this pull request Sep 30, 2026
Review-Group: E7/H4
Source: PR BabylonJS#1889
Squashed final review changes, including regressions and review follow-ups.
Status: held for runtime type tags / Canvas upload-alpha coordination.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 60c2ec68-6de1-445d-9fc9-b699db737eae
@bkaradzic-microsoft
bkaradzic-microsoft force-pushed the pr/canvas-gradient-interpolation branch 3 times, most recently from a0f9880 to 4fe3249 Compare October 7, 2026 05:04
Interpolate RGB and alpha independently in linear and radial gradient
baking. NanoVG performs premultiplication when compositing the ramp.

Cover exact ramp bytes, radial interpolation, transparent and opaque
stops, coincident-stop behavior, and GPU compositing over an opaque
backdrop without relying on JavaScript upload-alpha changes.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 60c2ec68-6de1-445d-9fc9-b699db737eae
@bkaradzic-microsoft
bkaradzic-microsoft force-pushed the pr/canvas-gradient-interpolation branch from 4fe3249 to f02a443 Compare October 8, 2026 02:23
@bkaradzic-microsoft
bkaradzic-microsoft marked this pull request as ready for review October 8, 2026 02:23
bkaradzic-microsoft added a commit that referenced this pull request Oct 13, 2026
Brings Babylon Native rendering closer to Babylon.js/WebGL2 parity. The
guiding rule: anything that works in browser WebGL2 (ANGLE) is fixed in
Babylon Native C++, not worked around in Babylon.js. Each commit is
self-contained and is meant to be reviewed commit by commit.

## Commits

1. **Use SPIRV-Cross with the HLSL varying fixes from
BabylonJS/SPIRV-Cross**: pins the merged BabylonJS/SPIRV-Cross `main`
(`2b078efc`), which includes BabylonJS/SPIRV-Cross#15, #16 and #17.
2. **Expand line loops and triangle fans into indexed lists**: bgfx has
neither topology. Expands them with draw ranges, primitive restart and
dynamic index updates, and advertises `supportsPrimitiveModeExpansion`.
Babylon.js 9.29 doesn't use it yet, so this changes nothing for current
releases.
3. **Keep texture bindings across clears like WebGL**: replays bound
material textures after `FrameBuffer::Clear`.
4. **Restore additive rendering commands and integration regressions**:
keeps protocol 9 and adds `CLEAR2`, `SETSTENCIL2` and a float-preserving
`readTexture2`.
5. **Handle native rendering compatibility without shared shader
workarounds**: GLSL preprocessing, aliasing of intrinsic and predefined
uniforms, integer conversions, ordering of repeated raw uploads, and
plain-Array matrices plus default ranges in the native vertex
transforms.
6. **Reset the back buffer's depth and stencil each frame**: matches
WebGL's per-frame drawing-buffer reset. `PerFrameValue` now shares
ownership of the engine's cancellation source, so a reset task scheduled
by a disposed engine can't touch a freed source (this crashed on
QuickJS).
7. **Render cube faces in GL row order like ANGLE**: mirrors rendering
into cube-face render targets on top-left-origin backends.
8. **Widen RGB uploads and generate mips for raw texture updates**: RGB
float, half-float and 16-bit normalized uploads, sub-buffer reads, and
`generateMipmap` for raw textures.
9. **Add internal compute shader support**: native-only plumbing with no
JavaScript surface. Compute shaders use bgfx shader binary v13, like
graphics shaders since #1930. The OpenGL shader compiler names
interface-block instances after their block, so ES 3.00 stages link when
instance names differ.
10. **Emulate WebGL2 transform feedback with compute**:
GPUParticleSystem runs unchanged on the WebGL2 path. Buffers the compute
shaders write are filled from the CPU through a staging buffer and a GPU
copy, because bgfx doesn't allow CPU updates of them.
11. **Regenerate the UnitTests JavaScript bundle**: so CI runs the new
JavaScript tests.

The commit messages have the details.

## Not included

Everything here passes with the Babylon.js 9.29 npm release that CI
uses. Changes that need unreleased Babylon.js are kept on
[`shotgun-landing-support`](https://github.com/bkaradzic-microsoft/BabylonNative/tree/shotgun-landing-support):

- Canvas gradient interpolation in straight RGBA (#1889). It needs
Babylon.js to forward the alpha mode in `updateDynamicTexture`; without
that, `GUI Gradient Linear with transparency` fails.
- WebGL's global viewport. Babylon.js 9.29's `bindFramebuffer(...,
forceFullscreenViewport)` relies on each framebuffer starting with a
full viewport; without that, `Depth of field` fails.
- Tests that need Babylon.js changes not yet released: primitive-mode
expansion, Canvas alpha representations, float `readTexture2`, engine
creation options and volume textures.

Multisampled depth resolve for ordinary samplers is no longer part of
this branch. bgfx now does it, and master reports the sampler metadata
it needs (#1930).

## Known limitations

- `Apps/PrecompiledShaderTest` is unchanged. Its particle effect needs
transform-feedback support from a Babylon.js release that hasn't shipped
yet.
- Builds without a shader compiler don't cache the
`readTransformFeedbackBuffer` readback kernel.

## Testing (Windows, D3D11, Release, Babylon.js 9.29)

Rebased onto master `3f82b7e4` (includes #1930).

- `Playground app:///Scripts/validation_native.js`: 371 ran, 371 passed.
- UnitTests: 169 passed, 0 failed.
- The Compute commit builds and passes unit tests on its own.
- Full Babylon.js visualization sweep on `shotgun-landing-support` (720
tests, using the Babylon.js changes that drop the matching native
workarounds): 705 pass.

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 60c2ec68-6de1-445d-9fc9-b699db737eae
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants