Canvas2D: SignedDistanceField fixes

Rendering quality improved (better antialiasing), baseline and clipped letters bugs are fixed.

canvas2D/src/shaders/text2d.fragment.fx

@@ -18,8 +18,8 @@ void main(void) {
 	//float edgeWidth = 0.7 * length(vec2(dFdx(dist), dFdy(dist)));
 	//float opacity = dist * smoothstep(edgeDistance - edgeWidth, edgeDistance + edgeWidth, dist);
 
-	float opacity = smoothstep(0.25, 0.75, dist);
-	gl_FragColor = vec4(vColor.xyz*opacity, 1.0);
+	//float opacity = smoothstep(0.25, 0.75, dist);
+	gl_FragColor = vec4(vColor.xyz*dist, 1.0);
 #else
 	vec4 color = texture2D(diffuseSampler, vUV);
 	gl_FragColor = color*vColor;

src/Materials/Textures/babylon.fontTexture.ts

@@ -131,6 +131,7 @@
             this._context = this._canvas.getContext("2d");
             this._context.font = font;
             this._context.fillStyle = "white";
+            this._context.textBaseline = "top";
             this._cachedFontId = null;
 
             var res = this.getFontHeight(font);
@@ -231,7 +232,7 @@
             // In sdf mode we render the character in an intermediate 2D context which scale the character this._sdfScale times (which is required to compute the sdf map accurately)
             if (this._signedDistanceField) {
                 this._sdfContext.clearRect(0, 0, this._sdfCanvas.width, this._sdfCanvas.height);
-                this._sdfContext.fillText(char, 0, 0);
+                this._sdfContext.fillText(char, 0, -this._offset);
                 let data = this._sdfContext.getImageData(0, 0, width*this._sdfScale, this._sdfCanvas.height);
 
                 let res = this._computeSDFChar(data);