y’all, so I’ve got my VR game working.
(1.) Some robots fly around.
(2.) You can switch into their POV, or walk around.
(3.) There is an environment.
(4.) A secret beacon is somewhere on the map.
If you find the beacon, I want it to show you some text. Here are my questions:
(1.) Should I just make the text appear on the object? If so, how do you use text as a texture?
(2.) Are there other ways of showing someone text in VR (3D)?
Thoughts/opinions/feelings?
assuming that if I don’t use text as a texture, y’all want me to use this:
or you want me to use this: Use Dynamic Texture - Babylon.js Documentation
if I do the canvas method (of solving the problem), I don’t see a method/argument for when you want the text to turn (and go down a line).
e.g. in p5js, you can say text(“my fancy text”, start position X, start position Y, wrap after some pixels X, stop after some pixels Y).
not sure I see the same functionality here…
I think I like how the 2D text on a 3D object looks, but I’ve got to get the text to wrap when it hits the edge of the cube.
I’m trying to make a text monument.
textureContext.font = "bold 40px Calibri";
textureContext.save();
textureContext.fillStyle = "white";
textureContext.textAlign="centre";
wrapText(textureContext,"Lots of really long and exciting text",null,80,300,25);
textureContext.restore();
textureGround.update();
function wrapText(context, text, x, y, maxWidth, lineHeight){
var words = text.split(' ');
var line = '';
for(var n = 0; n < words.length; n++){
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
} else {
line = testLine;
}}
context.fillText(line, x, y);
};
In case anybody ever meets this problem, this appears to wrap text for me.
Hi S! It appears that you are having a conversation with yourself. 
Deductive reasoning and method-weighing… out-loud. Typing while pondering.
It’s good… user @Pryme8 does it, and he’s a BabylonJS superstar… actually a scientist… but… on the edge of insanity like most geniuses. You sound the same, in many ways.
First… Use Dynamic Texture - Babylon.js Documentation
The BJS Dynamic Texture has a handy method… called drawText(). It handles much of the legwork that you did… in your code dump of Context2d-based text-on-canvas.
Dynamic Textures are cool… but they can be a bit struggle-ful. Next post… I’ll tell you something cooler.
Use the Babylon GUI - Babylon.js Documentation BabylonJS GUI 2d system… mega power… mega fun… but MOST important… can be activated as a full-screen “layer”… OR as a texture mapped onto a mesh (including onto planes that are parented to cameras)
You’ve heard of DynamicTexture… but now there’s ADVANCED Dynamic Texture… which we call ADT. Two modes… full-screen or “for a mesh texture”.
Let’s do a playground in-the-code-search for… BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh. tons of demos… steal code, learn.
Next post… I will talk about the fun and disappointments of 3d-modeled text such as meshwriter and Blender-made imported text “word-models”.
Hi again. Meshwriter rocks. (ridiculous reflection chrome-like stuff with animated “rocking” of the Solid Particle System particles that make-up each text character)
Or maybe THIS basic playground: https://www.babylonjs-playground.com/#PL752W#160
Again, playground search “in the code” for ‘meshWriter’. Many meshWriter demos will be broken… because of bad URL in playground. Current CORRECT URL for meshWriter script… is…
https://bjs-playground.s3.amazonaws.com/meshwriter.8.30.925am.js
3d “modeled” text is nice. It can be “flown” and follow paths like a rollercoaster. It often has thickness (z-depth) and so… is not always easy to read… at extreme angles. text face colors and side-colors… are everything… and it eats some vertices (but meshWriter uses one of the most performant methods - SPS particles… to “grow” the text.
3d text is not always easy to “map onto” things like spheres and cylinders. Can be done… takes some work.
Lastly… decals. Decals can paste an image onto ANY contoured surface… but don’t ask them to relocate/be-dragged. Decals are grown especially for the bumpy surface they cover. IF you move them to a different bumpy surface… they will not work well. Best to make a new decal when move is needed.
Ok, another lastly… our spotlights can work as “slide projectors”… and can “project” a word or sentence onto a mesh/landscape/anything that can accept a light. Sometimes the chars have soft edges. https://playground.babylonjs.com/#CQNGRK#10 That’s a video playing… as a “gel” to a spotlight. Advanced. SO… you can imagine the possibilities of using a light as a “projector”. Good thing about spotlight projectors… they project onto bumpy heightMap terrain almost as well as a decal, but UNLIKE the decal… the light can be easily panned/moved without needing to re-create anything. BUT… spotlights skew… so its best to shine the spotlight “dead-on” at the projected surface… no angles.
Enough yet? Did we lose a post from you? I think so. Yeah, making text wrap around/across texture seams… not so easy.
Love you wingy! <3
God, I love this place. Thank you for all of this. I am PUMPED.
this draw text method… I don’t think that it does text-wrapping at a specified border, no?
wow the GUI in VR examples in the playground 
wow, the spotlight idea is crazy
