# Replace base texture pixels with the values from a different texture. Only getting white pixels for some reason

**URL:** <https://forum.babylonjs.com/t/replace-base-texture-pixels-with-the-values-from-a-different-texture-only-getting-white-pixels-for-some-reason/6468>\
**Category:** Questions\
**Created:** [October 20, 2019, 10:49pm UTC](https://forum.babylonjs.com/t/replace-base-texture-pixels-with-the-values-from-a-different-texture-only-getting-white-pixels-for-some-reason/6468 "2019-10-20T22:49:00Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![niamleeson](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/niamleeson/32/3336_2.png) [@niamleeson](https://forum.babylonjs.com/u/niamleeson)\
**Post date:** [October 20, 2019, 10:49pm UTC](https://forum.babylonjs.com/t/replace-base-texture-pixels-with-the-values-from-a-different-texture-only-getting-white-pixels-for-some-reason/6468/1 "2019-10-20T22:49:00Z")

</div>

Hello!

Here’s a sandbox demo: [Babylon.js Playground](https://playground.babylonjs.com/#NLWBJP)

I have this as the base texture: [https://i.imgur.com/sMltV2n.png](https://i.imgur.com/sMltV2n.png)

I’m trying to have a dynamic texture that has colors for a given id (in this case an rgb color) and replace the output color with the colors from the dynamic texture. From the example texture above, I would like to replace the black pixels with blue and the red pixels with green.

No matter what I do I’m only getting white pixels and I cannot figure out why… I would really appreciate it if someone can help me.

Thank you!

---

<div class="post-metadata">

**Author:** ![Gijs](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/gijs/32/44_2.png) [@Gijs](https://forum.babylonjs.com/u/Gijs)\
**Post date:** [October 21, 2019, 12:27am UTC](https://forum.babylonjs.com/t/replace-base-texture-pixels-with-the-values-from-a-different-texture-only-getting-white-pixels-for-some-reason/6468/2 "2019-10-21T00:27:08Z")

</div>

No answer, but using backticks for the shader code may be easier to work with:

[https://playground.babylonjs.com/#NLWBJP#3](https://playground.babylonjs.com/#NLWBJP#3)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [October 21, 2019, 10:40am UTC](https://forum.babylonjs.com/t/replace-base-texture-pixels-with-the-values-from-a-different-texture-only-getting-white-pixels-for-some-reason/6468/3 "2019-10-21T10:40:37Z")

</div>

In the shader, rgb components are between 0 and 1, so you should multiply them by 255 to get values between 0 and 255. Also, your dynamic texture has Y inversion. Try:

[https://playground.babylonjs.com/#NLWBJP#5](https://playground.babylonjs.com/#NLWBJP#5)

I have added texture clamping to get rid of the white borders and changed the sampling mode to retain the true colors of the dynamic texture. You can comment the lines to see the differences.

Note that the remaining white lines inside the texture are because of the antialiasing inside the image picture itself (so those pixels are not full red nor full black and so are remapped to white inside the shader).

---

<div class="post-metadata">

**Author:** ![niamleeson](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/niamleeson/32/3336_2.png) [@niamleeson](https://forum.babylonjs.com/u/niamleeson)\
**Post date:** [October 21, 2019, 1:26pm UTC](https://forum.babylonjs.com/t/replace-base-texture-pixels-with-the-values-from-a-different-texture-only-getting-white-pixels-for-some-reason/6468/4 "2019-10-21T13:26:30Z")

</div>

Wow! You are a wizard! Thank you so much!

The white line is a problem that I didn’t anticipate… 😆 I’m not sure how to solve this… What is a good way to solve this? 🙏

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [October 21, 2019, 6:12pm UTC](https://forum.babylonjs.com/t/replace-base-texture-pixels-with-the-values-from-a-different-texture-only-getting-white-pixels-for-some-reason/6468/5 "2019-10-21T18:12:09Z")

</div>

Modify the texture in a paint program and replace the pixels that are not full red by full red ones. Maybe the antialiasing in the alpha channel: in this case, just remove it.

---

<div class="post-metadata">

**Author:** ![niamleeson](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/niamleeson/32/3336_2.png) [@niamleeson](https://forum.babylonjs.com/u/niamleeson)\
**Post date:** [October 21, 2019, 6:16pm UTC](https://forum.babylonjs.com/t/replace-base-texture-pixels-with-the-values-from-a-different-texture-only-getting-white-pixels-for-some-reason/6468/6 "2019-10-21T18:16:30Z")

</div>

Oh are you saying the source texture has pixels that are not full red? I thought you meant there’s antialiasing happening with the cube and in the fragment shader, it has no mapping to green when it isn’t fully red. I created the texture in photoshop in 256 x 256 resolution with no antialiasing… I’ll try to create the texture again.

EDIT  
The source texture doesn’t have any gradient between the pixels… I imported into Photoshop and zoomed in and I can see clear edges. The below image is a fully zoomed-in image

 ![33%20PM](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/e/e514f859f9ccaeb70c85a8fe9e4c8cf7e6846a1a.png)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [October 21, 2019, 7:34pm UTC](https://forum.babylonjs.com/t/replace-base-texture-pixels-with-the-values-from-a-different-texture-only-getting-white-pixels-for-some-reason/6468/7 "2019-10-21T19:34:42Z")

</div>

You’re right, I have been fouled by Chrome because when zooming [https://i.imgur.com/sMltV2n.png](https://i.imgur.com/sMltV2n.png) I could see antialiased pixels (or thought there were antialiased pixels…).

I thought the problem came from mimapping, so I have disabled it, but the lines still remain…

I have changed the shader code to use the color coming from the source texture when it is not (1,0,0) nor (0,1,0). That way, we can clearly see antialised red / black texels when zooming in:

[https://playground.babylonjs.com/#NLWBJP#7](https://playground.babylonjs.com/#NLWBJP#7)

Could it be global antialiasing at the Engine level? Engine is created outside of the playground code, so I don’t know how to disable it (in case it is enabled)…

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [October 21, 2019, 7:50pm UTC](https://forum.babylonjs.com/t/replace-base-texture-pixels-with-the-values-from-a-different-texture-only-getting-white-pixels-for-some-reason/6468/8 "2019-10-21T19:50:49Z")

</div>

After debugging with Spector (great tool by the way!), I saw that the sampling mode of the checkered texture was **LINEAR/LINEAR** and not **NEAREST/NEAREST** as I have set it through the call to `updateSamplingMode`…

So, as we can also pass the sampling mode by the constructor, I did it that way… and it works!

[https://playground.babylonjs.com/#NLWBJP#8](https://playground.babylonjs.com/#NLWBJP#8)

Changing the sampling mode with `updateSamplingMode` of the dynamic texture does work, so I think there’s a bug here with `Texture`…

---

<div class="post-metadata">

**Author:** ![niamleeson](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/niamleeson/32/3336_2.png) [@niamleeson](https://forum.babylonjs.com/u/niamleeson)\
**Post date:** [October 21, 2019, 7:53pm UTC](https://forum.babylonjs.com/t/replace-base-texture-pixels-with-the-values-from-a-different-texture-only-getting-white-pixels-for-some-reason/6468/9 "2019-10-21T19:53:04Z")

</div>

HOLY you are an absolute genius! I will try to use Spector! And this is SO cool!

Thank you!

---

<div class="post-metadata">

**Author:** ![niamleeson](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/niamleeson/32/3336_2.png) [@niamleeson](https://forum.babylonjs.com/u/niamleeson)\
**Post date:** [October 21, 2019, 8:05pm UTC](https://forum.babylonjs.com/t/replace-base-texture-pixels-with-the-values-from-a-different-texture-only-getting-white-pixels-for-some-reason/6468/10 "2019-10-21T20:05:27Z")

</div>

I apologize for asking too many questions… is it possible to have the output antialiased?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [October 21, 2019, 8:16pm UTC](https://forum.babylonjs.com/t/replace-base-texture-pixels-with-the-values-from-a-different-texture-only-getting-white-pixels-for-some-reason/6468/11 "2019-10-21T20:16:08Z")

</div>

Not really, because of the way you generate the output pixel: the gpu does interpolation on the idSource texture (which was the problem and is now disabled) but can’t interpolate (with what?) the final pixel you generate.

When in the fragment shader, when you lookup a green pixel for eg, you don’t know what color is the pixel just on the left / top / right / bottom, which would allow you to perform some interpolation.

---

<div class="post-metadata">

**Author:** ![niamleeson](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/niamleeson/32/3336_2.png) [@niamleeson](https://forum.babylonjs.com/u/niamleeson)\
**Post date:** [October 21, 2019, 8:25pm UTC](https://forum.babylonjs.com/t/replace-base-texture-pixels-with-the-values-from-a-different-texture-only-getting-white-pixels-for-some-reason/6468/12 "2019-10-21T20:25:18Z")

</div>

Ah I see. Thank you for the insight!

---

<div class="post-metadata">

**Author:** ![niamleeson](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/niamleeson/32/3336_2.png) [@niamleeson](https://forum.babylonjs.com/u/niamleeson)\
**Post date:** [October 24, 2019, 5:15am UTC](https://forum.babylonjs.com/t/replace-base-texture-pixels-with-the-values-from-a-different-texture-only-getting-white-pixels-for-some-reason/6468/13 "2019-10-24T05:15:33Z")

</div>

Added FXAA and looks a lot better! [https://playground.babylonjs.com/#NLWBJP#9](https://playground.babylonjs.com/#NLWBJP#9)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [October 24, 2019, 9:06am UTC](https://forum.babylonjs.com/t/replace-base-texture-pixels-with-the-values-from-a-different-texture-only-getting-white-pixels-for-some-reason/6468/14 "2019-10-24T09:06:51Z")

</div>

Nice, for some reason I thought “filtering” when you asked for “antialiasing”!

---

<div class="post-metadata">

**Author:** ![niamleeson](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/niamleeson/32/3336_2.png) [@niamleeson](https://forum.babylonjs.com/u/niamleeson)\
**Post date:** [October 24, 2019, 6:49pm UTC](https://forum.babylonjs.com/t/replace-base-texture-pixels-with-the-values-from-a-different-texture-only-getting-white-pixels-for-some-reason/6468/15 "2019-10-24T18:49:05Z")

</div>

Haha no problem. I only needed to add a single line. The Babylonjs magicians like yourselves put in a lot of work to make this so easy! BabylonJs is amazing!
