search

galacean / engine

A typescript interactive engine, support 2D, 3D, animation, physics, built on WebGL and glTF.
https://www.galacean.com/engine
MIT License
4.29k stars 307 forks source link

Open post process workflow #2401

Open zhuxudong opened 1 month ago

zhuxudong commented 1 month ago

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)

const customShader = Shader.create(
  "Custom Post Process",
  `
  attribute vec4 POSITION_UV;
varying vec2 v_uv;

void main() {   
    gl_Position = vec4(POSITION_UV.xy, 0.0, 1.0);   
    v_uv = POSITION_UV.zw;
}
  `,
  `
  varying vec2 v_uv;
  uniform sampler2D renderer_BlitTexture;

  void main(){
  gl_FragColor = texture2D(renderer_BlitTexture, v_uv).rrra;
  }
  `
);

class CustomPass extends PostProcessPass {
  private _blitMaterial: Material;

  set intensity(value) {
    this._blitMaterial.shaderData.setFloat("intensity", value);
  }

  constructor(postProcessManager: PostProcessManager) {
    super(postProcessManager);
    this.event = PostProcessPassEvent.AfterUber;
    this._blitMaterial = new Material(this.engine, customShader);

    const depthState = this._blitMaterial.renderState.depthState;

    depthState.enabled = false;
    depthState.writeEnabled = false;
  }

  onRender(_, srcTexture: Texture2D, dst: RenderTarget): void {
    const engine = this.engine;
    Blitter.blitTexture(engine, srcTexture, dst, undefined, undefined, this._blitMaterial, 0);
  }
}

  const globalPostProcessEntity = scene.createRootEntity();
  const postProcess = globalPostProcessEntity.addComponent(PostProcess);
  const bloomEffect = postProcess.addEffect(BloomEffect);
  const tonemappingEffect = postProcess.addEffect(TonemappingEffect);

  const customPass = new CustomPass(postProcessManager);
  postProcessManager.addPostProcessPass(customPass);

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:

Summary by CodeRabbit

Release Notes

codecov[bot] commented 1 month ago

Codecov Report

Attention: Patch coverage is 49.01610% with 570 lines in your changes missing coverage. Please review.

Project coverage is 66.71%. Comparing base (1b3c7fd) to head (19eeb18). Report is 50 commits behind head on dev/1.4.

Files with missing lines Patch % Lines
...ckages/core/src/postProcess/PostProcessUberPass.ts 32.95% 177 Missing :warning:
...ackages/core/src/postProcess/PostProcessManager.ts 47.58% 141 Missing :warning:
packages/core/src/postProcess/PostProcess.ts 57.35% 58 Missing :warning:
packages/core/src/RenderPipeline/Blitter.ts 37.03% 51 Missing :warning:
packages/core/src/postProcess/PostProcessEffect.ts 52.08% 46 Missing :warning:
e2e/case/postProcess-customPass.ts 0.00% 43 Missing and 1 partial :warning:
...ckages/core/src/postProcess/effects/BloomEffect.ts 72.46% 19 Missing :warning:
e2e/case/postProcess-HDR-bloom-ACES.ts 0.00% 7 Missing :warning:
e2e/case/postProcess-HDR-bloom-neutral.ts 0.00% 7 Missing :warning:
e2e/case/postProcess-LDR-bloom-neutral.ts 0.00% 7 Missing :warning:
... and 5 more
Additional details and impacted files ```diff @@ Coverage Diff @@ ## dev/1.4 #2401 +/- ## =========================================== + Coverage 66.54% 66.71% +0.17% =========================================== Files 893 903 +10 Lines 91737 93272 +1535 Branches 7253 7505 +252 =========================================== + Hits 61042 62228 +1186 - Misses 30450 30796 +346 - Partials 245 248 +3 ``` | [Flag](https://app.codecov.io/gh/galacean/engine/pull/2401/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=galacean) | Coverage Δ | | |---|---|---| | [unittests](https://app.codecov.io/gh/galacean/engine/pull/2401/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=galacean) | `66.71% <49.01%> (+0.17%)` | :arrow_up: | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=galacean#carryforward-flags-in-the-pull-request-comment) to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

🚨 Try these New Features:

coderabbitai[bot] commented 1 month ago

Walkthrough

The pull request introduces significant changes to the post-processing setup in a graphics engine, focusing on restructuring how bloom and tonemapping effects are applied. New classes for PostProcess, BloomEffect, and TonemappingEffect are created, along with a custom post-processing pass. The Camera class receives a new property for post-processing effects, while the PostProcessManager is renamed and refactored for enhanced management of effects. Additionally, several utility classes are introduced or modified to streamline texture blitting and rendering processes.

Changes

File Path Change Summary
e2e/case/postProcess-HDR-bloom-ACES.ts Expanded imports, restructured initialization of post-processing effects, added PostProcess, BloomEffect, and TonemappingEffect classes, updated method signature for initPostProcessEnv, and configured tonemapping mode.
e2e/case/postProcess-HDR-bloom-neutral.ts Similar changes as in the HDR-ACES file, with modifications to post-processing setup and explicit tonemapping mode setting.
e2e/case/postProcess-LDR-bloom-neutral.ts Expanded imports, created a new root entity for global post-processing, and instantiated effects through the PostProcess component.
e2e/case/postProcess-customPass.ts Introduced CustomPass class extending PostProcessPass, implemented custom shader rendering logic, and added initPostProcessEnv function.
e2e/config.ts Added a new configuration entry for customPass in the PostProcess section of E2E_CONFIG.
packages/core/src/Camera.ts Added postProcessMask property to the Camera class.
packages/core/src/Component.ts Changed _phasedActive property from private to public with @internal annotation.
packages/core/src/RenderPipeline/BasicRenderPipeline.ts Updated render method to modify post-processing handling and refined color target management.
packages/core/src/RenderPipeline/Blitter.ts Introduced Blitter class for texture blitting operations.
packages/core/src/RenderPipeline/OpaqueTexturePass.ts Replaced texture blitting method with Blitter.blitTexture.
packages/core/src/RenderPipeline/PipelineUtils.ts Removed several static properties and the blitTexture method, indicating a shift in texture management.
packages/core/src/RenderPipeline/index.ts Modified exports to include Blitter and reorder existing exports.
packages/core/src/Scene.ts Updated to use PostProcessManager instead of _PostProcessManager, added postProcessManager getter.
packages/core/src/postProcess/PostProcess.ts Introduced PostProcess class for managing visual effects, including methods to add, remove, and manage effects.
packages/core/src/postProcess/PostProcessEffect.ts Added PostProcessEffect class as a base for post-processing effects, including state management methods.
packages/core/src/postProcess/PostProcessManager.ts Renamed from _PostProcessManager, simplified constructor, and added methods for managing post-processes.
packages/core/src/postProcess/PostProcessPass.ts Defined an abstract class for post-process passes with an event enumeration.
packages/core/src/postProcess/PostProcessUberPass.ts Introduced PostProcessUberPass class for managing bloom and tonemapping effects.
packages/core/src/postProcess/effects/BloomEffect.ts Modified to extend PostProcessEffect, simplified properties and rendering logic.
packages/core/src/postProcess/effects/TonemappingEffect.ts Updated to extend PostProcessEffect, simplified property management.
packages/core/src/postProcess/index.ts Streamlined exports and removed specific shader-related imports.

Sequence Diagram(s)

sequenceDiagram
    participant Camera
    participant PostProcessManager
    participant PostProcess
    participant BloomEffect
    participant TonemappingEffect

    Camera->>PostProcessManager: initializePostProcess()
    PostProcessManager->>PostProcess: create()
    PostProcess->>BloomEffect: addEffect()
    PostProcess->>TonemappingEffect: addEffect()
    PostProcessManager->>Camera: applyEffects()

Possibly related PRs

Suggested labels

enhancement, post processing, shader, medium priority

Suggested reviewers

Poem

🐇 In the realm of code so bright,
Post-processing takes its flight.
Bloom and tone, effects so grand,
With each render, magic planned.
A hop, a skip, through shaders we go,
Enhancing scenes with a radiant glow! ✨

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
🪧 Tips ### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , 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.` 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 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](https://docs.coderabbit.ai/guides/configure-coderabbit) 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](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.