How to stop color bleeding on HTML export?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By AlbGD

I’ve created a shader which takes in a procedurally generated texture to swap colors dynamically, it works alright in the editor, but when I export the project to HTML some color bleeding is taking place and making the display colors muddy.

Is there a way to correct this for HTML?

The generated ImageTexture is 256 x 3 in size, with format set to FORMAT_RGB8, and flag set to FLAG_REPEAT.

You can find the demo scene here: Demo Scene

And the repository here: GitHub repo

:bust_in_silhouette: Reply From: Calinou

This is a known issue: Colors appear desaturated in Chrome / WebKit · Issue #34062 · godotengine/godot · GitHub

Try running the project in different browsers to confirm this.

hey! thanks for the reply.

I’ve tested it on Firefox, Chrome, Edge and Opera. They all reproduce the same symptom of muddy colors.

However, I don’t think it is related to that known issue, as the colors appear correctly saturated. The problem could lie in the way I’m generating the Image or ImageTexture.

The original texture I used for the shader, correctly displays the colors both in the editor and in web browsers. It is an imported texture with the 2d pixel preset applied, but I don’t know how to generate an ImageTexture with those specific values. The muddy colors also resemble a Filter Flag imported texture.

I’m going to do more tests, changing the format, interpolation, compression and flags to see if that corrects the procedurally generated ImageTexture.

AlbGD | 2020-07-06 20:35

Thank you! Your answer lead me to discover this other question, where they set the flags to 0 fixing the color bleeding problem.

I’ve also fixed the code and re-uploaded it to my itch.io and now the colors look nice!

AlbGD | 2020-07-07 00:59