Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Demo of SDF rendered text

in Examples Posts: 35

https://youtu.be/J8vo2qrKnHk

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

Comments

  • SimeonSimeon Admin Mod
    Posts: 5,778

    Wow! Well done, that's an impressive achievement

  • Posts: 35

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

  • Posts: 35

    https://youtu.be/aZx0e_gb97Q

    Like this, but I forgot to include punctuations.

  • Posts: 308

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

  • Posts: 35

    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.

  • Posts: 308

    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.

  • JohnJohn Admin Mod
    Posts: 762

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

  • Posts: 35

    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

  • dave1707dave1707 Mod
    Posts: 9,977

    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.

  • Posts: 35

    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.

  • JohnJohn Admin Mod
    Posts: 762

    @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: https://johntm.github.io/Codea4-Docs/

  • dave1707dave1707 Mod
    Posts: 9,977

    @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.

  • JohnJohn Admin Mod
    Posts: 762

    @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:

  • dave1707dave1707 Mod
    Posts: 9,977

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

  • edited April 22 Posts: 2,689
    @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.
  • edited April 30 Posts: 308

    @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

  • Posts: 308

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

  • Posts: 35

    @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

Sign In or Register to comment.