fix: gradient issue with non 0,0 shapes in graphics #11383
Conversation
- Updated `generateTextureMatrix` to improve translation calculations for texture mapping. - Introduced a new test scene for rendering various gradient fills with different configurations. - Added snapshot tests for gradient rendering across multiple WebGL contexts.
There was a problem hiding this comment.
Pull Request Overview
This PR fixes a gradient translation issue in graphics and enhances gradient testing across various WebGL contexts.
- Fixed translation calculations in generateTextureMatrix when shape coordinates are non-zero.
- Introduced a new test scene for gradient rendering.
- Updated snapshot tests for gradient effects across multiple WebGL contexts.
Reviewed Changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| tests/visual/scenes/graphics/graphics-gradients.scene.ts | Adds a detailed scene to test different gradient configurations. |
| src/scene/graphics/shared/utils/generateTextureFillMatrix.ts | Refines translation calculations and conditionally updates texture addressing. |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit b90c460:
|
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
Nice. Here's an updated version: I think the math is wrong on the vertical layout. It should be black to transparency, but you can see it's clipped. Trying some different aspect ratio for the rect changes how the gradient fill appears. Here's another example with a different aspect ratio: |
|
thanks @bigtimebuddy - will take another look! |
… scaling - Added a small offset to prevent UVs from flowing over the edge in `FillGradient`. - Enhanced texture matrix generation by refining translation and scaling calculations in `generateTextureMatrix`. - Adjusted handling of texture bounds to ensure proper scaling based on shape dimensions.
|
Looking better. Still some issues with, the top-right example. Also, still seeing the hairline I'm also seeing some bleeding with a lower textureSize |
- Adjusted the scaling calculation in `generateTextureMatrix` to use a smaller offset, improving UV handling. - Removed unnecessary translation adjustments to streamline the transformation process.
- Introduced a `wrapMode` property to `FillGradient` for controlling texture wrapping behavior, with options for 'clamp-to-edge' and 'repeat'. - Updated default gradient options to include `wrapMode`. - Modified texture generation logic to respect the specified wrap mode. - Adjusted tests to utilize the new `wrapMode` feature for gradient fills.
|
heya @bigtimebuddy - should be all good now! |
There was a problem hiding this comment.
Amazing work @GoodBoyDigital. Thank you for sorting all these details.
Description of change
generateTextureMatrixto give correct translation calculations for texture mapping when a shape is drawn with a grapchis object that s not at 0,0.fixes #11379
Pre-Merge Checklist
npm run lint)npm run test)