# MirrorTexture reflects the background color of the scene by default, how to remove this feature

**URL:** <https://forum.babylonjs.com/t/mirrortexture-reflects-the-background-color-of-the-scene-by-default-how-to-remove-this-feature/33256>\
**Category:** Questions\
**Tags:** material\
**Created:** [August 22, 2022, 11:37am UTC](https://forum.babylonjs.com/t/mirrortexture-reflects-the-background-color-of-the-scene-by-default-how-to-remove-this-feature/33256 "2022-08-22T11:37:32Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![ecojust](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ecojust/32/12884_2.png) [@ecojust](https://forum.babylonjs.com/u/ecojust)\
**Post date:** [August 22, 2022, 11:37am UTC](https://forum.babylonjs.com/t/mirrortexture-reflects-the-background-color-of-the-scene-by-default-how-to-remove-this-feature/33256/1 "2022-08-22T11:37:32Z")

</div>

RT.

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

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/f/bf2edf6aaecd8784e045a838cf6a30e79f565def.jpeg)

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [August 22, 2022, 12:37pm UTC](https://forum.babylonjs.com/t/mirrortexture-reflects-the-background-color-of-the-scene-by-default-how-to-remove-this-feature/33256/2 "2022-08-22T12:37:57Z")

</div>

One way to do it is to assign a new clear color for your mirror material. Something like this:

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

---

<div class="post-metadata">

**Author:** ![ecojust](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ecojust/32/12884_2.png) [@ecojust](https://forum.babylonjs.com/u/ecojust)\
**Post date:** [August 22, 2022, 1:21pm UTC](https://forum.babylonjs.com/t/mirrortexture-reflects-the-background-color-of-the-scene-by-default-how-to-remove-this-feature/33256/3 "2022-08-22T13:21:39Z")

</div>

But diffuseTexture is invalid…

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

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [August 22, 2022, 1:55pm UTC](https://forum.babylonjs.com/t/mirrortexture-reflects-the-background-color-of-the-scene-by-default-how-to-remove-this-feature/33256/4 "2022-08-22T13:55:27Z")

</div>

What do you mean by invalid? I didn’t touch it and it does not throw any error.  
If by ‘invalid’ you mean that you cannot see it, that’s because obviously with a black clear color you cannot see it anymore. Use a neutral light gray, like this:

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

---

<div class="post-metadata">

**Author:** ![ecojust](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ecojust/32/12884_2.png) [@ecojust](https://forum.babylonjs.com/u/ecojust)\
**Post date:** [August 22, 2022, 2:17pm UTC](https://forum.babylonjs.com/t/mirrortexture-reflects-the-background-color-of-the-scene-by-default-how-to-remove-this-feature/33256/5 "2022-08-22T14:17:52Z")

</div>

This still doesn’t fundamentally solve the problem I’m talking about, it will mix in the unwanted color

But still thank you

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/8/b8ae42f8c6e986244a6bba40c89c5f00c58a4c45.jpeg)

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [August 23, 2022, 7:26am UTC](https://forum.babylonjs.com/t/mirrortexture-reflects-the-background-color-of-the-scene-by-default-how-to-remove-this-feature/33256/6 "2022-08-23T07:26:14Z")

</div>

Well, it mixes with the clear color because of the setting of the diffuseTexture in the node material.  
Where this ‘lava’ I believe material uses a color4 diffuse with alpha.  
You have two choices here.

1. EZ enough you can make the clearColor of your mirrorMaterial white, like this:  
[https://playground.babylonjs.com/#45R5JK#778](https://playground.babylonjs.com/#45R5JK#778)

2. Edit the node material and make the diffuse opaque OR add an opacityTexture OR add a neutralColor OR anything you can imagine with a NM. I cannot list all of the ways you can achieve this. I also don’t know what FX exactly you want to achieve.

Still, hope this helps and meanwhile, have a great day 🕶

---

<div class="post-metadata">

**Author:** ![ecojust](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ecojust/32/12884_2.png) [@ecojust](https://forum.babylonjs.com/u/ecojust)\
**Post date:** [August 23, 2022, 9:46am UTC](https://forum.babylonjs.com/t/mirrortexture-reflects-the-background-color-of-the-scene-by-default-how-to-remove-this-feature/33256/7 "2022-08-23T09:46:22Z")

</div>

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

By debugging I found that clearcolor is more like a controller：

0,0,0--------\>get black  
1,1,1--------\>get diffuseTexture’s style  
other--------\>mix?

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/f/cf3793579f0d561422fdd34eabada2e61660daf3.png)  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/3/438677fc035339216f7c2324e152232b54c283b7.jpeg)  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/3/530c2ddd4309f021deafac38228d0809ab259336.jpeg)

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [August 23, 2022, 12:21pm UTC](https://forum.babylonjs.com/t/mirrortexture-reflects-the-background-color-of-the-scene-by-default-how-to-remove-this-feature/33256/8 "2022-08-23T12:21:59Z")

</div>

> [@ecojust](#):
>
> By debugging I found that clearcolor is more like a controller：

Kind of but not just exactly.

clearColor simply uses color3 values. It does not have an alpha. It adds color on top (to clear it).

Where you entered 255/255 for all of RGB, is equal to #FFFFFF and equal to #FFFFFFFF and equal to White. The clearColor is plain solid white and this is why the diffuse texture shows unaltered on top of it.

Where you entered 0 for all of RGB is equal to #000000 and #00000000 and equal to Black.  
Reason why an underlying diffuseTexture or color will simply not display.

The other values you can enter will ADD to the color and ‘tint’ the texture (as shown in your 2nd pict).

---

<div class="post-metadata">

**Author:** ![ecojust](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ecojust/32/12884_2.png) [@ecojust](https://forum.babylonjs.com/u/ecojust)\
**Post date:** [August 25, 2022, 12:17pm UTC](https://forum.babylonjs.com/t/mirrortexture-reflects-the-background-color-of-the-scene-by-default-how-to-remove-this-feature/33256/9 "2022-08-25T12:17:43Z")

</div>

Maybe we can handle this in another way，i just created a new topic

> [@How to assign the texture of mirrortexture to shader ？](https://forum.babylonjs.com/t/how-to-assign-the-texture-of-mirrortexture-to-shader/33372):
>
> line 33 & line 101

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [August 25, 2022, 12:24pm UTC](https://forum.babylonjs.com/t/mirrortexture-reflects-the-background-color-of-the-scene-by-default-how-to-remove-this-feature/33256/10 "2022-08-25T12:24:39Z")

</div>

Indeed. As, I said there are many ways. I didn’t mention shaders because I don’t master them. 🙁 May be one day… 🤔  
Thanks for sharing and have a great day 🕶

---

<div class="post-metadata">

**Author:** ![ecojust](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ecojust/32/12884_2.png) [@ecojust](https://forum.babylonjs.com/u/ecojust)\
**Post date:** [August 26, 2022, 5:32am UTC](https://forum.babylonjs.com/t/mirrortexture-reflects-the-background-color-of-the-scene-by-default-how-to-remove-this-feature/33256/11 "2022-08-26T05:32:21Z")

</div>

I got another way to do this from another topic.

> [@Custom transparent ground that receives shadows, show mirror and use diffuseTexture](https://forum.babylonjs.com/t/custom-transparent-ground-that-receives-shadows-show-mirror-and-use-diffusetexture/15066):
>
> Hello guys, I am facing again a situation I can’t solve on my own. I try to combine several things into one plane material. The ground should: … be transparent. … be able to receive shadows. … be able to mirror. … be able to show a diffuseTexture with alpha. It’s exactly the setup of the default environment ([https://www.babylonjs-playground.com/#10D6YT#35](https://www.babylonjs-playground.com/#10D6YT#35)) just with transparent ground. I created a playground here: [https://playground.babylonjs.com/#9KLUBA#1](https://playground.babylonjs.com/#9KLUBA#1) Thank you very much!!

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

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

```auto
   XXX : var backgroundMaterial = new BABYLON.BackgroundMaterial("backgroundMaterial", scene);  
   √√√ : var backgroundMaterial = new BABYLON.StandardMaterial("backgroundMaterial", scene);    

```
