Hi All, I mean like we did at texture inspector . click the red channel button to get red channel preview .
What does the click event change ?
1 Like
Hey @musk,
Great question! You can find the source for that component here: Babylon.js/textureLineComponent.tsx
The preview is generated using a helper function called GetTextureDataAsync(), which you can find in textureHelper.ts. This function renders the texture and then samples every pixel, collecting data from whichever channel you have selected. (For example, if you have only selected the blue channel, then we will only care about the level of B The data gets stored in an array, which we then paint onto a 2d canvas using the putImageData method.
This method relies on a lot of CPU processing, so it’s not suitable for real-time application. If you need to display only a single channel in real time, you will want to look into using a shader. You can find a shader that does exactly that in canvasShader.ts. This is what we use for the pop-out texture inspector window. Basically, we pass in the channels we want to display as booleans, and then in the fragment shader we mix together the various channels to show what we want. This is much faster and will work for real-time cases.
The advantage of the CPU-based approach is that it allows you to do manipulations with the data. So if you wanted to modify only a single channel of a texture, you would need to do that on the CPU.
That’s how we support single-channel painting in the texture inspector.
Let me know if this is helpful to you!
3 Likes
Thank you DarraghBurke. It’s very detailed and helpful ! Thanks to the Babylon community. I have learned a lot from here recently 
2 Likes