Text as polygon mesh

[Wingnut]

Can do.  I guess... what I do... is clone the BJS docs repo... into my personal docs repo... using the "fork" button. 

Later, you use the "compare" button, and then the "switch bases" and then "merge"... to "freshen" your personal docs repo... before you do further edits on any docs.  The BJS docs repo will get ahead in commits... while your docs repo sits idle for months.  This action will update YOUR repo... to be even-with the BJS docs repo.  In fact, your repo should report being one commit AHEAD-OF the BJS docs repo... after the "freshen".

I have been known to delete my old docs repo (gotta dig deep to find out how to do that)... then do a fresh "fork" at the BJS docs repo.... to give me a brand new fresh personal docs repo.  THEN I do editing, and pull request of my edits.  But the compare/switch-base/merge refreshing-method works good, too.

Then, wander into the CONTENT/EXTENSIONS folder (on your repo) and create your folder/document in there (using github markdown).

THEN, there is a file called statics.json in the DATA directory.  You must add an entry in there... for your new doc.  Follow established formatting conventions, and be careful not to mess with other things.  Precision is important, here.

Then do a pull request... and the edited statics.json and yourdoc... will be committed by some custodian.

Then, wait for the build.

The Table of Contents for your new doc... is generated during the build.  With github markdown (what you will write your doc in)... a #header is big black text, a ##header is semi-big/black, and a ###header is sort-of big/black.  The dynamic TOC ignores ####headersLikeThis... with four num-signs.

Rumor has it that there are slight differences between 'markdown' and 'github markdown', so when you go searching for markdown cheat sheets, make sure its 'github markdown'.

I think there might be online editors, as needed... with some helper buttons.

You CAN build the entire docs and docs website... on your home computer.  IF you decided to operate that way, you will be able to do your own docs builds and tour our entire docs website... on a localhost web server (thus see the TOC before official commit of your new doc).  But if you just follow the #, ##, ### rules for headers and indented headers, all should be fine.

If it takes a few docs builds to get your TOC right, what the heck?  I know the docs builders love doing builds.    (it's all automated - with static tutorials/docs marshalled by statics.json)  Know what grunt and gulp, are?  A docs build is a grunting and gulping festival.  I used-to do in-home builds, and you would not believe the amount of logging that comes across the screen... during a ~45-second build.  Its as if 10,000 programs went to work all at the same time, and they are ALL reporting every action they take.  Drool-worthy "batch" processing, for sure.

Maybe that will help get you rolling faster/easier.  I hope so. 

For the demo PG, maybe we should keep it more-simple than the worm crap I am trying.  sps.getMesh() can return us the mesh used for a word.  Then we can use my little animation funcs in lines 2-50 here... or similar createAndStartAnimation calls... on those word-mesh or sentence-mesh.  Simple fly-the-words-into-view stuff... would be impressive, but I guess we would want to show-off the X/Y rotation powers... because BJS GUI textBlocks don't allow that type of rotation (only z-rot).  If folks are simply flying flat-words around, might as well use GUI textBlocks.  It's not until we see your fonts' thickness... that your textMesh really shine and show their differences from GUI textBlocks.

Your textMesh (sorry, I sort of adopted that as the name, but feel free to call it anything, of course)... don't have a color-each-letter feature, unless we make a different Text object for each letter.  SO... maybe we could do some spotlight work in the demo... to make letters flash in sequence or something.  (move spotlight to front of letter, turn on in green for 1/10 sec, then move to next letter, turn on in red for 1/10 sec, etc... for some material effects).

Not sure, yet.  The specular light flash coming from tipping each letter... is pretty cool, too... but it's not jaw-dropping cool. 

Have you thought about the "write it vertical" option at all (and its vertical kerning issue.... space between letters)?  Do we have adjustable kerning at all?  Should we?  I need to study the properties on your newest version(s), yet.  I'm a bit behind... on the newest features.

How about "face direction" vector3?  Letters face the sky, or face -z, etc, etc?  Possible?  That complicates the kerning, as you must take the facingDirection into consids when calculating which axis is the kerning axis.  And, of course, if you allow writeVertical, that will need consids, too... as far as determining what direction the kern-spacing must be applied-to.  In other words, it will be possible that each kern-gap.... COULD be some amount of distance on two different axes.  If the word is written with an odd facingDirection vec3, then the kern space between letters (letter-spacing)... could be an odd angle as well.

This stuff is very new, so I don't know WHAT to consider or try to honor... for this baby.  For most of us, this is the first time we've ever been here.    There's really no "best practices" established.  We are still discovering the best practices... on this one. 

Worms?  Now what little 6 year old girl wants to learn to read... with "worms" crawling all over the place?  But choo-choo trains... or dancing letters and words with music playing... that's all very inviting.  What's next... you want each word to come marching into the scene... dressed as a warrior, and each word decapitates little Suzie's avatar and guts and blood goes splashing all over?  Huh?  heh.  Maybe word bombs dropped from enemy bombers?  Sentences carried by inbound mortar rounds?   Do first graders in your town... wear Kevlar and combat gear?    (Just havin' fun with ya, of course.)

[The Leftover]

Thank you for the helpful comments.

I went with MeshWriter; this was partially influenced by your constant use of "mesh" in the name -- which is appropriate.  'text' means too many other things in the context, most of them not similar to this.  'glyph' is more on-point but is intimidating and hard-to-spell.

BTW, TextMesh sounds like TexMex when you are quite drunk.

[Wingnut]

Should we call it letter-spacing?  Kern is a sucky word... sounds too much like "gout". 

Really, though, you need 3 axis kerning... and allowing negative kern values.

Let's say... for my vertical letters-on-a-rope... that I had a kerning of vec3(0, -40, 0)

That would cause each letter... to be 40 units below the previous letter (-40 Y), but directly under (0 X & 0 Z) the previous letter.

( I'm thinking about this with word facing z-looking cam. FacingDirection 0, 0, -1 )

The Z-value for the 3d kern setting... would HAVE TO take letter-thickness into consideration.  With me?

IF you used this method... there is no more reason for writeVertical.  Users could do it with the 3d kern feature.  And no reason for writeBackwards, either.  And, writeDiagonally is easy, too. 

We might see a time when there is textFacingDirection and letterFacingDirection.  For example, a textFacingDirection might be v3(.5, .5, .5) (seriously-diagonal word-write direction)... but if letterFacingDirection was something like v3(-.5, -.5, -.5), then each letter would be upright, un-rotated, and facing the z-looking cam... even though the entire word was written at a severe angle.  I have something incorrect, there... but... I think you understand what I seek.  If a word's facingDirection is an odd angle... then user MIGHT still want each letter... to be upright and un-rotated... for easy reading.  Not sure how to accomplish that feature.

All in all, (text)FacingDirection is still needed ... possibly an SPS-only thing, but the 3d kern must take its "rotation" into consideration.  Kerns are in text localspace, but the facingDirection is worldSpace... like the parent of 3d kern.  Does any of this make sense?  I could certainly rock a system that worked this way. 

[Wingnut]

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

A little "typing in circles" test.  I am having issues with my line 70 row-taters.  Bad taters. 

More bad signings and co-signings than a Singapore summit. 

[The Leftover]

I think you and I have pegged the needle on opposite sides of the creativity scale.  I might steal.

Illuminated Cities are a rectangle floating on sky-texture.  Everything goes on the rectangle for now . . . except when I did this, (http://www.illuminated.city/mp4/BurglaryCategory.mp4) I rotated the date numbers for y'all to see them.  For me, a radical departure.  It then occurred the me that the "low wall" around the city rectangle could hold useful information.  I don't think I will try a circle but I am keeping it in mind.

In other news, Helvetica does not yet support single and double quote but I will add them.

[Wingnut]

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

Yay, finally got that chrome-like reflecto-shader fired-up on the text.  Coooool.  wheelPrecision and minZ set REAL LOW, so mousewheel-in and check out the hi-rez fractal-pic (refMap).

Slide-around with control-drag, of course.   Awfully danged pretty.  The texture MIGHT need a 50% uOffset or something.  More fractal patterns seen when text is viewed from ends... than when viewed head-on (after animation completes).  Panorama version #55 definitely has a texture mapping issue.  Still looks cool, though.  Studying.   #56 is nice, too... had to set the pivot point to boundingbox center. 

Note: sps.setParticles(); in line 142 area... is not-needed.  The setTimeout is unnecessary, too.  Only tmesh.material = shaderMaterial; is necessary.

Internet Explorer highly-dislikes this... ()=> ...in lines 170 &171.  So, here's a version that works for IE.  (I probably have some compatibility mode incorrectly set in my IE.)

[The Leftover]

Wow!

[The Leftover]

Updates:  More glyphs, including some non-English letters (e.g. ñ).   https://www.babylonjs-playground.com/#PL752W#6     meshwriter.min.js size is below 100K.  I will try to keep it there but we will see.

In review, fonts are:
    ~ Helvetica:  Default, efficient and most glyphs.  Use this one
    ~ HirukoPro:  'cause I use it
    ~ Comic:  just a couple letters right now
    ~ Jura:  I like it for numbers

[Guest]

you rock!

[Wingnut]

I agree! 

I've been thinking some more... about how to get a word/sentence... to follow a path3d/curve3d/whatever.

https://www.babylonjs-playground.com/#92EYG#30

I think this is a Jerome pg... it HAD JeromeGray background when I found it.  

CatMulling.    Some kind of phenomena... that makes squared corners... more rounded.

As you can see, my Lionel train track has some rotationAnimation problems about halfway-thru, and a little unwanted CatMulling at the "repeat" position (where start meets finish).

I'm not sure where/when "sentence following a path" would/could be used... but I still want to try it.  I welcome ideas/thoughts.  Later, we might try dumb path-finding things... like a path3D "engine" that can find/plot the least-mountainous route... across a heightMapped terrain (like a railroad planner might do).  Coooooool.  In many cases, the path3d need-not be a loop at all, so, the start/end "bump" issue is not overly important.

For now, I would like to remove/minimize the "bump" at start-finish location, and I would like to remove the "spastic spin" that happens... about half-way thru the loop.

To be truthful, I would like the cube to rotate around the blue normal ... slightly INWARD... on the turns.  This would be similar-to banked turns on a motor-speedway, and aircraft banked turns.

And wouldn't it be cool if the amount of banking.... was determined by both box forward speed, and angular severity of the turn (how tight).  Nice.  I have no idea how to do ANY of it.    Possibly, leave-behind keyframe rotation animation, and instead... do a "live look-ahead".  The rotation "engine" is able to see the next 20-30 path3D points, and "derive" the amount of banking needed during a turn of THAT magnitude, at THAT speed.  Triple-cool!  Then later, we'll physics-joint-hang the text-letters from the bottoms of roller-coaster "nodes".  YEE HA!

I'm a bit off topic... because this is not really about meshWriter, but about how to fly-around a written mesh.  Oh well... punish me as needed... I sort-of like pain.

[The Leftover]

When you have a hammer, problems look like nails.

I would like users to be able to move the Arc Rotate Camera focal point to different spots around the city.  To help communicate that, I needed a "focal point marker" to show the current point on the map.  I picked an anchor.  (Anyone with a better idea is hereby given the mic.)  Constructing a 3D anchor from an SVG rendering of an anchor turned out to be essentially the same exercise as creating a letter.  So, in a repetition of history, I created a new font family called "WebGL Dings"

https://www.babylonjs-playground.com/#PL752W#17

[Guest]

you should definitely add this as a sample in the doc

[Wingnut]

https://www.babylonjs-playground.com/#PL752W#6

https://www.babylonjs-playground.com/#PL752W#17

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

Many others... seem to be failing (in my FF), TL.  Did something change?  (thx)

 

[JohnK]

I get An error occurred during a connection to sanfrancisco.ca.illuminated.city. Peer’s Certificate has been revoked. Error code: SEC_ERROR_REVOKED_CERTIFICATE

[The Leftover]

I see no error right now.  The Illuminated City certificate is valid and has not been changed for more than a week.  It is provided my GoDaddy and the site is hosted by Amazon.

HOWEVER.  I get that error intermittently on all kinds of sites, myverizon.com, facebook.com, nytimes.com.  For the past six months, it would appear, rarely and briefly, and then disappear.  I assumed it had something to do with my crappy ISP or Russian hackers.  (NY Times had a DNS attack that lasted 18 hours.)

[JohnK]

Error cleared

[Wingnut]

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

Oooo, my "u" has a tumor!  hmm.  He grew a tail.

Can ya help with this, TL?  (thx)

------------

Hi thread-watchers!  Hey... we (I) still have "that other issue"... with the texture mapped-onto the text... oddly (in the fake-chrome shader thing).

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

See how we are looking-at the "nipple" of the texture... when we have our cam aimed +Z-ward?  (like all good cams should aim.)

We are looking at the BUTT-END of the kielbasa, where the sausage casing is tied-off.  (sausage = texture) 

Does anyone know how to map the lateral SIDE of the sausage... across the word's "faces"?

If you pan the camera around the mesh, you can see that there is a texture "nipple"/spincter... in the end-faces of the mesh, too, and in the center of the back side.

I think it needs a u or v offset of about 50%.  Probably vOffset.  (see note below about meshWriter fonts' default orientation)

I dunno how to do a vOffset with this fancy shader texture.  Anyone know how?  I'd use it.    (thx)

Note:  Keep in mind that these meshWriter/SPS mesh... are laying on their backs... on the floor, by default.  They start... napping.     Could THAT affect why I see texture-nipples (poles) in the center of every mesh face?  I think it is related-to the issue.  It's as-if... when I tip-up the mesh, the texture doesn't come-along.  It doesn't tip-up WITH the mesh.

It is not supposed to tip-up WITH the mesh, but still, I need to tip it-up...  just once.  Actually, I need to tell the texture to map-onto the mesh with a 50% vOffset... from the start. 

Or, I could leave the mesh lay on their backs, move the camera to -Y aim (overhead), and work from there.  But that sucks.  Words need to be ON THEIR FEET when they stampede across the rolling heightMaps of the western plains. 

Help welcome!

Extra:  In PG #57, change '0.0' in line 91... to 1.0   ...does SOMETHING.  Texture nipple not in center of word anymore.  Hmm.  Wingnut with shader code == child with power tools... erf.   Oh well... line 91 seems like a good point of demented shader experimenting, for sure.  :)

[The Leftover]

Wingnut thanks for caring (heart heart heart).  (I am working on being more emotive.)

This must have emerged with the new release.  It also appears in the playground of record,  https://www.babylonjs-playground.com/#PL752W#1  Some sandpaper outa do it.  Back soon.

[The Leftover]

Your Wingnut has now returned to an age-appropriate profile.

[Wingnut]

Thx TL! 

Hey, mapping textures... https://www.babylonjs-playground.com/#XWVXN9#63

In that one... I changed the .xyz in line 91... to be .zyx  !  The other value remains 0.0.  (That 0.0 seems like a scaler, to me.  Stretches stuff.)

Whatever it did...  the chrome looks much more nipple-free.

Wow, we can really abuse this Purina GPU-chow.  Them critters will eat ANYTHING!  

The objective here... is to get a picture of a fire truck or stage coach or something... to pass across the face of the word... as the word or camera does a slow rotation/pan.

THAT... would win us the CNET Artificial-Chrome Reflect-Master-of-the-Year Award, for sure.  Hands down.   

For best effect, the fonts need to be REAL big and blocky, lots of facial surface area... not much empty space, absolute minimum kern between letters.  Lots of surface, so the fire truck picture has good clarity as it passes across the word.  Yet the fonts must not be SO fat as to make the word difficult to read.  An artistic balancing act. 

Got some really fat font-sets... earmarked for meshWriter, someday, TL?  It's only miserable hand-tweaking work, TL... no biggie, right?  (ahem)  (sorry)  And yeah, I know... fat fonts, low kern, possibility of SPS letter-over-lapping increases.  But, as you can see.... for THIS effect, the more word/font surface-area, the clearer the reflected picture.  *shrug*  Thoughts?

[The Leftover]

Well that is a remarkable piece of puzzlement that nearly broke my brain just before bedtime.

So you like made a custom shader with a bit of C code?  I have never looked at that pond, much less swam in it.

[Wingnut]

That shader code was stolen from the amazing CYOS (create your own shader) editor...  https://cyos.babylonjs.com/

Default shader for CYOS.  Ain't fake-chrome PRETTY? 

I used the ZIP option in CYOS, to insert that shader code into a giant string, and bring it home.  Then I took the shader-code string and inserted it into a playground... for use in the BJS ShadersStore-method of storing shader code (which is the same method that the zip from CYOS uses).  I think there are about 3-4 other ways to store shader code.  One, is within files. Another... within an HTML script element, and also ShaderBuilder can store it in JS... in little pieces/values... and assemble/compile it at scene run-time or whenever needed.

I THINK... a more-standard reflection-texture can be used instead-of a shader, and can look/act exactly the same chrome-like way... IF we correctly set the reflection-texture parameters, and maybe the texture's "coordinatesMode".   But also... I think the "addressMode" used for texture wrapU, wrapV, and wrapR... is pertinent, too. 

In THIS effect, the reflection is mega-important.  These advanced texture settings... aren't well-understood by noobs like me.  We probably need a PBT (playground-based tutorial) to teach these advanced texture things.  uv(w) offsets, scales, angs, wraps, and coordinatesModes... the big 5 "weird" texture knobs. 

Wraps and coordinatesModes... being the weirdest.  Those 2 set which part of the texture to clamp (glue) to which part of the mesh, and which areas are allowed to stretch or compress, as best I know/can explain.  The mesh's UVs are involved, too, if they are present.

Yep, these meshWriter fonts/words/sentences... have a whole lot of reflection experiments that need to be performed/tested.

Add-in another camera used to generate a renderTargetTexture (rtt)... put chrome words in front of it, and then use ITS texture on a different single-word mesh!  OMG!

For example... a child learning a word.  The word sits in front of them... in big fat fonts... and in the reflection of the word's texture.... sentences are slowly scrolling-thru... showing the word properly used in example sentences.  SO COOOOOOL! 

Further down the line... I believe .moveWithCollisions() works on letter shapes.  Sooo... letters of a word... can bump into each other, and that can open-up a whole new world.  AND... Jerome has basic SPS collisions already happening somewhat... without a physics engine (actually, with his own basic SPS physics engine). 

And there's scaling...  making each letter of a word or word of a sentence... go squatty'n'wide, then tall'n'thin, back and forth, as it bounces along on the rolling plains.  Nice.  There's some serious (comedy) options for making text dance and sing, here.

In a way, we are talking about meshWriter "behaviors" here, similar to camera behaviors.  Or perhaps... array-of-mesh behaviors.  For example... scale wide and squatty, then scale tall and thin, back and forth at some rate and some limits... is a "behavior" that can work on ANY array of mesh, not only a "group" of meshWriter characters or words.  Many of @jerome's demented SPS experiments... could be considered SPS "behaviors", too, yes?  It really depends upon how flexible we want to be... with the term/definition of a "behavior".

So... we probably need to think about IF/NOT... meshWriter behaviors... and general array-of-mesh behaviors... are the same thing.  Or... AT LEAST the two things might inherit from the same base class... should we decide to try array-of-mesh behaviors AT ALL.  In a way, this is "advanced choreography", which will LIKELY involve the BJS animation system, AND might also apply to array-of-lights and to cameras, too.  Scene.actionManager.choreographyManager ...  v1.0    Not used too often for games, but instead... for shows and mesh parades.

[Wingnut]

Hey TL/friends... see this?  https://www.babylonjs-playground.com/#MRRGXL#14

That's a demo of the new STANDARD particleSystem "shape emitters".  This demo is just a box, no biggie.

But... WHAT IF... ANY mesh shape can be an emitter, including shapes that have been digested into an SPS?

What if?  Sparkly text!!!  meshSparkler v.0.1   ...the first "effects add-on" for meshWriter system! 

Let's all stand here and point-at the LACK OF "Use any mesh-shape as an emitter" -option... in the shape emitters system.

What were the inventors of shape emitters... thinking?  heh.  Gotta have an "any mesh shape" option, right?  No? 

Perhaps if we point and snicker enough, the feature author will try to code it for us.  It's probably difficult to code, though.  Likely a particleSystem bogger... depending upon the complexity of the custom shape.

Still, I get to dream about using a meshWriter character/sentence... as a standard particle emitter, right?  Sure I do.   

Xmas is near... it's time to decorate everything in sparkly lights.  YAY!   Twinkle-lights are one of the cooler things we can do with electricity, in my opinion.  LED's, flat-lights, cool-temperature, low-wattage, high-output lights (and webGL pixels on sweet monitors)... it's a GREAT time to be an eyeball.

[Wingnut]

Lots of meshWriter talk happening over in the new forum, @The Leftover.  Some here, and a little bit in the new Wingnut Chronicles.

Are ya logged-in over there, yet?  It's an open-air forum... almost like being outside, in the woods.  Pretty nice. 

Perhaps we need a "new introduction" post... about MeshWriter... over there.  In fact, I know we do.

Everyone... get your new user accounts and start earning... err... I don't like earn'n'deserve systems... never mind that feature (I prefer everyone treated the same, no matter if they have earned or deserved it, or not.  That's another story.) 

All in all, the new forum is a cool place/thing, and all our friends are over there, learning all the new things that it can do.  C'mon over!

[The Leftover]

Thanks for telling me everybody moved.  I would have been a shock to return to the old campsite and discover a cold fire pit and a note.

I enjoyed reading the latests posts.  Ya'll are really crazy.  I forgot.