Examples: Refactor blending examples. #23246
Conversation
Mugen87
changed the title
Mugen87
changed the title
| @@ -98,6 +88,8 @@ | |||
| material.transparent = true; | |||
| material.blending = blending.constant; | |||
|
|
|||
| if ( material.blending === THREE.SubtractiveBlending ) material.opacity = 0; | |||
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Ah, interesting...
So we should change the SubstractiveBlending to not affect alpha?
At least that's how Photoshop behaves...
There was a problem hiding this comment.
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
There was a problem hiding this comment.
BTW: BabylonJS does not modulate subtractive blending by alpha values, too. So it seems the new approach is more correct than before.
There was a problem hiding this comment.
Hmm, just noticed Babylon does gl.ONE gl.ONE for srcAlpha and dstAlpha (doc):
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
Maybe they don't use
FUNC_ADDlikethree?
Ah. Interesting...
There was a problem hiding this comment.
Yeah, I think that makes sense.
This stuff is harder to wrap your head around than PBR equations... 😬
There was a problem hiding this comment.
Indeed! It would be also interesting to know how often the more special blending like SubtractiveBlending are actually used in production 🤓 .
|
Thanks! |
Related issue: #23230
Description
Changes
webgl_materials_blendingandwebgl_materials_blending_customso the examples do not have to manually create a WebGL 2 context.