The Leftover Posted May 8, 2018 Share Posted May 8, 2018 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. Gijs, JBatUN, jerome and 2 others 4 1 Quote Link to comment Share on other sites More sharing options...
The Leftover Posted May 22, 2018 Author Share Posted May 22, 2018 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. Gijs, Wingnut, JBatUN and 3 others 6 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted May 23, 2018 Share Posted May 23, 2018 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. The Leftover 1 Quote Link to comment Share on other sites More sharing options...
jerome Posted May 23, 2018 Share Posted May 23, 2018 excellent ! Quote Link to comment Share on other sites More sharing options...
Wingnut Posted May 23, 2018 Share Posted May 23, 2018 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 jerome 1 Quote Link to comment Share on other sites More sharing options...
The Leftover Posted May 23, 2018 Author Share Posted May 23, 2018 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. Quote Link to comment Share on other sites More sharing options...
Wingnut Posted May 23, 2018 Share Posted May 23, 2018 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. Quote Link to comment Share on other sites More sharing options...
Guest Posted May 23, 2018 Share Posted May 23, 2018 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! Quote Link to comment Share on other sites More sharing options...
The Leftover Posted May 23, 2018 Author Share Posted May 23, 2018 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? Wingnut 1 Quote Link to comment Share on other sites More sharing options...
The Leftover Posted May 23, 2018 Author Share Posted May 23, 2018 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. Quote Link to comment Share on other sites More sharing options...
Guest Posted May 24, 2018 Share Posted May 24, 2018 Excellent, send the PR when you want Quote Link to comment Share on other sites More sharing options...
Wingnut Posted May 24, 2018 Share Posted May 24, 2018 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. Quote Link to comment Share on other sites More sharing options...
The Leftover Posted May 24, 2018 Author Share Posted May 24, 2018 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 1 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted May 24, 2018 Share Posted May 24, 2018 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. Quote Link to comment Share on other sites More sharing options...
The Leftover Posted May 24, 2018 Author Share Posted May 24, 2018 Sorry. "letter-thickness" https://www.babylonjs-playground.com/#XWVXN9#8 Wingnut 1 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted May 24, 2018 Share Posted May 24, 2018 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. Quote Link to comment Share on other sites More sharing options...
jerome Posted May 24, 2018 Share Posted May 24, 2018 Wooaww, ultra-nice feature. I understood that this relies on a SPS under the hood. Is each solid particle a word or a letter ? Quote Link to comment Share on other sites More sharing options...
The Leftover Posted May 24, 2018 Author Share Posted May 24, 2018 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 Quote Link to comment Share on other sites More sharing options...
Guest Posted May 24, 2018 Share Posted May 24, 2018 Can wait to have it in the doc!! a lot of people will be interested Quote Link to comment Share on other sites More sharing options...
jerome Posted May 24, 2018 Share Posted May 24, 2018 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 ! Quote Link to comment Share on other sites More sharing options...
jerome Posted May 24, 2018 Share Posted May 24, 2018 it works ! https://www.babylonjs-playground.com/#XWVXN9#22 Wingnut, JohnK, Arte and 1 other 4 Quote Link to comment Share on other sites More sharing options...
The Leftover Posted May 24, 2018 Author Share Posted May 24, 2018 Excellent! Of course! Quote Link to comment Share on other sites More sharing options...
The Leftover Posted May 25, 2018 Author Share Posted May 25, 2018 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 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted May 25, 2018 Share Posted May 25, 2018 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. jerome 1 Quote Link to comment Share on other sites More sharing options...
The Leftover Posted May 25, 2018 Author Share Posted May 25, 2018 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. Wingnut 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.