Shaders, gradients and fonts

Questions
1

Hi,
I´m trying to create a gradient on a font.
The format of the var_face_color in the vertex shader
var_face_color = vec4(face_color.xyz * face_color.w, face_color.w);

is passing the color data to the var_face_color right?
it seams is not filled with the r, g, b, a components
am I wrong?

How can I access to the rgba components of the color to be able to create a gradient?
so I can do that:
mix(top_color, bottom_color, position.y)

Any ideas?
Thanks guys!

2

face_color is coming from an attribute
attribute lowp vec4 face_color;

But this attribute is coming from the font properties color?

3

You need to copy the label material and add two user defined fragment constants:

09
09491×382 22.4 KB

You can manipulate these using go.set():

go.set("#label", "top", vmath.vector4(0,1,0,1))

And use them in your vertex program:

//gradient_font.vp

varying mediump vec2 var_texcoord0;

uniform lowp vec4 texture_size_recip;
uniform lowp sampler2D texture;
uniform lowp vec4 top;
uniform lowp vec4 bottom;

void main()
{
    lowp vec2 t = texture2D(texture, var_texcoord0.xy).xy;
    lowp vec4 col = mix(top, bottom, var_texcoord0.y);
    gl_FragColor = col * t.x;
 }

Now, it will not really work as expected since the font may be laid out on multiple lines in the texture, thus causing var_texcoord0.y to not always go from 0.0 to 1.0

1 Like