How dynamically and independently adjust the color of each image texture (hue, saturability, and brightness) with high performance

Recently I’m developing an application to adjust the 3D model (for example, texture scaling, texture offset) which the users upload.

However, I encountered a problem, that is, dynamically and independently adjust the color of each texture image (hue, saturability, and brightness) and preview it in real-time, just like the color adjustment tool of Photoshop (see the following figure), users often quickly drag the slider to adjust color, so that need to immediately Real-time preview with high frame rate, which needs to be implemented with high performance.

I found some solutions:

  1. Use Image Filter and ImageProcessingPostProcess to adjust the color of texture image by creating some independent canvas for each texture, and output canvas image to Texture. I think the performance of this way should be a little bad.

  2. Creating some stencils for each texture and using ImageProcessingPostProcess or custom shader to change color for special texture. I think it should be very difficult.

Is there have a better solution? Any help would be much appreciated.

Relative questions:

As per the doc, you can use Image Filter to generate to a texture, you don’t have to generate to a canvas first (see the sample and the customFilter.render(mainTexture, customEffectWrapper); call). It seems to me to be the best way to do what you want.

2 Likes

Thank you for helping, but after testing, customFilter.render just directly render the filtered image or texture to canvas rather than change the texture, just like the picture below, it’s not what I want.

Maybe Procedural Textures can do this, I will have a look at it.

On the controls you should use getFilteredTexture an not render wich will give new a new equivalent of you texture filtered with your setup.

Or the best option by far, you create a RenderTargetTexture, the imageProcessingPostProcess and render to it before drawing the scene:

https://playground.babylonjs.com/#C0FYBI

2 Likes

RenderTargetTexture works perfectly for me! Thank you so much!