See-through glass material renders different background color

Mugen87 · July 28, 2023, 9:49am

This is actually the (current) intended behavior and explained in detail here:

github.com/mrdoob/three.js

Improved transparent rendering

mrdoob:dev ← elalish:transparency

opened 07:51PM - 12 Apr 23 UTC

elalish

+348 -10

This is a follow-on to #22425 and #22473 to make rendering transparent objects o…nto a transparent canvas work better so they can be composited onto DOM or AR content behind and look reasonably seamless. This is required as DOM-to-texture is not and will not be allowed due to security, and WebXR does not expose the camera feed by default, meaning those backgrounds are not available within our shaders. It also means what I'm doing is fundamentally a non-PBR hack, since blend functions can't represent light transport properly, and it's not possible to handle transmission roughness or refraction. However, we can improve significantly: Before / Current (including #25881) <img width="236" alt="image" src="https://user-images.githubusercontent.com/1649964/231565225-22b1c25b-680d-4aa3-8b25-33e68be210e3.png"><img width="214" alt="image" src="https://user-images.githubusercontent.com/1649964/234706526-3b740662-8106-49c5-bd33-2a003074425b.png"> (for historical reference) 1st draft / 2nd draft: <img width="236" alt="image" src="https://user-images.githubusercontent.com/1649964/231565424-8a31b0bc-8b5d-4bba-950f-0c6755f69749.png"><img width="234" alt="image" src="https://user-images.githubusercontent.com/1649964/231611892-e92e3fd7-eee6-4a9d-ba60-ac6f4715d60d.png"> Before / After: <img width="285" alt="image" src="https://user-images.githubusercontent.com/1649964/231565907-ef123147-31a6-4788-ad39-1c0295a9884b.png"><img width="275" alt="image" src="https://user-images.githubusercontent.com/1649964/234718746-69d9a747-a9d0-4623-ae71-a8b828c2a978.png"> And it works with other CSS background colors since the canvas is transparent: <img width="275" alt="image" src="https://user-images.githubusercontent.com/1649964/234718904-d7f4a7b6-cfab-41eb-aa09-4dacfb7d8f8d.png"><img width="275" alt="image" src="https://user-images.githubusercontent.com/1649964/234718993-0e9e7727-7792-42bb-b646-3f5c100dbc32.png"><img width="275" alt="image" src="https://user-images.githubusercontent.com/1649964/234719792-8e3a82cc-7a6b-48c4-9a23-6c89017ecf3b.png"><img width="275" alt="image" src="https://user-images.githubusercontent.com/1649964/234719920-a64bafaf-a38f-4771-b3c8-1468c71efe5c.png"> ~~It does require two extra steps to make it work in addition to this PR:~~ ~~1) The renderer must have `premultipliedAlpha: false`~~ ~~2) Must call `renderer.setClearColor(new Color(0xFFFFFF), 0);`~~ ~~I haven't included these in the spirit of avoiding breaking changes and because this unblocks model-viewer. However, it might be worth looking at these defaults, as materials default `premultipliedAlpha` to `false`, while the renderer defaults to `true`. Also, if you set `renderer.setClearColor(new Color(0xFFFFFF));`, it will ignore the `alpha` of your context and clear to `alpha = 1`, which is a bit confusing. Currently the background clears to black by default, but white seems just as reasonable?~~

Topic		Replies	Views
Setting Background Colour for glass material with transparent background Questions transparency , background	4	2209	November 29, 2021
Light passing through glass material Questions materials , shaders , gltf-loader	3	395	April 29, 2024
How to make a transparent material that filters what can be seen behind it? Questions materials , transparency	3	987	June 20, 2024
Shader Material GLSL load texture HELP Questions textures , shaders , shader-material	0	994	August 23, 2020
Want to change background color of Star animation? Questions materials , geometry , camera , animation	2	2627	September 1, 2021

See-through glass material renders different background color

Related topics