3d text geometry generator

Help & Support
#1

I am currently evaluating the feasibility of being able to generate 3D geometric text from a text field.

A few people have asked for this need in the forum in the last years:

I also discover that Three.js can do something similar: Procedural 3D text

I’m good with Javascript but have very little to zero experience generating 3d mesh by code. Tessellation and converting fonts to 3D from scratch seems too big a challenge for me.

My fallback solution is to create the text geometry in 3DS Max and imported it into PlayCanvas, but this doesn’t give me all the flexibility I need.

My project is to let the user create their own trophy with 3D text similar to this image:

image
image920×400 63 KB

Do you have any suggestions or possible solutions to meet my needs with Playcanvas?

#2

That’s a hard one, not sure if there exists any other way of doing this apart from implementing a 3D text -> mesh generator in Playcanvas.

You can definitely give it a try, porting the Three.js class to Playcanvas but as you said that isn’t an easy task.

@Mystik definitely add a feature request to the engine repo about it.

1 Like
#3

Thank you for your feedback. I’ll post this as a feature request.

1 Like
#4

Thank you for submitting the feature request, @Mystik.

I have attempted to implement this for you. Here are my results so far:

textmesh

What do you think? Are there any missing features that you would like to see?

10 Likes
#5

Small update. I’ve been experimenting with applying tweens to individual characters. So you can do things like this without having to write a single line of code:

animation2

9 Likes
#6

Wow this is amazing!

  • I wonder if your textmesh script can handle specials characters (Latin supplement).
  • Is this possible to adjust the spacing between each letters?
#7

Latin-1 Supplement characters work just fine (providing they are present in the TTF file):

image
image973×369 55 KB

The current text-mesh.js script only lets you enable kerning at the moment. But I can probably easily add:

  • A slider between 0 and 1 for kerning to allow for more control.
  • An additional constant padding value to further space characters.
5 Likes
#8

Is this what you want, @Mystik?

spacing4
spacing4768×432 1.83 MB

3 Likes
#9

@will
can you send a link so i can use that? It’s so cool!

#10

@Gavin_Durbin The project is here:

https://playcanvas.com/project/755330/overview/3d-text

But it’s currently in development. I’m trying to ‘productize’ it and check it in to the engine repo at the moment.

3 Likes
#11

cool

#12

It is more than what I need! :heart_eyes:

1 Like
#13

I see this made it into the repo, but I don’t see it in the editor anywhere?

#14

It’s an external script, not part of the engine so you just have to upload/copy the script code to your Editor project.

FYI, to upload a .ttf as a binary, you have to first rename the file to .tff.bin, upload the file to PlayCanvas and rename the asset to .ttf again in PlayCanvas. This avoids the import conversion that we do in the Editor when you normally upload a .ttf file

1 Like
#15

Office Hours video on how to use the script from the engine:

Link to the engine text mesh generation scripts: engine/scripts/textmesh at main · playcanvas/engine · GitHub

Project: engine/scripts/textmesh at main · playcanvas/engine · GitHub