I have returned from the depths with a new question.
I want to scroll text across a plane and loop it. I had some success with AdvancedDynamicTexture and adding a text control, even scrolling it.
I’ve seen some folks use a custom texture and a diffuse fragment to so something similar, I think with my current approach the texture created just cuts the text off and it’s not the right approach.
How should I be thinking about this? Create a texture containing the text procedurally, I feel certain I should be thinking about this as a UV challenge/problem. I tried CreateAndStartAnimation uOffset but ended up with this:
Was I on the right track, and my texture was the problem, or are textures, uv’s and shader fragments the wrong way to be thinking about this?
You’re right on the money in thinking of this as a UV thing The repeating black line is probably caused by the default texture wrap setting (clamp), which just repeats the last uvs when you go over 1/under 0. Setting it to wrap lets it repeat the values: Texture mode Babylon.GUI | Babylon.js Playground (babylonjs.com)
Ahhhh @carolhmj this is so close, I’m glad I was at least looking in the right direction.
So if I make that text really really long it clips, and I think that’s because the texture is made for that plane, and I know we can do a do not clip thing on the text and container but I don’t think that’s going to help because fundamentally the texture is not long enough.
I know there is something in the documentation about making a plane to fit the text, I can’t remember if there was something about making a texture long enough to accommodate the text?
Sorry for being a rookie, so close, I’m just not sure what I’m missing, I’m sure the texture needs to be wider. I don’t think uScale helps here either because that would tile the texture if todays learning has been anything to go by.
Also super strange thing, I thought I’d make the plane in the playground wider and shorter because I keep getting this squashed aspect ratio text, and the plane just disappears if you set width and height
Heya, if you use the MeshBuilder.CreateXX functions instead of the (deprecated) Mesh.CreateXX functions then you can pass in the options parameter that way (the old functions had diff params).
Ah, @Blake Can’t believe I didn’t notice it wasn’t using MeshBuilder! Doh! I’m so used to using it.
Ok all sorted:
So this is more like my problem, squished text because of the aspect ratio and I think CreateForMesh will default to 1024x1024, so I’ve hacked about and kind of got the text looking ok, but it’s all code guesses. I’d love to know a good workflow for how to do this when an artist throws over a random surface and says, make scrolling text! potato!
Also, you can see the clipping problem on the text. Again, I think I can solve this by making the texture wider, I’m not sure what the right approach is, but a vaguely remember seeing something about measuring text by creating a temporary canvas to see if the text will fit.
I think setting text.scaleY to plane width divided by plane height works well to correct the text size, but I didn’t have any success sorting out the other issues… I bet @carolhmj can help with it thou!
So we learned a thing today, that my amigo needs to do some uv mapping in blender otherwise the texture gets all messed up, so we made some progress in this regard.
Still haven’t really come up with a good way of making sure I pick the right width for the texture, other than doing some rubbish maths like abitaryNumber * number of characters = width.
But with the uv mapping thing done in blender a square texture maps perfectly across the plane now.
Ok I have the scrolling again, but had to use a DynamicTexture instead with a trick of rendering at the necessary resolution for the text to not cut off, and then scaling it back again so that’s actually readable… I’m not sure if there is a simpler way of doing that: Dynamic Texture Example | Babylon.js Playground (babylonjs.com)
@carolhmj Thanks so much for looking at this, I think I’m somewhere between the techniques, I’m not going to know how long the text is, so I think I will end up doing the old pixelsNeededPerLetter * text.length = requiredTextureWidth. I’ve got some more time to play with it today, I’ll see if I can get any further with your examples. I didn’t try applying different size textures to the plane now we have the UV map done; so I expect I’m got to get some scaling problems too.
The repeating black line is probably caused by the default texture wrap setting (clamp), which just repeats the last uvs when you go over 1/under 0. Setting it to wrap lets it repeat the values: 
I bet 
