FontLoader + Font.generateShapes and ccw / negative winding glyphs, automatic fix?

Questions
,
1

Ran into an apparently common issue earlier where glyph curves’ are arranged in reverse with certain fonts. Running Font.generateShapes on these fonts results in text with holes and some inverted looking text.
I looked at FontLoader.js and tried adding a line to detect these problem glyphs.

generateShapes( text, size = 100 ) {

	const shapes = [];
	const paths = createPaths( text, size, this.data );

	for ( let p = 0, pl = paths.length; p < pl; p ++ ) {
		var isCCW = !ShapeUtils.isClockWise( paths[ p ].subPaths[ 0 ].getPoints() );
		shapes.push( ...paths[ p ].toShapes(isCCW) );
	}

	return shapes;

}

Seems to work perfectly now. Wondering why this isn’t implemented.

1 Like
2

Its not the default because sometimes people need to generate interior/flipped faces etc.

You might be able to “solve” this just by using material.side = THREE.DoubleSide instead.

3

Using DoubleSide wouldn’t work. The geometry itself is the issue. If you try and generate shapes with fill + holes with inconsistent winding orders then the result will be bad geometry.

Unfortunately after further testing I found my ‘fix’ was screwing up with certain glyphs on a particular font, where I guess the winding order was different to the rest of the glyphs.
Not sure why the CCW detection doesn’t appear to work here though.

So is there a one-size-fits-all way to convert any kind of font to shapes that doesn’t result in wrong geometry?
Currently I just have to flag certain fonts as being CCW.

4

Can you paste in some screenshots of the bad geometry?

I’m not sure how a clockwise detector could detect winding on the letter C for instance… and… running such a detector by default would probably slow down the tessellation algo for a large subset of cases that don’t care about winding.

If you’re only using geometry to get crisp font outlines, would SDF (signed distance field) fonts be an option?