LaTex like fonts

[flavioschneider]

Hi Felix! Love this library. I was wondering if you have any idea on how LaTex like fonts for math notation could be integrated with this library, for example see https://katex.org/. I've done some research on how to build a custom MSDF fonts, but I'm still not sure if it is possible to have composable characters in any way (e.g. integration or summation symbols). Thanks!

[felixmariotto]

Hi @flavioschneider, thank you for your interest in the lib. Complex math notation is is a tricky use case !

I think it's possible though, but you may have to manually write the characters definitions in the font JSON.
Here is a short article I wrote for those who want to create their own fonts for three-mesh-ui. I recommend using donmccurdy's generator, which is a wrapper around this package.

Here is the content of the JSON generated by the font generator for the font Roboto with just the letter "a" :

{
	"pages": ["Roboto-Medium.png"],
	"chars": [
		{
			"id" : 97,
			"index" : 69,
			"char" : "a",
			"width" : 23,
			"height" : 27,
			"xoffset" : 0,
			"yoffset" : 11,
			"xadvance" : 23,
			"chnl" : 15,
			"x" : 0,
			"y" : 0,
			"page" : 0
		}
	],
	"info" : {
		"face" : "Roboto-Medium",
		"size" : 42,
		"bold" : 0,
		"italic" : 0,
		"charset" : ["a"],
		"unicode" : 1,
		"stretchH" : 100,
		"smooth" : 1,
		"aa" : 1,
		"padding" : [2,2,2,2],
		"spacing" : [0,0]
	},
	"common": {
		"lineHeight" : 44,
		"base" : 34,
		"scaleW" : 256,
		"scaleH" : 256,
		"pages" : 1,
		"packed" : 0,
		"alphaChnl" : 0,
		"redChnl" : 0,
		"greenChnl" : 0,
		"blueChnl" : 0
	},
	"distanceField" : {
		"fieldType" : "msdf",
		"distanceRange" : 4
	},
	"kernings" : []
}

What matters for you here is the content of the chars property. You can play with the yoffset and xoffset properties of each characters to position them, and have a copy of every character with different width, height, yoffset and xoffset to write them as exponent.

However you may have to make a PR to add a little feature, which I would gladly merge. There is currently no support for character horizontal offset, the horizontal positioning is computed from the char width. Related issue : #22

This is where the lib computes each character anchor point.

anchor is currently a float representing the Y offset, it should become a THREE.Vector2 and contain horizontal offset information.
Horizontal offset would be based on the xoffset character parameter contained in the JSON.
This is the module responsible for positioning the inline characters, it would need to be updated to support the new vector2 anchor and its x value.

[flavioschneider]

Thank you a lot for your extensive answer! So from what I understood, each letter must be hard-coded again in the exponent position in the JSON file if we want to use it that way? This seems like a lot of work and a bit inflexible, what if we want exponents of exponents do we have to define the characters a third time?

This might be less relevant, but I'm used to the SVG world where each symbol can be defined by a path and also easily animated, repositioned, etc. I've been researching for a few days if there is a way to do something similar. It would be so cool if we could build interfaces in 3D the same way we do in 2D, with vector paths and everything.

I'll take a more in depth look at your library to try to understand it better, also maybe custom shaders can help with what I'm trying to do.

[felixmariotto]

There is another easier way, but it's a bit dirty : https://jsfiddle.net/felixmariotto/je154fsa/

Basically three-mesh-ui elements inherit from THREE.Object3D, and use Object3D.position to layout the elements. Therefore it's not advised to manually set the elements position, because three-mesh-ui will override it everytime you call ThreeMeshUI.update(). But if your use-case is not very interactive you don't have to call ThreeMeshUI.update() every frame, you can call it once you instanctiated all your elements AND your font is loaded. This way you can tweak the layout as you wish afterwards and three-mesh-ui will not override it.

So you would have to write a wrapper around three-mesh-ui, whith its own update function that call ThreeMeshUI.update() then apply transformations on exponents and such.

[felixmariotto]

This might be less relevant, but I'm used to the SVG world where each symbol can be defined by a path and also easily animated, repositioned, etc. I've been researching for a few days if there is a way to do something similar. It would be so cool if we could build interfaces in 3D the same way we do in 2D, with vector paths and everything.

I'll take a more in depth look at your library to try to understand it better, also maybe custom shaders can help with what I'm trying to do.

This is hardly related to characters layout, the point is that three-mesh-ui must know where should your character be and what is its size, in order to compute the line height, length, know where to line break, etc...