Demo of SDF rendered text

https://youtu.be/J8vo2qrKnHk

This is a demo of a Signed Distance Field text rendering with outline, it use a mesh() with a shader.

Wow! Well done, that’s an impressive achievement

Thank you, but the real difficulty is to render a paragraph, I’m on it.

https://youtu.be/aZx0e_gb97Q

Like this, but I forgot to include punctuations.

Would you provide the code? I’d like to test the performance of this vs using bitmaps.

I will when it will be more ready to be shared. What I can tell you about performance is building the text is costly but the rendering is not. It creates one mesh rect per glyph and apply a fragment shader of 6 lines of code. The build is costly because it tries to place all glyphs into a box and if it don’t fit, retry with a smaller font height.

My plan is to support english only, paragraph, alignment, outline, custom sprite and baking to image. I will publish something before finishing all of it anyway.

Ok if it’s any help or relevance to you I have a project on the WebRepo that is called Bitmap Fonts. It uses png images of the font you want so you can use any font you want as long as you make the images yourself.

What is Codea 4? Am I doing that for nothing? :smiley:
Anyway here is some progress, I can now write a text in a box and the font height will adjusted to fit in it. I can only align the box using textMode()
There is a couple of stuff I want to fix and improve before release it.
https://youtube.com/shorts/Qcqst93jMN4

Codea 4 is the next version of Codea. The developers haven’t said when it will be out or given too much info about what will be in it.

Nice! The Codea 4 runtime has SDF fonts as a native feature and they are very nice to have

A demo is available for you to test. There is 3 projects on my github, click on the link to download the zip files and import them to Codea:

  1. a Text project that do the rendering.
  2. a Font project that provide prepared assets for a couple of fonts found on my computer. I didn’t check the license for all of them.
  3. a Demo project that allow to test every features supported by the Text project. You can also checkout the video. https://youtu.be/LFDjpjeBM0I

@moechofe2
It’s not for nothing since it works with Codea 3 natively, whereas Codea 4 has a new API and not everyone will be ready to migrate immediately.

@dave1707
I really want to get it out to you guys for testing, the main hold up is getting the editor integration ready. I also have to write a lot of documentation - in progress here: Codea 4.0 documentation

@John Just looked thru what you have so far of the 4.0 docs. How compatible will the current projects be with Codea 4. Will all the current projects work the same or will some things need to change just like when there was the asset switch. It will probably take awhile to get used to new commands and command formats, but then that’s the fun of Codea.

@dave1707
Some things are more compatible than others. A lot of stuff is pretty much the same, such as the asset system, graphics commands (sprite(), line(), rect(), ellipse(), text()) and callbacks (draw(), setup(), touched(), etc).

Style is different now with a new fluent syntax:

-- Codea 3 API
pushStyle()
fill(255)
noStroke()

-- Codea 4 API
style.push().fill(255).noStroke()

I’ve been working on a compatibility layer so you can do:
`require ‘legacy’:export() which will convert calling conventions back to how they were in 3.0 (where possible)

I’ve also standardised asset loading/saving to be assetClass.read/save(assetKey) so you have image.read(assetKey) instead of readImage(assetKey) etc…

mesh and model are now the same class so you can do mesh.read(assetKey) which works with shaders

I’ve also added support for skeletal meshes and I’m about to add animations (imported directly from glTF, fbx etc). Also looking into USD support down the line.

shader and material are now compatible with each other and meshes, so you can create and reuse a shader with different parameters in multiple materials (I’ll explain this in the docs as well).

The new syntax lets you just go myMesh.material = material.lit() and you have a mesh with lighting. You don’t have to use scenes at all to get lighting since you can now just do light.push(light.directional(0,-1,0)) but you do need scenes to have shadows (yes we have shadow mapped shadows now.

I’ll begin writing a section in the online docs to make a note of these differences so it’s all written down somewhere. I’m also planning on having a few dozen new heavily commented tutorial projects called “Learn to Codea” which will have various incremental topics that cover existing and new features.

It’s been a lot of time/work while I also work at my day job full time as a lecturer so I appreciate everyone being so patient :blush:

@John Looks like it’s going to be a lot of fun. Lot of new stuff to learn and experiment with.

@Simeon - 4 looks interesting. On the asset front are we still restricted to the current asset system or will project folders contain real code, so we don’t have to construct them for external use by zipping them and exporting.

@moechofe2 i got around to testing runtime performance and this is way better than my bitmap font, probably because of the shader used. on my version i have a mesh for each character and have to apply some blurring for smaller fonts to get them to be anti aliased but on yours the font scale works nicely to not have jaggies on smaller sizes

now i’m stuck between trying to refactor your SDF font to fit into my framework or wait for codea 4 lol
or
maybe i can make mine faster by using a single mesh and instance rendering of each character, might be too much trouble to make it work though if all i have to do is wait for codea 4

@moechofe2 can you let me know what tool you used to generate the fonts png and json files?

@skar, I think you should refactor your’s by using only one mesh, it a pretty nice thing to have in your tool belt, it help a lot in Codea for solving FPS issues.

I’m using https://github.com/Chlumsky/msdf-atlas-gen to generate SDF font with a bash script. My first try was to use the method elaborate by this guy about a multiple channels signed distance field, but the results was meh