Text as polygon mesh

[The Leftover]

In Q&A, I had looked for help building a utility to dynamically generate polygon meshes in the form of text.  Got some advice.  Thank you Gijs.

Here is a rough cut after a few more hours on it.  https://www.babylonjs-playground.com/#PTTMVI#67  It seems that this can be done as a general tool with colors, sizes and multiple fonts -- not to mention a full alphabet.  I need this for my own purposes.  Not sure whether there is other demand for this.  Comments solicited.

 

[The Leftover]

https://www.babylonjs-playground.com/#XWVXN9#5

Preview version.  Comments welcome.  Thanks to Gijs and JohnK for technical advice.

The impoverished version is here with some glyphs in two fonts.  Because of some finickiness in polygons, I am still hand building them.  IF YOU SPECIFY A CHARACTER WITHOUT A SHAPE, IT WILL RENDER NOTHING.  Hiruko-Pro has most of the alphabet.

I probably don't do colors or orientation the way you want but there are easy methods to get the mesh and material and change them as you see fit.  Reminder:  new Type() returns an object and inserts an SPS into the scene.  Interim meshes are disposed.  This means that material, position and orientation may be changed with one action.  The whole string is turned into a mesh which will have uniform qualities.

I am open to bug reports and suggestions but promising *nothing*.

Next week, I will have a more complete version.

[Wingnut]

Absolutely gorgeous and SO COOL!  Oh man!

Folks think I talk too much in 2D (forum posts).

Wait till they see me fly 3d words/sentences!

3D words can be WAY MORE expressive than 2D words!

YUM!  

Ok, let's see... a "war of words"... hmm... becomes a whole new thing, eh?    Heat-seeking nouns and laser-guided verbs!   Adjectives with objectives.

Thx TL... this is very nice!  I bet I can crash my browser with it... by midnight (4.5 hours away).

So, oh man... a "tangent" (from a topic) is now an actual direction vector!  Space-scroller angle adjustment.  heh.

Dangling participles... might REALLY "dangle"!  WOW!  It's a new dawn!  Fun!

I think almost all student reading... especially in younger years... might be done with 3D fonts... in the future.

The student will be sitting on a stump in a VR woodland... enjoying the animated colorful antics/dancing of the "sentences" traveling the nearby grassy paths (path-scrolling words).

It will be the most enjoyable way to read almost anything (in the future).  YUM!  I predict so.

I suppose we need some human ear models, so we can make our words "go in one ear, and out the other"  (words ignored by the listener).  Or "fall on deaf ears".  Expression!  Make kids laugh as they learn.  Then they'll seek that learning on their own... and maybe I'll even read the BJS docs.

Let's see, texting in VR?  Probably the same... message will fly out of the sunset, over the snow capped mountains, across the meadow and lake (full reflections, of course)... and come to hover in front of the eyes.  Maybe a little dust cloud as these heavy, fat fonts fire their braking retro-thrusters.  The message might have xmas lights strung onto it, or be beautiful chrome/glitter.  Nice.  Not recommended while driving. 

[jerome]

excellent !

[Wingnut]

Hi again!

A bit off-topic, but, I want to give a little tip-of-the-hat to @JCPalmer, as he also did some 3D font work at one time, and I didn't get to play with those. 

I think his 3d fonts were a side-project of a GUI Dialog panel, which was the primary objective.  I don't think he ever fleshed-out his mesh-fonts system, as that was not his objective.  Maybe he'll visit and show/tell more.  I just want to be fair in my excitement spraying.  ALL pioneers and trailblazers of 3D fonts... get a hug from me. 

A hug to @jerome for SPS (and a hundred other innovations/contributions), too.  Core BJS team gets hugs, as well.

Aw hell, I'll hug any developer/innovator who lets me do it.    Thanks guys!

What's that?  You all want lobster dinners instead of hugs?  hmm.  Mostly male dev teams... it figs that they'd want to get some "tail".  :D

[The Leftover]

I built this as a side-project too, of course.  Looking back, I honestly cannot believe I embarked on it.  What possessed me?

As Wingnut says, there was preceding work and there were other approaches available.  I was not at all sure that Babylon needed a fonts module.  The nods I got on the first post on this page and some gesticulations by Wingnut in another area (Wingnut rarely just nods) gave me the necessary impetus. 

[Wingnut]

Aww, that's darned nice of you to say... thx!  It's a worthy cause, for sure.  The curves of font shapes... tend to get vert-heavy... so... a word manager or sentence manager... is likely needed.

Next gen of hardware... we'll be up-to Cray speeds for our home computers.  Then... we can worry less about bog, I suppose.  (duh)

Pretty decent "side project" ya got here, TL.  I like it a lot, as you can tell. 

[Guest]

Hey this could clearly become an extension for our repo: https://github.com/BabylonJS/Extensions

We can then also use the official doc to document your great work!

[The Leftover]

Deltakosh, glad to hear that.  That was what I was aiming for.  Give back, you know.  The repository is here but is very fluid right now.  https://github.com/briantbutton/BabylonType  I will commit to keeping the min (https://sanfrancisco.ca.illuminated.city/js/type.min.js) file hosted and current in case anyone wants to do playground stuff in the interim.

Wingnut, this might astonish you but I did not follow what you were saying about fonts being vert-heavy.  This might relate:  The number of faces in a curve is settable but is hard-coded in the Type function.  (After extensive consultation with numerology, I picked 6.  6 points per curve.)  Some font-families (like Helvetica Neue) have fewer curves than others.  I think a letter, like an 'S' is gonna have something like 100 points going into the PolygonMeshBuilder.

If the letters are small, or more distant, then that is more vertices than visible to the eye.  I don't know how to use LOD.  However, I could expose the points-per-curve setting and recommend simpler fonts.

Did you crash your browser?

[The Leftover]

Also, blanket advisory:  I completely changed the parameter structure going into the new Type() constructor.  Better now than later.

In the unlikely case that someone is experimenting based on the first playground, please update by reviewing the playground link above.

[Guest]

Excellent, send the PR when you want

[Wingnut]

4 hours ago, The Leftover said:

Did you crash your browser?

I didn't start any demented experiments, yet, but thanks for asking. 

I need a game plan (or 10) for those fonts.  I'm thinking about... animating some single characters... flying them into place... to form words.

https://www.babylonjs-playground.com/#HH1U5#70

There's some little easy-animators in there... that run on a "schedule" (lines 118-148).  I think I can "fly" some characters/letters into place...  spinning, moving, scaling, coloring.  FUN!

Then there's texturing.  We have a few animated textures... like lava and fire, etc.  Those will add some "spiffy".  Then godrays/volumetric lighting and other 2D post-processes.  I think... it won't take too much "gaudy" to drop the FPS to a crawl.    We have "particles from verts" that someone made for us...

https://www.babylonjs-playground.com/#2A4NUR#6

That should bog us down some more, if used on font shapes. 

Not sure, yet.  I need to learn stuff.

[The Leftover]

Yes.  I think some animation would be cool.  "dangling participle" comes to mind when I am least expecting it.  I see the playground and understand your direction.

I should also mention that I took your approach of changing camera focus.  A different channel but I will show you when it is done.

[Wingnut]

https://www.babylonjs-playground.com/#XWVXN9#7

My thickness isn't working.  hmm.   Likely Wingnut mistake.

I'm thinking about trying some physics/boxImpostors... bounce a few words on the ground... see what happens.

Might be fun.   http://mrdoob.com/projects/chromeexperiments/google-gravity/

(drag any node among other nodes... to "toss the salad").

Ours will be better, of course.  (ahh, competing, gotta hate it)   For those unaware, mr doob is professor of 3js, our loving neighbor.

[The Leftover]

Sorry.  "letter-thickness"

https://www.babylonjs-playground.com/#XWVXN9#8

[Wingnut]

Ahh, thx!

https://www.babylonjs-playground.com/#XWVXN9#10

Uh oh... I'm startin' to have fun, and it smells addictive. 

unh, PG suddenly failing after reload.  hmm.

Oh, I know why.  Need to wait until stuff exists.

https://www.babylonjs-playground.com/#XWVXN9#12

Globalized text1 for time being.  Still learning. 

Nope, still broke after reload.   text1 is undefined.   Gotta click RUN again. 

I'll figure this out.  A little "scope" wrangling needed.

[jerome]

Wooaww, ultra-nice feature.

I understood that this relies on a SPS under the hood. Is each solid particle a word or a letter ?

[The Leftover]

Jerome, thank you.   Short answer: each string results in one SPS, one material, one mesh.

Each letter is its own mesh, initially.  In the very last step, Type merges all of the letter meshes into one SPS with its own mesh and disposes of the ingredients.  That's only needed if you want to rotate or move the string in the scene.  I assumed that is a likely use case, (lookin' at you, Wingnut) so I built it that way.

I just realized there are other ways to merge meshes . . . but when I built this, I was most familiar with SPS.

 

Wingnut, I see you figured it out.  Cool!  That was the kinda stuff I wanted to do for a demo . . . but am not familiar enuf with Babylon . . . .  The issue with loading is presumably specific to the way I spliced this onto the playground.  The handy thing is to have everything triggered by writer().  https://www.babylonjs-playground.com/#XWVXN9#21

[Guest]

Can wait to have it in the doc!! a lot of people will be interested

[jerome]

Woooawww ... assuming that each string is one SPS, I suppose then that each character within this string is a solid particle. This would great as we could access each character to change its size, rotation, position, color, uvs inside the string

and even animate some (or all) the characters in the string !

[jerome]

it works !

https://www.babylonjs-playground.com/#XWVXN9#22

[The Leftover]

Excellent!  Of course!

[The Leftover]

On 5/23/2018 at 5:52 PM, Deltakosh said:

Excellent, send the PR when you want

Deltakosh, you will have one late next week.  What do I need to know in terms of form, convention and ceremony?  The current repo is here:  https://github.com/briantbutton/BabylonType

[Wingnut]

https://www.babylonjs-playground.com/#XWVXN9#26

Playin' with the pivot.    I wish I had a handy boundingBox.center for "second"... so I wouldn't need to hunt'n'peck for an accurate .pivot (line 60).  Still... FUN!

Yeah, TL, your house on Lake Babylon is almost done... and so is your "Extensions Laboratory".  The workers are finishing-up the whirlpool/hot tub/sauna "bath house" and terrarium. 

Of course, once you put up your "mesh-fonts lighthouse" for guiding other boaters on the lake... you have to keep its light burning... forever.  Others will count-on that lighthouse... for safe navigation thru the rocky webGL waters. 

[The Leftover]

Pretty funny illustration of the principle, Wingnut!  You and Jerome keep wanting to play with individual letters despite my insistence it is all one SPS.  Not much for coloring inside the lines, eh?     ?

Interestingly, the original font data has a bounding box which I have faithfully put into the Babylon format.  This example brought to you by the letter A.

    hnm["A"]                     = {   /* done */
      shapeCmds                  : [[[122,0],[-7,0],[267,714],[400,714],[675,0],[541,0],[474,189],[189,189],[122,0]]],
      holeCmds                   : [[[[334,591],[331,591],[223,284],[441,284]]]],
      xMin                       : -7,
      xMax                       : 675,
      yMin                       : 0,
      yMax                       : 714,
      width                      : 667
    };

The only thing I use right now, other than the shape, is the width.  I suppose V1.1 could have some support for individual letters.