Font Rendering with sdf shader, weird transparency

Questions
1

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:

27%20PM
Screen Shot 2019-06-30 at 3.36.27 PM.png1146×616 38.6 KB

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

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

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

Fragment:

#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
2

hey i am so interesting this is your first post :slight_smile: but heavy request ( congratulation bro )
read this https://www.babylonjs-playground.com/#HJSZ84#41

just recommended for dynamic or live calculate parameters :slight_smile:
like this
https://www.babylonjs-playground.com/#HJSZ84#40

the full live shader ( more limitation )

https://www.babylonjs-playground.com/#HJSZ84#13
https://www.babylonjs-playground.com/#HJSZ84#19
https://www.babylonjs-playground.com/#HJSZ84#23
https://www.babylonjs-playground.com/#02ZUE0#9

font maker : https://jsfiddle.net/9uztL1r0/23/

3

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"]
      })
2 Likes