Font Rendering with sdf shader, weird transparency

Hi, I’m trying to get custom sdf font rendering to work in Babylon and have gotten the basics to work, but my meshes using the ShaderMaterial are too transparent. Instead of showing the other objects in the scene behind the text mesh, it shows the underlying webpage. This sounds like a silly flag or feature I need to change somewhere, but I have no idea where :stuck_out_tongue:

Full code is here webgl-text-render/public at master · JoeHowarth/webgl-text-render · GitHub
Specifically looking at src/sdf.ts and these shaders:

attribute vec2 position;
attribute vec2 uv;
uniform mat4 worldViewProjection;
varying vec2 vUv;

void main() {
    gl_Position = worldViewProjection * vec4(position.xy, 0, 1);
    vUv = uv;


#extension GL_OES_standard_derivatives : enable

precision highp float;
uniform sampler2D u_texture;
varying vec2 vUv;

void main() {
    float dist = texture2D(u_texture, vUv).r;

    float scale = 1.0 / fwidth(dist);
    float signedDistance = (dist - 0.5) * scale;

    float color = 0.0;
    //    float alpha = clamp(signedDistance + scale * 0.125, 0.0, 1.0);
    float alpha = clamp(signedDistance, 0.0, 1.0);
    gl_FragColor = vec4(color, color, color, 1) * alpha;
1 Like

hey i am so interesting this is your first post :slight_smile: but heavy request ( congratulation bro )
read this

just recommended for dynamic or live calculate parameters :slight_smile:
like this

the full live shader ( more limitation )

font maker :

Hey !
you may just need to turn alpha blending on:

let mat = new ShaderMaterial("sdf", scene, "./sdf",
       needAlphaBlending: true,
        attributes: ["position", "uv"],
        uniforms: ["worldViewProjection", "u_texture"]