The difficulties of displaying math symbols

I want to display math symbols (equations, matrices, etc.) in order to teach math so that learners can see math derivations and live results. Babylon.js doesn’t seem to have a loader to load MathML. So, I try to use SVG symbols, which are produced with tools such as MathJax. But, SVG is used in Babylon.js only as a texture, isn’t it? If so, that won’t be flexible enough to make a math learning animation.

I went to our good neighbor three.js to try its SVG loader. Unfortunately, however, it does not fully support SVG, leaving out tags such as “defs”.

Any suggestions?


1 Like

you can draw svg on canvas(ctx.drawImage(image, 0, 0)), then use it as a texutre( gl.readPixels or canvas.toDataURL), and update it as you need.

or you can get the coordinate from pickInfo by BJS, then put a html <div> there, then you can render math symbols as same as on a web page.

1 Like

Hi @DevelopDaily and welcome to the forum. Here is a rather crude use of a div to display MathML

DevelopDaily, I like your mission.

I developed MeshWriter, and used it to support SVG symbols. You can see an example of that at this playground.

The Chinese characters were extracted from normal font files but the anchors were taken from SVG. They were both put in a font family, “Web-dings”. (Alas, turning SVG into letters is not automated.)

Also, I was unsure of what output you wanted. Your comment about textures not being flexible enough confused me a little. It might help to be able to visualize your target layout.

1 Like

I’d like to change SVG objects in the scene as any other geometric objects. Here is a sample SVG, which is generated by the MathJax. (2.5 KB)

@hjlld Do you mean I put a

as an overlay over Babylon.js scene (canvas)? But an html
cannot zoom and rotate together with the scene, can it?

hi, if you want to rotate/scale/translate math symbols as a 3D object in BJS scene, you can draw svg on canvas( ctx.drawImage(image, 0, 0) ), then use it as a texutre( gl.readPixels() or canvas.toDataURL() ), and update it as you need.

DevelopDaily, let me try to break this down. In 3D parlance there are two theoretical things you could seek to do:

  1. Make a mesh out of an equation, like MeshWriter does for fonts
  2. Put the equation on a texture

Think of a texture as being like a decal. It can be affixed to any mesh. A racing car or, in your case, a chalkboard(?).

There is a general-purpose way to put an image into a texture. SVG “images” work great for that. I have done it many times. So in your application, the SVG could be put on a rectangular mesh and placed anywhere in the scene.

In that example, I turned your equation SVG into a dataurl and created a mesh with the same proportions as the SVG. That’s option 2.

Option 1 is harder. I have been interested in that for a long time but I suspect that is not what you want.

Meshes are first-class citizens in 3D. You can move them, size them, rotate them, light them and animate them. With the appropriate material, you will probably get what you want.

1 Like

Indeed, both options can serve my purposes. You guys are very helpful. Thanks.