Text Manipulation with Shaders: Text Splitting

[Clms]

I’m working on manipulating text dynamically using shaders.
Each letter in the text needs to be randomly assigned to one of five groups, which will gradually blur out over time with a GLSL shader.

While the blur shader isn’t causing issues, I’m unsure about the most efficient way to split the text. Initially, I thought about generating an SVG dynamically and then applying it as a texture over a Sprite.

However, I couldn’t get it to work smoothly – the SVG elements weren’t in the correct order, and the spacing was off. Any suggestions on how to approach this?

Thanks!

[Fennec]

You’re looking for a way to mange a texture atlas, the following threads could be a good starting point.

Client side Texture Atlas creator for Three.js

Hey guys! I’ve created this lightweight library which generates Texture Atlases from Three.js textures. It’s a client side library and can be used to merge meshes with separate textures into one mesh or merge different textures of given mesh (emissive, displacement etc.) into one single texture for efficiency. Feel free to check it out -> https://github.com/oguzeroglu/TextureMerger Hope you fine it useful : )

Use TexturePacker atlas in an InstancedMesh

Hi all! I’m trying to render a sh*t ton of icons with the help of an InstancedMesh . The geometry of each instance is just a simple PlaneGeometry/Quad. The possible different icons are all included in a texture atlas created with TexturePacker. TexturePacker generates the png for the texture (trimming transparent pixels, adding paddings/margins to prevent texture bleeding, removing duplicates, etc) with a Json file where each icon is defined by a frame object that looks like t…

[Clms]

Hi Fennec,

Thanks for your reply. I might have misunderstood or perhaps I didn’t explain my idea clearly.

I have a dynamically changing text string. My goal is to randomly assign each letter to one of four groups, ensuring that each letter is entirely assigned to a single group. Later, I want to blur all the letters within a specific group (text should be 2D).

From what I understand, atlas maps are used to project textures onto objects.
Would you recommend creating an atlas map dynamically and then mapping it to a Sprite?

I would greatly appreciate your advice on the best approach to take.

Thanks!

[Fennec]

@Clms

I thought about generating an SVG dynamically and then applying it as a texture over a Sprite.

You can skip the SVG part, draw the text into a canvas and use the canvas as texture.

Since you want each letter separately, you can:

1. If you have a lot of letters, then texture atlas is the way to go.
2. If there are few letters, 4 in your case, then just using four canvases as textures is ok!

Hope that I’m not misunderstanding you!

[Clms]

Thanks for clarifying, but unfortunately, I’m still not entirely sure how to approach this.

The script should work for any given text, regardless of length, and each letter should be assigned to one of four groups (layers). Each layer, with its letters, will then be animated separately.

From what I understand, you’re suggesting using the texture atlas. However, I’m not clear on how that would help in this context.

For example, if we have the string “Hello World, how are you?”, the script should assign each letter to one of the four groups/layers so that a different shader can be applied to each group.

It’s crucial that the spacing of the letters remains consistent, as if the text were typed normally. This is where I’m struggling. I can’t figure out how to place randomly selected letters from the string on different layers without altering the position of each individual letter.

I’m not entirely sure how to use atlas maps to solve this challenge.

Thanks for your advice and patience.

[Fennec]

Made this quick example, using a sprite pool to reuse the sprites and only update the canvas with the new letter, check drawLetter, to see how to draw the letter into the canvas. (Doesn’t exactly fit what you’ve described, but you can easily adapt it!)

[Clms]

Crazy, thanks so much! Really appreciate your effort.
I can later try to adjust it to my requirements and will come back.

Thanks again!

[Clms]

I tried to adjust the script and got close to the final solution I was aiming for: Edit fiddle - JSFiddle - Code Playground

The only issue I’m struggling with now is making the sprites as wide as the letter they contain, to ensure the letter spacing is correct.

How would you approach this?

Thanks a lot again!