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