Transparent canvas background

Questions
1

Demo: https://jsfiddle.net/wvp4oLen/. Excepted behavior on the left and Babylon’s behavior on the right.

I’m trying to create a transparency indicator, i.e. checkerboard behind my scene’s canvas element. I’m setting the background color with scene.clearColor and for partly transparent colors expect more or less the same result as with pure canvas. However, the colors mixing seems way off; this is especially obvious when increasing transparency: in pure canvas the color disappears and background becomes even more visible, in Babylon’s version the colors get increasingly more “acidic” and disappear only with transparency set to 100%.

What am I doing wrong and how do I fix it?

2

This is because by default the canvas is in premultiplied alpha when using webgl.
Just run the engine initialization like this:

var engine = new BABYLON.Engine(canvas2, true, {
  premultipliedAlpha: false  // Ask for non-premultiplied alpha
});
2 Likes
3

Oh wow, thanks! I think I’d be looking elsewhere for a very long time, before I’d find this option.

3 Likes
4

Yes, now looks like it should to :slight_smile:

image

2 Likes