Skip to content

Examples: Refactor blending examples. #23246

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 3 commits into from
Jan 20, 2022
Merged

Examples: Refactor blending examples. #23246

merged 3 commits into from
Jan 20, 2022

Conversation

@Mugen87
Copy link
Collaborator

@Mugen87 Mugen87 commented Jan 15, 2022 •
edited
Loading

Related issue: #23230

Description

Changes webgl_materials_blending and webgl_materials_blending_custom so the examples do not have to manually create a WebGL 2 context.

@Mugen87 Mugen87 added this to the r137 milestone Jan 15, 2022
@Mugen87 Mugen87 changed the title Examples: Fix webgl_materials_blending. Examples: Fix blending examples. Jan 16, 2022
@Mugen87 Mugen87 changed the title Examples: Fix blending examples. Examples: Refactor blending examples. Jan 16, 2022
mrdoob
mrdoob reviewed Jan 19, 2022
View reviewed changes
examples/webgl_materials_blending.html Outdated
material.transparent = true;
material.blending = blending.constant;

if ( material.blending === THREE.SubtractiveBlending ) material.opacity = 0;
Copy link
Owner

Choose a reason for hiding this comment

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

Is this temporary?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

It is required now since there is an alpha channel. Subtractive blending subtracts the source colors and alpha from the destination. With an opacity value of 1, the final alpha gets zero which means the HTML background will bleed through.

Copy link
Owner

@mrdoob mrdoob Jan 19, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Ah, interesting...
So we should change the SubstractiveBlending to not affect alpha?
At least that's how Photoshop behaves...

Copy link
Collaborator Author

@Mugen87 Mugen87 Jan 19, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Fixed! Although it's now hard to control the opacity of subtractive blended objects. But well, the handling of subtractive blending is general unusual (at least to me^^).

Not sure yet how to change the premultiplied alpha case though. TBH, I don't understand the current approach. Why are both srcRGB and destRGB gl.ZERO? This setup always produces 0 RGB values, no?

three.js/src/renderers/webgl/WebGLState.js

Lines 643 to 645 in 6289f1c

case SubtractiveBlending:
gl.blendFuncSeparate( gl.ZERO, gl.ZERO, gl.ONE_MINUS_SRC_COLOR, gl.ONE_MINUS_SRC_ALPHA );
break;

Copy link
Collaborator Author

@Mugen87 Mugen87 Jan 20, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

BTW: BabylonJS does not modulate subtractive blending by alpha values, too. So it seems the new approach is more correct than before.

Copy link
Owner

Choose a reason for hiding this comment

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

Hmm, just noticed Babylon does gl.ONE gl.ONE for srcAlpha and dstAlpha (doc):

https://github.com/BabylonJS/Babylon.js/blob/c10fa15042293fa12f24ee44f7cd0a1a18343f03/src/Engines/Extensions/engine.alpha.ts#L78

Copy link
Collaborator Author

@Mugen87 Mugen87 Jan 20, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Um, but this will add both alpha values together in our case. The combination of gl.ZERO and gl.ONE retains the alpha value in the destination instead. Maybe they don't use FUNC_ADD like three?

Copy link
Owner

Choose a reason for hiding this comment

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

Maybe they don't use FUNC_ADD like three?

Ah. Interesting...

Copy link
Owner

Choose a reason for hiding this comment

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

Yeah, I think that makes sense.
This stuff is harder to wrap your head around than PBR equations... 😬

Copy link
Collaborator Author

@Mugen87 Mugen87 Jan 20, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Indeed! It would be also interesting to know how often the more special blending like SubtractiveBlending are actually used in production 🤓 .

@mrdoob mrdoob merged commit da14c33 into mrdoob:dev Jan 20, 2022
@mrdoob
Copy link
Owner

mrdoob commented Jan 20, 2022

Thanks!

@linbingquan linbingquan mentioned this pull request Jan 22, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mrdoob mrdoob mrdoob left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

r137

Development

Successfully merging this pull request may close these issues.

2 participants

@Mugen87 @mrdoob