Compositing Transparent Background Renders for the Web
Richard van der Oost writes:
I added a very simple Suzanne render to our homepage recently. But the compositing behind it to achieve the semitransparent shadow is not as simple as you might expect ;)
I used a bit of pixel math to calculate the exact pixel values of the shadow, translated it into compositing nodes, and it seems to work correctly. We also dive into some color space transformations as our web browsers don’t work in linear color space like the Blender compositor does.
This is the full article, and I also share the final .blend file.
I also run through the .blend file and compositing chain in this video:
This is a more than decent approximation, but it’s important to note that it’s impossible to produce a 1:1 rendition of a linear mix with PNGs because of the nonlinear emissions coupled with a linear unassociated alpha channel.
PNG will make it impossible to produce a pure indirect bounce where there isn’t any occlussion, and you only get the part of the indirect that ligthens the shadow.
In the end it’s a usable hack, and way better than just using the PNG output straight away, but still a hack.
The problem is the PNG format and legacy 8-bit nonlinear compositing that sadly is still the only choice you have for the web.
You’re probably right. I do think it’s possible to create an accurate composite when you work with a known value for the background, in this case white. When you start to diverge from that, it’s apparent that it’s not 100% accurate but as long as you stay very close to pure white it will still look good.
Look good, yes. 1:1 with linear, I don’t think it’s possible.
Also you have to consider an important detail: what do you mean by white?
You can’t have a realistic material with a 1.0 albedo and even if you used one (with its own set of problems, as exaggerated indirect which is also going to affect the result) the display-white value is something you’ll achieve with a specific combination of light and view transforms.
Again, I’m not saying that you can’t get a reasonable result by starting with a very controlled setup. I’m saying that the interaction of indirect bounces with the background will end up producing the need of purely additive pixels, which can’t be done with an unassociated alpha (the one that PNG has), leave alone the complexities of linear contribution baked as nonlinear.