godotengine / godot-docs

Godot Engine official documentation
https://docs.godotengine.org
Other
3.9k stars 3.18k forks source link

Add Text Shader Documentation #4385

Open vitorbalbio opened 3 years ago

vitorbalbio commented 3 years ago

Describe the project you are working on: https://twitter.com/ZeroPointGame

Describe the problem or limitation you are having in your project: There's no documentation for canvas item shaders applied to texts.

Describe the feature / enhancement and how it helps to overcome the problem or limitation: Documentation about text shaders allows people add nice effects in dynamic fonts.

Describe how your proposal will work, with code, pseudocode, mockups, and/or diagrams: By what i found back engendering it, texts are rendered as planes and applied characters as textures. All colors like shadow are applied as Vertex Colors. So this should be a minimum canvas item for texts:

shader_type canvas_item;
void fragment(){
    COLOR = texture(TEXTURE,UV) * COLOR;
}

An this is using gradient textures in text. There's not consistence in the plane's uv since it's mapped on a atlas of characters (i think) but you can use the screen UV

shader_type canvas_item;

uniform sampler2D gradient;

void fragment(){
    vec4 col = texture(gradient,SCREEN_UV.yx);
    COLOR = texture(TEXTURE,UV) * COLOR * col;
}

Godot_v3 2 3-stable_mono_win64_ocmacPxe8Q

If this enhancement will not be used often, can it be worked around with a few lines of script?: It's a few lines of scripts.

Is there a reason why this should be core and not an add-on in the asset library?: No aplied

alecxvs commented 1 week ago

The mysterious way that shader materials are applied to text is confounding me currently. But I'm also a novice with Godot. I'm trying to apply a gradient relative to the text, not the screen. Basically applying a small palette as a gradient, but across the entire line of text by pixel row.

When I try to use UV or local coords, I get unexpected results. Such as, Y=0 seems to be relative to the top of each character (but not always?), so while commas appear on the bottom of the line of text, they are colored as if they were at the top. I think that's the case this example is working around.

Example: Almost correct, but different size characters offset the coordinates and the "lines" are inconsistent image

I don't know of any way to get the XY coords relative to the top left of the "plane" as determined by the node dimensions. I assume normal 2d textures would work this way, because it's a single plane and that's that... and the documentation seems to suggest this is how it would work. But this extra behavior per-character throws all of that out the window. The example that uses screen space coords won't work for me because of the small size of my gradient texture, and needing to align it on the pixel. Trying to get that to work in my case would be a very elaborate hack. image image

Although I realize I am both encountering this unknown behavior, and then also asking the shader to do something that I am becoming more and more convinced it is not able to do. But more documentation around how shaders apply to text would have saved me a lot of time figuring this out.