SDF Font Generator

アトラスプレビュー

アトラスを生成するとプレビューが表示されます

—
—

アトラスを生成すると WebGL プレビューが有効になります

0.500
0.040
0.000
// アトラスを生成するとメタデータが表示されます
uniform sampler2D uSdfAtlas;
uniform float uCutoff;
uniform float uSmoothing;
uniform vec4 uColor;

in vec2 vUv;
out vec4 fragColor;

void main() {
    float d = texture(uSdfAtlas, vUv).r;
    float alpha = smoothstep(uCutoff - uSmoothing, uCutoff + uSmoothing, d);
    fragColor = vec4(uColor.rgb, uColor.a * alpha);
}

UV は Canvas 基準（左上原点）です。環境によっては Y 反転（flipY）が必要です。

エクスポート