# When the scene clearColor is transparent, overlapping with other elements causes color blending

**URL:** <https://forum.babylonjs.com/t/when-the-scene-clearcolor-is-transparent-overlapping-with-other-elements-causes-color-blending/51254>\
**Category:** Questions\
**Created:** [June 12, 2024, 2:11am UTC](https://forum.babylonjs.com/t/when-the-scene-clearcolor-is-transparent-overlapping-with-other-elements-causes-color-blending/51254 "2024-06-12T02:11:10Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ZoeLeee](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zoeleee/32/20340_2.png) [@ZoeLeee](https://forum.babylonjs.com/u/ZoeLeee)\
**Post date:** [June 12, 2024, 2:11am UTC](https://forum.babylonjs.com/t/when-the-scene-clearcolor-is-transparent-overlapping-with-other-elements-causes-color-blending/51254/1 "2024-06-12T02:11:11Z")

</div>

`Scene.clearColor = new Color4(1, 1, 0, 0);`

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/3/d384f60897e2a030d8006881db36611eef6d81c2.png)

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [June 12, 2024, 3:23am UTC](https://forum.babylonjs.com/t/when-the-scene-clearcolor-is-transparent-overlapping-with-other-elements-causes-color-blending/51254/2 "2024-06-12T03:23:56Z")

</div>

Dude, how should we know what is what on this screenshot?

However:

> **[Babylon.js Playground](https://playground.babylonjs.com/#9ML2E1%232)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/3/838e44f5b0d2cdf83a1dcfb0795b6fd67c51929b.png)

---

<div class="post-metadata">

**Author:** ![ZoeLeee](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zoeleee/32/20340_2.png) [@ZoeLeee](https://forum.babylonjs.com/u/ZoeLeee)\
**Post date:** [June 12, 2024, 4:00am UTC](https://forum.babylonjs.com/t/when-the-scene-clearcolor-is-transparent-overlapping-with-other-elements-causes-color-blending/51254/3 "2024-06-12T04:00:43Z")

</div>

> **[Babylon.js Playground](https://playground.babylonjs.com/#9ML2E1%233)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

I didn’t express myself clearly. For example, when a red element overlaps with the background, it blends into yellow.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [June 12, 2024, 4:03am UTC](https://forum.babylonjs.com/t/when-the-scene-clearcolor-is-transparent-overlapping-with-other-elements-causes-color-blending/51254/4 "2024-06-12T04:03:00Z")

</div>

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/4/748daec65b1c9a2a6608322776c54f5889b36f1d.jpeg)

Where is the issue?

Can you send a screenshot?

---

<div class="post-metadata">

**Author:** ![ZoeLeee](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zoeleee/32/20340_2.png) [@ZoeLeee](https://forum.babylonjs.com/u/ZoeLeee)\
**Post date:** [June 12, 2024, 5:33am UTC](https://forum.babylonjs.com/t/when-the-scene-clearcolor-is-transparent-overlapping-with-other-elements-causes-color-blending/51254/5 "2024-06-12T05:33:07Z")

</div>

> **[Babylon.js Playground](https://playground.babylonjs.com/#9ML2E1%234)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

You can click on the scene, and when the canvas is over the red square, the area of the square will turn yellow.

before clicking

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/0/d08c54c9d4a588c1f15c530555e65710e74584f9.png)

after clicking

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/6/26f29c9447a7c497c28a58c04d42b9bd01b30ee2.png)

---

<div class="post-metadata">

**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\
**Post date:** [June 12, 2024, 6:17am UTC](https://forum.babylonjs.com/t/when-the-scene-clearcolor-is-transparent-overlapping-with-other-elements-causes-color-blending/51254/6 "2024-06-12T06:17:15Z")

</div>

Granted it does seem like odd behaviour, but if the clear color is 100% transparent anyway, why not just `scene.clearColor = new BABYLON.Color4(0, 0, 0, 0)` which doesn’t exhibit the same problem as `scene.clearColor = new BABYLON.Color4(1, 1, 0, 0)`?

Still, it’d be worth investigating the reason for this … I’m at a loss 🙂

---

<div class="post-metadata">

**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\
**Post date:** [June 12, 2024, 6:23am UTC](https://forum.babylonjs.com/t/when-the-scene-clearcolor-is-transparent-overlapping-with-other-elements-causes-color-blending/51254/7 "2024-06-12T06:23:56Z")

</div>

Ah, here’s the answer I think:

> [@Transparent canvas background](https://forum.babylonjs.com/t/transparent-canvas-background/5818/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 });

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [June 12, 2024, 6:46am UTC](https://forum.babylonjs.com/t/when-the-scene-clearcolor-is-transparent-overlapping-with-other-elements-causes-color-blending/51254/8 "2024-06-12T06:46:07Z")

</div>

**This seems to be an issue only on Windows.**

I’m on MAC, Chrome and it works without any tweaks. This is why I couldn’t see what @ZoeLeee was talking about.
