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…

You’re looking for a way to mange a texture atlas, the following threads could be a good starting point. [image] Client side Texture Atlas creator for Three.js Resources Hey guys! I’ve created this lightweight library which generates Texture Atlases from Three.js texture…

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 b…

[image] 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: If you have a lot of letters, then texture atla…

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 …

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!)

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

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…

Text Manipulation with Shaders: Text Splitting

Questions

Fennec May 21, 2024, 7:54pm 2

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

1 Like

Topic		Replies	Views
How to use Atlas combination to display sprites? Questions textures , shaders , uv , texture-atlas , text-atlas	2	106	May 12, 2025
Basic Texture Splatting, need help Questions textures	9	5240	November 28, 2022
Displaying Part of a Texture File on an Object Questions textures , materials	4	1641	August 6, 2021
What is the recommended way to do sprite or mesh batching? Questions performance	11	9608	July 20, 2020
Texture repetition & Drawing lines issue with GLSL shaders Questions glsl , textures , shaders , shader-material , draw-line	13	462	August 16, 2024

Text Manipulation with Shaders: Text Splitting

Related topics