#MSDF-text-three - Render texts and Text Areas

9 messages · Page 1 of 1 (latest)

eager locust
#

Hello,
I have always found MSDF text interesting, and now I made my own MSDF renderer for three-js.

MSDF text is a technique that was mostly popularized by Valve and the implementation of Chlumsky.
It lets you render text at very high quality, regardless of zoom levels.

It is made entirely in TS and uses Three.

The libraries solves the following issue :

  • Rendering text in 3D is a pain
  • Text rendering is not really hi-fidelity
  • MSDF comes at the cost of having artefacts at small scale --> solved by using a better shader.
  • Other libraries do not instances per letter their text. Meaning each text is a draw call. 1000 texts, 1000 draw calls this is hard on the GPU
  • <textarea> is good in HTML/CSS, but what about NoteBox ? My equivalent of this HTML, includes resizing, auto-layout, colors, cursor editing, Z ordering...

I am instancing each letter, and drawing all of the text in one pass, you can render about 1 Million characters at 60 fps while moving/panning, on an IGPU.

Instancing each letter also means we can have pretty cool effects, typwriter, hacker, gradient... (see Effects Showcase on the demo !)

Take a look at the demo here

Repository is here

or install it via npm i msdf-text-engine

Have a nice day :)))
Feel free to give me feedbacks.

image.png
soft creek
#

I see you put MIT license at the bottom of the Readme but could you add it as a file in the repo?

eager locust
#

if you find it useful, or have bugs feel free to let me know :)

soft creek
#

Awesome! Thanks for making this

eager locust
#

No problem man ! Hope you like it, feel free to use it,

If you like crisp text even at small scale, this is the library for you
I find it better fidelity at small scale than three-msdf-text
and obviously it will be much more perfomant. thanks to instancing

#

If you do use it make sure to send screenshots if you want ^^

eager locust
#

I have updated the package with scaling of the Note boxes, as well as selection events, and focus support (avoid your main APP shortcut to interfere while typing in the note box)

steady lynx
#

does it has react-native support or plan to support react-native (expo)?