Need help with font shader

Questions
1

i am trying to make font looks like in photoshop.
For that i need gradient,outline,shadow and bevel.
gradient, outline and shadow i made from forum font examples.
But i have no idea how to make bevel.

varying lowp vec2 var_texcoord0;
varying lowp vec4 var_face_color;
varying lowp vec4 var_outline_color;
varying lowp vec4 var_shadow_color;
varying lowp vec4 var_sdf_params;
varying lowp vec4 var_layer_mask;

uniform mediump sampler2D texture;
uniform lowp vec4 texture_size_recip;

uniform lowp vec4 color1;
uniform lowp vec4 color2;


vec3 gradient_mode()
{
	lowp float gradient_value_y = fract(var_texcoord0.y / texture_size_recip.w);
	lowp vec3  color_a          = color1.rgb;
	lowp vec3  color_b          = color2.rgb;

	return mix(color_a,color_b,gradient_value_y);
}

void main()
{
	lowp vec3 gradient_norml = gradient_mode();
	mediump vec4 sample = texture2D(texture, var_texcoord0);

	mediump float distance        = sample.x;
	mediump float distance_shadow = sample.z;

	lowp float sdf_edge      = var_sdf_params.x;
	lowp float sdf_outline   = var_sdf_params.y;
	lowp float sdf_smoothing = var_sdf_params.z;
	lowp float sdf_shadow    = var_sdf_params.w;

	// If there is no blur, the shadow should behave in the same way as the outline.
	lowp float sdf_shadow_as_outline = floor(sdf_shadow);
	// If this is a single layer font, we must make sure to not mix alpha between layers.
	lowp float sdf_is_single_layer   = var_layer_mask.a;

	lowp float face_alpha      = smoothstep(sdf_edge - sdf_smoothing, sdf_edge + sdf_smoothing, distance) * var_face_color.w;
	lowp float outline_alpha   = smoothstep(sdf_outline - sdf_smoothing, sdf_outline + sdf_smoothing, distance) * var_face_color.w;
	lowp float shadow_alpha    = smoothstep(sdf_shadow - sdf_smoothing, sdf_edge + sdf_smoothing, distance_shadow) * var_face_color.w;

	shadow_alpha = mix(shadow_alpha,outline_alpha,sdf_shadow_as_outline);

	gl_FragColor = face_alpha * vec4(gradient_norml, 1.0) * var_layer_mask.x +
	outline_alpha * var_outline_color * var_layer_mask.y * (1.0 - face_alpha * sdf_is_single_layer) +
	shadow_alpha * var_shadow_color * var_layer_mask.z * (1.0 - min(1.0,outline_alpha + face_alpha) * sdf_is_single_layer);
}

Need

font_need
font_need138Ă—126 19.9 KB

In game
font_in_game
font_in_game138Ă—126 20.7 KB

2

it does not matter.
Make a bitmap from with shoebox. Looks much better, simple, and should be faster=)

3

It usually involves more than one texture lookup, to determine more information about the shape itself.
Once you have that info, you can start figuring out the “normal”, or the direction of change between the pixels you’ve sampled, and device a way to create the effect you want.

An example. Some example search terms: emboss, bevel, normal, sobel filters.

Another example, in the chapter “Embossing” (which seems like exactly what you want.

2 Likes