1
$\begingroup$

I have some graphic drawings of the floors of a hours that I want to display on a web page. Drawn in GIMP, there are several layers all with "normal" mode:

house layers

From bottom to top, the layers are:

  • ground (grass and building outline)
  • first floor, with shutters outside the window
  • ground copy to cover those shutters
  • 67% opaque black "scrim"
  • second floor

If there was no "ground copy" then the shutters from the first floor would be visible when viewing the second floor and, because they're black, not be distinguished as "behind the scrim" and thus on a lower level. It doesn't look good and sometimes they clash with shutters from second-floor windows. Hence: Just remove them by copying the ground over them.

The result, when composited in GIMP is this:

composited image

For my web page, I want the "ground" level to always exist and just change floor graphics. The first floor has only "on" or "off" transparency and works fine. The second floor, with collapses the top 4 layers (including the scrim), ends up like this:

second floor overlay

You'll note that the "ground cover" is opaque (but dimmed) while the "scrim" is partially (33%) transparent.

If I composite only that merged overlay with the original "ground" layer in GIMP, I get something identical to the original composited image, which is as you'd expect.

However, when I place the composited "second floor" layer over the "ground" layer on my web page, it doesn't behave the same. I get this:

web composited result

You can see that all the opaque areas of the second floor appear correctly but the "ground" behind it is much dimmer, passing maybe 1/2 as much color at a guess.

There is no CSS. It's currently just two overlaid images:

<html>
<head></head>
<body>
<div style="position: absolute;"><img src="1.png"></div>
<div style="position: absolute;"><img src="2.png"></div>
</body>
</html>

Can anybody explain why my web browser (Chrome) would composite two graphic layers differently than GIMP?

$\endgroup$

1 Answer 1

1
$\begingroup$

I've discovered that GIMP (as of v2.10) has a new set of "default" blending modes which is what I used for creating my images. If, using the two images, I blend them using "legacy normal" then I get results matching that of web browsers.

"Default" blending is done in linear light while "legacy" blending is done in gamma-corrected (perceptual) space.

By altering the blending of all my original layers (at least those with non-binary transparency) to be the "legacy" version and merging into two layers as described in the question, I can then overlay the results using a web browser to get the expected results.

It seems a "default normal" blending opacity of 67% is equivalent to a "legacy normal" blending opacity of 40% (or at least close enough that I couldn't see any difference visually).

$\endgroup$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.