chicagobob123 Posted June 7, 2016 Share Posted June 7, 2016 I need to attach some text to a ground plane. Is there any simple tutorials on text handling? Thanks, Quote Link to comment Share on other sites More sharing options...
eboo Posted June 7, 2016 Share Posted June 7, 2016 i've found this funny PG: http://www.babylonjs-playground.com/#1023O#6 Boz, Wingnut and Temechon 3 Quote Link to comment Share on other sites More sharing options...
chicagobob123 Posted June 7, 2016 Author Share Posted June 7, 2016 thanks a bunch. Wish it was referenced in class docs or even the tutorials. Quote Link to comment Share on other sites More sharing options...
jerome Posted June 7, 2016 Share Posted June 7, 2016 I suppose that you mean : attaching a 2D text (say, a planar surface with some text) to a ground ? Well, there many ways to do ... here are two quite simple : you could use the dynamic texture for now, please have a look at this tuto : https://www.eternalcoding.com/?p=253 or just wait for the upcoming Canvas2D (as for 2.5 in less than 2 weeks, or in beta if can't wait) what will provide powerful text (and drawing) features, like alignement for instance chicagobob123 1 Quote Link to comment Share on other sites More sharing options...
chicagobob123 Posted June 8, 2016 Author Share Posted June 8, 2016 Fantastic about powerful text (and drawing) feature. One of many needs is, I have a HUGE ground map (parking lot) which I currently bring in as an image texture. I would rather bring it in and render or create it on the fly. Would not mind any suggestion on how to do this. Let me show you a small part. I would love an asphalt tile and someway to render the ground but it needs numbers and Letters describing the lot Any ideas would be great Quote Link to comment Share on other sites More sharing options...
Samuel Girardin Posted June 9, 2016 Share Posted June 9, 2016 @chicagobob123 As jerôme said use a dynamatic texture and you can draw what you want in the context like this : http://www.babylonjs-playground.com/#2MSLK#4 chicagobob123 1 Quote Link to comment Share on other sites More sharing options...
chicagobob123 Posted June 9, 2016 Author Share Posted June 9, 2016 http://www.babylonjs-playground.com/#2MSLK#12 Playing with this crashes my display driver. I also get CONTEXT_LOST_WEBGL Quote Link to comment Share on other sites More sharing options...
Wingnut Posted June 9, 2016 Share Posted June 9, 2016 Hi guys! I'm late arriving... so I hope I'm on-topic. http://www.babylonjs-playground.com/#2MSLK#15 Looks like there is a 4096 limit on dynamic texture size. (dtsize) I changed some things. You may need to re-adjust things... but maybe not that 4096 value. update: http://www.babylonjs-playground.com/#2MSLK#16 Check out line 29. This is a power-of-2 issue, maybe. (value 8192 works!) (16384 doesn't, though). hmm. Where's @dbawel when I need him? (to remind me about power of 2 things). dbawel, chicagobob123 and Samuel Girardin 3 Quote Link to comment Share on other sites More sharing options...
chicagobob123 Posted June 9, 2016 Author Share Posted June 9, 2016 Hey thanks for the help. Power of 2 no problem. Limiting to 4 or 8K, I was thinking of using 32K in some instances but I can work around this. In the grand scheme of things am I limiting anything or causing issues doing this? I am almost set to put this together but nervous as well because of unknown limitations. Quote Link to comment Share on other sites More sharing options...
chicagobob123 Posted June 10, 2016 Author Share Posted June 10, 2016 This stuff works fantastic. !! Wingnut 1 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted June 10, 2016 Share Posted June 10, 2016 Nicely done. We'll expect a tutorial about BJS text handling, authored by you... by late autumn. heh. (You are a leading expert, now.) Vertical and horizontal text scrollers, next? Word wrapper for those LONG paragraphs? Maybe teach us about using TrueType fonts vs. not? How about kerning (space between each letter)? Time to get your Masters in text wrangling, huh? Quote Link to comment Share on other sites More sharing options...
chicagobob123 Posted June 11, 2016 Author Share Posted June 11, 2016 TrueType fonts vs. not? Everyone knows that. Quadratic splines the true type fonts help with edge definition and smooth transition from one curve to the next vs the Type One Font which uses Bezier splines with interconnected line segments. The Bezier curve was developed by Piere Bezier for Renault I think for CAD. Kerning is space between letter pairs to give a uniform look to a line of texe but leading has underestimated complexity with certain fonts that fall far below the baseline. Quote Link to comment Share on other sites More sharing options...
Wingnut Posted June 11, 2016 Share Posted June 11, 2016 Right. I was more curious as to whether or not YOUR project was going to use wordwrap (and thus is dependent upon line measuring)... which is related to font sizes and types and letter spacing, etc. I was wondering how "far" you were going to take your text handling... and if you DID do live kern adjusts, font adjusts, and re-word-wrapping when those things changed... ...would you share your code with your fellow BJS users and tell us about the adventure? As you know, text handling for BJS is not well documented... and we could use your help/knowledge Especially... if you are going to advance your text handling more/later... like auto-center, word-wrap, change fonts in a single line, change colors in a single line, line-spacing, word-spacing, letter-spacing... you know... cool text features. Teach us what you learn (if you want). thx. Quote Link to comment Share on other sites More sharing options...
chicagobob123 Posted June 11, 2016 Author Share Posted June 11, 2016 I dont know much but will give it a go and let you know. I have some text things to do Wingnut 1 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted June 11, 2016 Share Posted June 11, 2016 Cool. I've seen times... using context2D text... where I print a sentence... and there's an unwanted kern-gap in one or two of the words. Example The "e" is too far from the "w" for some strange reason. This is a w eird way to print text. I try different fonts, over and over, and I can eventually get it looking tolerable... but I never understand why it is too wide. It just happens between certain letters at certain times, and it's annoying. I've gone as far as to split the sentence into two separate fill calls... and try to remove the unwanted kerning gap THAT way, and it all sucks... it just sucks. As terrible as this idea sounds, each LETTER needs to be a separate fill-call. PER-letter complete positioning control... probably CPU-heavy. *sigh* Can you imagine printing an entire paragraph of text, auto-word-wrapped, nicely margined and padded, free-use fonts/colors along the way, all done letter-by-letter? Wow. What a text engine. FontCharacterClass objects... instantiate the heck out of em, huh? I bet the 2D folk already have all the JS classes needed to try something demented like that, eh? I don't do Phaser/similar, yet... but... maybe others have. CSS for canvas? *shrug* Somebody HAS TO BE doing some demented text-wrangling for context2D. I suppose I'll have to quit yammering long enough to do a web search. :/ Quote Link to comment Share on other sites More sharing options...
chicagobob123 Posted June 16, 2016 Author Share Posted June 16, 2016 If you had a lookup for each character and could treat them like indexes into an array then you could put the text out but the successive calls to fillText would be a killer. Things like kerning have to be done on the fly in the raserizer dont you think? When I wrote a TrueType rasterizer (decades ago) I paid attention to kerning and then there is the concept of kern pairs which takes into account if these two letters meet do this otherwise dont. But that as decades ago. Just surprising to me to be talking so much about text again. Quote Link to comment Share on other sites More sharing options...
chicagobob123 Posted June 17, 2016 Author Share Posted June 17, 2016 Here is my latest effort on Text. There are a couple of handy Javascript functions that figure out width and height. http://www.babylonjs-playground.com/#1MCWZJ#24 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted June 17, 2016 Share Posted June 17, 2016 Did you check @Nockawa's work on Canvas2D? chicagobob123 1 Quote Link to comment Share on other sites More sharing options...
chicagobob123 Posted June 18, 2016 Author Share Posted June 18, 2016 Now I did. I will give that a try asap. When you get a chance I have a unique Situation with text. It needs to be really small. But as you zoom in as you know it gets pretty bigger. Any thoughts on keeping the look of the text nice and smooth?. Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted June 20, 2016 Share Posted June 20, 2016 Just use Canvas2D for this as well Quote Link to comment Share on other sites More sharing options...
Nockawa Posted June 20, 2016 Share Posted June 20, 2016 @chicagobob123 take a look at this: http://babylonjs-playground.com/#EPFQG#3 and that: http://babylonjs-playground.com/#1BKDEO#18 If you want more info, please read the doc, the main entry point is here: http://doc.babylonjs.com/overviews/Canvas2D_Home I'm currently working on improving greatly the quality of WorldSpace Canvas, so you can have a very good quality for the text if you zoom in/out...it's going to be great and be released in the 2.5 beta in 1 or 2 days max. Please check this thread to get notified on updates: chicagobob123 1 Quote Link to comment Share on other sites More sharing options...
eboo Posted June 20, 2016 Share Posted June 20, 2016 simple name sample : http://www.babylonjs-playground.com/#1N2CH7#3 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.