astiopin / sdf_atlas Goto Github PK

Hi,
First of all, thanks for a great way to draw fonts in webgl. I've put it into my webapp, but I would like to generate glyphs on the fly as well. Is there an implementation of the glyph generation in javascript ?
If there's not, I'll try to translate a version of it into javascript? would that be ok ?

Thanks,
Sigurd

Is this project alive? I'm implementing this now in javascript (would be nice to get a sign the project is still alive)

I noticed a minor speed improvement
in sdf_gl.cpp

using stencilOpSeparate

	if (true){
		gl.stencilOpSeparate(gl.BACK, gl.KEEP, gl.INCR_WRAP, gl.INCR_WRAP);
		gl.stencilOpSeparate(gl.FRONT, gl.KEEP, gl.DECR_WRAP, gl.DECR_WRAP);

		gl.drawArrays(gl.TRIANGLES, 0, fcount);

	} else {
               gl.enable(gl.CULL_FACE);

		// Front face (CCW) increases stencil values
		gl.cullFace( gl.FRONT );
		gl.stencilOp( gl.KEEP, gl.INCR_WRAP, gl.INCR_WRAP);
		gl.drawArrays( gl.TRIANGLES, 0, fcount);

		// Back face (CW) decreases
		gl.cullFace(gl.BACK);
		gl.stencilOp(gl.KEEP, gl.DECR_WRAP, gl.DECR_WRAP);
		gl.drawArrays(gl.TRIANGLES, 0, fcount);

		gl.disable(gl.CULL_FACE);
	}

I am exporting all glyhps from the noto sans regular font and the following glyphs are not exported correctly (unicode char points):
42609 600 740 42564 641 661 694 705 43840 757 11842 11841 43867 43003 43004 8271 8267 8276 8515 11822 42565 42581 42592 42593 65063
This is due to the fact that the orientation of the glyph (or part of a constituent path) is counter-clockwise.
All of these glyphs have a mirrored counterpart so I assume the font designer wanted to save some time and simply used the reverse glyph path.
Solution: Since the vertices are batched I did not want to change the rendering part. However, it is possible to determine the orientation of each subglyph and - if counterclockwise - loop through the path commands in reverse order.

A few glyphs are exported with artefacts. This problem is really strange because the artefacts have a width of one pixel only. For the below example I also checked the path stored in the font and it is correct. The error occurs on a long line segment, nothing fancy so I have no idea what is going wrong.
I used the following font
noto-sans-regular.zip
with -rh 43 -bs 5
on an Intel HD Graphics 5500.

First of all I totally admire the work done in /sdf_atlas and /webgl_fonts. It solves a very complex problem with relatively simple means, really ingenious! Because it has been extremely useful to me I want to share some thoughts:

• You scale the font metrics in such a way that ascent + abs(descent) equals the row height (without SDF borders) in texture coordinates. This is a smart way to save some multiplications when using the export for text rendering because the font metrices and the texture coordinates can make use of the same scaling factors. However, I find it a bit counterintuitive to combine texture units and font metrics already in the export. I personally prefer scaling the font metrics so that ascent equals 1. This makes the text layout itself easier for me because I only need to multiply by the font size in pixels to get the font metrics in terms of screen pixels.
• I think a useful option would be to add the option to export ALL found glyphs in a font.
• Currently, all glyph textures have the same height. This may be suboptimal when a glyph does not occupy the full row height. I would like to calculate the exact bounding box height of the glyph and export not only bearingX but also bearingY. This format is also more flexible once someone wants to use rectangle packing to fit more glyphs into a texture.
• I am also considering to change the export for faster look up in javascript (may need more benchmarking): make all object keys numeric, i.e. use the code point of the char instead of the char itself. This also means that I am storing the kerning pairs in nested objects with the left and right char code point as separate keys.

I have implemented these ideas locally.

Since you're active I'll take the oportunity to mention one thing that troubles me. There are some issues with the first stage of glyph drawing when I use fonts with slightly rounded edges corners.

I've managed to fix it, but not entirely by using GL_MAX blending instead of depth testing. Te artiffacts just moved to the inside of the glyph edge.

Probably related #1
At least for the font I am using (Arimo-Regular.ttf) I had to fix the following issues to make the kerning work for me:

• From https://www.freetype.org/freetype2/docs/glyphs/glyphs-4.html : "They also use glyph indices, not character codes." The tool however interpretes the values as character codes. I created an inverse map of "font->glyph_map" to look up and export the actual character code.
• First and second character in a kerning pair are swapped.
• Factor "scalex" is not applied to kerning.

Remarks:

• Another small modification to the demo (astiopin/webgl_fonts) was needed. The kerning is not considered for moving the pointer position in the horizontal direction. I will create a separate issue for that.
• The current implementation can screw the text layout when for a displayed pair of chars their char code matches random glyph indices from the kerning table. In this case - due to the wrong scaling - the second character was shifted by multiple character widths.

In the function "load_ttf_mem" a factor
float scale = 1.0f / em_ascent;
is applied.
I think it is missing for glyphs that have left side bearing only and
glyphs[ iglyph + num_glyphs ].left_side_bearing = ttf_i16( pos );
should be changed to
glyphs[ iglyph + num_glyphs ].left_side_bearing = ttf_i16( pos ) * scale;

Apart from that, I doubt that this factor is necessary in the first place. Setting it to one gave me the same export.

LNK2005 "char const * const line_fsh" (?line_fsh@@3PEBDEB) already defined in sdf_gl.obj line_fsh.obj
...

Quick fix: Adding static before the following variables:
const char *line_fsh
const char *line_vsh
const char *shape_fsh
const char *shape_vsh

I am not a C++ expert. Maybe I have just messed up something with the includes.

Some kerning pairs are not present in font.js file. For example Va Ve Wa We AV etc.
Additionally some fonts are not producing any output like BarlowCondensed-SemiBold.ttf
Update: Barlow condensed 1.408 didn't work, but a newer 1.422 downloaded from github worked, odd.

In the function "load_ttf_mem" I think the indices in the for loop in line 662 (rest of glyphs with left side bearing only) has to be changed from
iglyph + num_glyphs
to
iglyph + num_hmtx
.

Hello, I somewhat ported your work to a WebGL2 implementation and it worked flawlessly at building SDFs real time for my mapping engine. Really really cool. However, I want WEBGL1 compatibility for mobile and it turns out not all mobile devices support the gl_FragDepth extension.

Is it possible to tweak the fragment shader to not need fragment depth? I can't currently think of a way, since the quads overlap quite a bit, but I figured you had more time to research this subject and had some less efficient methods you came across.

Thanks,
Craig.