Skip to content
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.

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

ShaderChunk: Added transmission alpha support #22425

Merged
merged 7 commits into from
Aug 26, 2021
Merged

ShaderChunk: Added transmission alpha support #22425

merged 7 commits into from
Aug 26, 2021

Conversation

mrdoob
Copy link
Owner

@mrdoob mrdoob commented Aug 25, 2021

Related issue: #22009 (comment) #22196

Description

The bad news is that these spheres have ALPHA_MODE: OPAQUE set.
And just multiplying the alpha doesn't produce satisfactory results.

Screen.Recording.2021-08-25.at.2.59.00.PM.mov

/cc @elalish

@mrdoob
Copy link
Owner Author

mrdoob commented Aug 25, 2021

I've merged #22428 here and this is how it looks like now:

Screen.Recording.2021-08-25.at.9.46.08.PM.mov

Now it just needs the reflections to be visible on top of red (transparent) somehow...

@mrdoob mrdoob force-pushed the transmission-alpha branch from 831e49e to 5f97f3a Compare August 25, 2021 20:39
@elalish
Copy link
Contributor

elalish commented Aug 25, 2021

That's awesome! To recount an offline conversation, I believe there is no way to apply true physically-based rendering to the compositing step where a transparent canvas is stacked on an HTML background. Fundamentally, background-color does not represent light intensity, refraction is impossible, etc. However, it is still a very valuable use case (transparent objects in AR require this since the camera image is not available to JS, not to mention all kinds of cute web design cases). I think it's worth making a non-physical heuristic to handle this situation.

I propose we transform output alpha, where 1 = 1 and 0 = x, where x > 0. I suppose we could try 0.5 and see how it goes. The idea is that opaque objects are opaque, but completely transparent objects are not completely transparent because we calculated specular reflections for them which we do not want composited away. It will definitely have all kinds of weird edges cases, but if we can make it look halfway decent, I think it'll be quite valuable. And it'll have no effect on alpha = false canvases.

@mrdoob
Copy link
Owner Author

mrdoob commented Aug 25, 2021

Okay, now I've bumped again into the TransmissionTexture issue...

Screen.Recording.2021-08-25.at.11.00.10.PM.mov

Notice how TransmissionTexture + Rough Transmission gets bluer the farther it is?

I think these are the roughest areas... It's fetching the smallest mipmaps and the transparent areas and opaque areas gets blurred so end up producing half transparent pixels 😬

@mrdoob
Copy link
Owner Author

mrdoob commented Aug 25, 2021

As per out offline conversation, we decided that the issue above "works as intended".

@mrdoob
Copy link
Owner Author

mrdoob commented Aug 25, 2021

@elalish suggested increasing the transmissionAlpha a bit and we were both surprised with the result 😮

Screen Shot 2021-08-25 at 11 52 40 PM

This workaround shouldn't affect alpha: false as it'd clamp at 1.0.

@mrdoob mrdoob force-pushed the transmission-alpha branch from 51e530c to 161ead8 Compare August 25, 2021 22:03
@mrdoob
Copy link
Owner Author

mrdoob commented Aug 25, 2021

White background doesn't look that great though. But I guess better than nothing?

Screen Shot 2021-08-26 at 12 03 39 AM

@elalish
Copy link
Contributor

elalish commented Aug 25, 2021

Do you know why the red bands on the top sphere are not showing through? Aren't they alpha = 1, alternating with alpha = 0?

@mrdoob
Copy link
Owner Author

mrdoob commented Aug 26, 2021

Not sure... We'll have to look into it in the next cycle.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants