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

Hello!

Here’s a sandbox demo: Babylon.js Playground

I have this as the base texture: 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!

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

https://playground.babylonjs.com/#NLWBJP#3

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

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).

2 Likes

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

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

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.

1 Like

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

You’re right, I have been fouled by Chrome because when zooming 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

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)…

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

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

1 Like

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

Thank you!

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

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.

Ah I see. Thank you for the insight!

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

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

1 Like

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!