Draw text with css effects

Questions
1

I have been looking into text rendering, I am used to using font textures in other things I have worked in, but it doesn’t seem like that stuff is supported in babylon (unless I have totally missed something).

The dynamic texture draw text seems to be the way to handle things. So that then brings about some questions in relation to that:

Can I specify a font from a ttf file? it looks like I can define a font family in css and reference the ttf file using that, am I correct in this assumption?

How do I go about styling the text using CSS effects like the ones on this page for example? is this even possible?

2

This is correct :slight_smile:

For styling unfortunately, this is not quite possible as we only get the font from CSS

3

When you say not quite possible, does this mean theres a non simple way to do something like that?

Is it possible to use a bitmap font texture instead? I just came across the canvas2d extension which seems like it has that functionality, but I am not sure if thats compatible with the current versions of babylon

4

Correct. You can do any kind of pixel manipulation on your test after writing it but it will be manual.

For font texture this is not directly supported but you can build your own font mechanism using sprites

5

Are there any resources around for doing this sort of thing?

I know the Canvas2D extension is not officially supported, but will it still work with babylon 3.3? and if so, is there a guide to link in the extension, all the documentation links seem to point to nothing

6

@Deltakosh I came across this resource page would it be possible to combine pixi and a dynamictexture object to do some 2d rendering including text on that texture, which I could then apply to a mesh in my scene?

7

Hi guys. Sorry to butt-in. Shurp… check this out… https://www.babylonjs-playground.com/#11JINV#58

There are some GUI fonts that are continuously being re-painted with blocks of random colors. It is VERY slow, of course. Line 209 repeatedly calls paintIt(). In paintIt() line 180, it checks the (a)lpha of each color4 pixel on the ‘texture’. If NOT alpha = 0 (transparent)… then I randomly color.

I believe I TRIED to map a standard texture… into the fonts… and I believe I hit a security wall. I did this playground a long time ago… and I forgot things. But, it is a good playground to experiment-with. See this link… for information/spec about what can/can’t be done… on a context2d canvas.

Here’s a playground that draws some text on a ground texture: https://www.babylonjs-playground.com/#16Z24R#17 It doesn’t use dynamicTexture’s handy drawText feature, but it still does fine.

A playground search for ‘drawText’ finds MANY examples.

Here’s one of those examples… https://www.babylonjs-playground.com/#1390ZN#6 (see line 46). The drawText feature of dynamicTextures… sort-of “automates” much of the activity done with the previous #17 playground (code lines 17-33).

Ok, I’ll butt-out, now. I hope I have been helpful. You have more tools to blow-up stuff-with, now. :smiley:

For @nasimiasl … Hello, my shader-God friend. Would you know-of a way to fill all white text in this PG #64… with a single picture/image? That would be sweet! Static image is fine, but extra credit for animated png, or video, or renderTargetTexture fills. :slight_smile: Thanks for your (or ANYONE’S) thoughts/ideas.

8

Yes this is totally possible. You can definitely use pixi for that!

9

@Wingnut omg that fuzzy colored text is crazy, I will definitely have a look through these playgrounds.\

@Deltakosh I had a play around with pixi and the dynamic texture stuff yesterday, but I couldnt manage to get the pixi output to apply to a plane, it just ended up always drawing in front of everything. I’m sure I probably missed something, but is there anything you can point me towards that might help me out with that?

I really appreciate the help, I’m having fun working through the issues im stumbling across as I go

10

that is what i love do that big and useful challenge :wink:

task started
https://www.babylonjs-playground.com/#HJSZ84#37
https://www.babylonjs-playground.com/#HJSZ84#39
https://www.babylonjs-playground.com/#HJSZ84#40

2 Likes
11

COOL! Wow.

But, you know… the actual challenge was to display a picture… spanning across all of the white area of the fonts. Something similar to this and this… but for GUI fonts.

(Might be off-topic of Shurp’s wishes - I hope he/she doesn’t mind)

I love what you are doing with these PG’s, though, Naz. Advertising agencies WILL be calling you soon. :slight_smile:

12

I don’t mind, these things are pretty interesting

1 Like
13

I do not know pixi enough unfortunately. Perhaps you can try to ask on their forum? The dynamic Texture is literally a canvas so this should work

14

I am trying to load in a ttf file at the moment, just to get custom fonts working, and I will worry about fancying it up later.

i have added this into my index.html file in the style block

@font-face {
font-family: “Chalk”;
src: url(“assets/font.ttf”) format(“truetype”);
}

when I try to use the font family name in a text block object, it doesn’t use the font, do i need to do anything to trigger the font to load? or am I setting the font up wrong?

15

Does the font work on a regular html page?

1 Like
16

It does appear to work in a regular html page yes.

I am setting the fontFamily property of my text block to “Chalk”, but the font isn’t loading.

I am also not seeing any errors or anything when loading the page up. I am unsure what is happening

17

And you are setting the textBlock.font = "Chalk" in your code?
Can you share a page that repro the issue? this should work :slight_smile:

18

it seems that Google Chrome was the issue, as the font loads up fine in Firefox, I thought Chrome had support for ttf fonts, i might have to try another format maybe

Edit: looks like other formats arent helping, the font loads up fine in firefox (although it doesn’t display initially, after a refresh it shows up), but Chrome is just using a standard font instead. the font shows up fine in a regular HTML page using both Chrome and Firefox. Would it be an issue of caching the font initally, is there a way I can force the font file to load before everything else is created?

More Edit: I have looked more into the caching, and it seems like if i add a h1 line using the font, above the canvas definition in my html file, then the font will load in babylon just fine, even in Chrome.
However, if that h1 line is added after the canvas definition, then the font doesn’t load like before. it would seem like Chrome is just falling back to a default font because the custom one isn’t ready when its needed in babylon maybe?

19

That may be the issue but as we are using regular canvas order for that one it should work.
You may face a race condition though. Like the canvas tries to use the font but it is not yet downloaded

20

Thats what I am suspecting, at the moment I am putting everything in createscene, if I set the font on the text block in there, will it attempt to download the file at that point?, and because its not downloaded when that finishes up, I’m guessing that chrome is falling back on a default font instead.

Is there a way I can preload assets before creating my scene?

Edit: after some more googling, and testing, adding this into my html head

<link rel=“preload” href=“./assets/font.woff2” as=“font” crossorigin=“anonymous”/>

forced the font to preload and it now renders correctly in Chrome :slight_smile:

it did require the crossorigin=“anonymous” though if that is not in there it doesn’t seem to preload, even if its not a cross origin link