☑ Apply text of string on an object

Help & Support
1

Hello,
still evaluating PlayCanvas for a client project.

Our main critical problem is that the user of the project should be able to:

  • Type a string of text, select a font from a finite set of TTF fonts, apply it on an object and move/rotate/scale it
  • Do the same with an uploaded PNG

I wasn’t able to find anything similar on the forum and documentation but I tried to dig into GLSL shaders (ie. How to render text in modern OpenGL with GLSL). My idea was to create a copy of the object and apply a custom shader to it as per documentation. Or maybe use a shader that supports both a main material and a second material (is it possible? I’m new to shaders).

Are there any examples that may help me on this path? Has anyone done anything similar?

Thanks,
Giulio

2

Hi Giulio,

I have been adding text to my projects. The easiest way I have found is to simply use the HTML canvas object and transfer the canvas to a texture on a material. This material can then be applied to any object.

There is an example project on playcanvas that covers this kind of thing

https://playcanvas.com/project/344078/overview/howto-canvas-text

Have fun

1 Like
3

Thanks!

The solution is working very nicely for me. I managed to wrap the text on multiple surfaces and it’s coming out very nicely.

I’ve forked your project and I’m extending text.js with the features needed for our project (parameters, 3D Text,…)

Thank you again!

G.