Fix transparency canvas bug #2645

GuoLei1990 · 2025-04-29T03:16:43Z

Please check if the PR fulfills these requirements

The commit message follows our guidelines
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)

What is the current behavior? (You can also link to an open issue here)

What is the new behavior (if this is a feature change)?

Does this PR introduce a breaking change? (What changes might users need to make in their application due to this PR?)

Other information:

Fix FXAA with transparency
Fix Background color with transparency
Fix sRGB Convert with transparency

coderabbitai · 2025-04-29T03:16:49Z

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (2)

packages/core/src/postProcess/shaders/FXAA/FXAA3_11.glsl is excluded by !**/*.glsl
packages/core/src/postProcess/shaders/FinalSRGB.fs.glsl is excluded by !**/*.glsl

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The changes refactor how background color is handled and cleared in the rendering pipeline. The Background class removes an instance property for storing a linear version of the solid color and introduces a static internal property instead. In the rendering pipeline, the clear color logic now always converts the solid color to linear space, premultiplies its RGB values by alpha, and uses this premultiplied color for clearing. A trailing blank line was removed from a type alias declaration with no functional impact.

Changes

File(s)	Change Summary
packages/core/src/Background.ts	Removed private instance property `_linearSolidColor` and its initialization and update logic; added static internal property `_premultiplySolidColor`; updated constructor accordingly.
packages/core/src/RenderPipeline/BasicRenderPipeline.ts	Updated clear color logic to always convert background solid color to linear space, premultiply RGB by alpha, and use this color for clearing the render target.
packages/core/src/ComponentsDependencies.ts	Removed a trailing blank line after the `ComponentConstructor` type alias; no functional or logical changes.

Sequence Diagram(s)

sequenceDiagram
    participant App
    participant Background
    participant RenderPipeline

    App->>Background: Set solidColor
    App->>RenderPipeline: Trigger render
    RenderPipeline->>Background: Get solidColor
    RenderPipeline->>RenderPipeline: Convert color to linear space
    RenderPipeline->>RenderPipeline: Premultiply RGB by alpha
    RenderPipeline->>RenderPipeline: Clear render target with premultiplied linear color

Poem

A background once kept a color in line,
Now static and premultiplied, looking fine!
The pipeline clears with careful hue,
Linear, sRGB—each step is true.
Bugs hop away, the colors stay—
Rendered right, the rabbit’s way!
🐇🎨

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

codecov · 2025-04-29T03:18:48Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 68.73%. Comparing base (eca741e) to head (0694269).
Report is 1 commits behind head on dev/1.5.

Additional details and impacted files

@@           Coverage Diff            @@
##           dev/1.5    #2645   +/-   ##
========================================
  Coverage    68.72%   68.73%           
========================================
  Files          970      970           
  Lines       101982   101979    -3     
  Branches      8785     8779    -6     
========================================
  Hits         70092    70092           
+ Misses       31625    31622    -3     
  Partials       265      265

Flag	Coverage Δ
unittests	`68.73% <100.00%> (+<0.01%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

refactor: opt code

4cbc06d

GuoLei1990 requested a review from zhuxudong April 29, 2025 03:16

GuoLei1990 added the bug Something isn't working label Apr 29, 2025

GuoLei1990 added this to the 1.5 milestone Apr 29, 2025

GuoLei1990 added rendering Rendering related functions engineering Engineering problems and removed engineering Engineering problems labels Apr 29, 2025

GuoLei1990 self-assigned this Apr 29, 2025

GuoLei1990 changed the title ~~Fix Background color not premultiply alpha bug~~ Fix background color not premultiply alpha bug Apr 29, 2025

GuoLei1990 added 8 commits May 8, 2025 21:16

refactor: opt code

aa52dfc

refactor: opt code

23b19cf

refactor: opt code

a0e6e06

refactor: opt code

ea077a5

refactor: opt code

adf6af3

refactor: opt code

967e8b6

refactor: opt code

7d37efa

Update FinalSRGB.fs.glsl

0694269

hhhhkrx approved these changes May 9, 2025

View reviewed changes

zhuxudong approved these changes May 9, 2025

View reviewed changes

GuoLei1990 changed the title ~~Fix background color not premultiply alpha bug~~ Fix transparency canvas bug May 9, 2025

GuoLei1990 merged commit 73a13a4 into galacean:dev/1.5 May 9, 2025
9 checks passed

coderabbitai bot mentioned this pull request May 12, 2025

Refactor all color properties to linear space #2656

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Fix transparency canvas bug #2645

Fix transparency canvas bug #2645

Uh oh!

Uh oh!

Review skipped

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Fix transparency canvas bug #2645

Fix transparency canvas bug #2645

Uh oh!

Conversation

Uh oh!

Please check if the PR fulfills these requirements

What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)

What is the current behavior? (You can also link to an open issue here)

What is the new behavior (if this is a feature change)?

Does this PR introduce a breaking change? (What changes might users need to make in their application due to this PR?)

Other information:

Uh oh!

Uh oh!

Review skipped

Walkthrough

Changes

Sequence Diagram(s)

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

CodeRabbit Configuration File (`.coderabbit.yaml`)