Adding text in SPS particles

Questions
1

Hi, I have done some cloning using SPS. and would like to add text to every particle. As im not sure how its done can somebody help on it?

PG - https://playground.babylonjs.com/#GKUCQP#41

2

Here is an example using dynamic texture

1 Like
3

Can i know why it doesnt work on my PG, as i was tryng to write text in the cubes

4

Can you provide the PG where is doesn’t work?

I suspect it is something to do with how you assign label width and height along with box width, height and depth.

5

Having had a further check it could be to do with using a non transparent background. In which case a slight alteration is needed when you create the dynamicTexture

1 Like
6

Hi @JohnK Thank you for your time and effort :slight_smile:
But tbh, i couldnt grasp what u were saying… Can you shed your information w.r.t to this
PG - https://playground.babylonjs.com/#GKUCQP#41

It would be really helpful, Thank you :slight_smile:

7

what i have understood from my ltd knowledge is that, im creating this text effect only for the very first cube… and if i want to replicate the for others i will have to position it accordingly?

1 Like
8

On mobile only until tomorrow. So that I know for then;

  1. Do you want different text on each cube?
  2. Do you want text on only one face of the cube?
9

  1. yes. I have an excel sheet to pull the data from. i guess it wont be a problem as i do the same for the position for the particles.

  2. As of now, i want a certain text to shown in all faces of the cube(eg: id of the cube… in every face)

10

Here is a PG closer to what you want.

However there are two issues

  1. The limit to the number of boxes you can draw with this method is low before you get a vertex buffer error.
  2. The construction of the dynamicTexture is slow even for 200 boxes.

One way to speed things up would be to pre-create an image with all the numbers you need in a grid format and use this for a material on your SPS.

1 Like
11

Sure, john… thank you…

just wanted to know, are there any better workarounds for writing texts in SPS?

12

I created the image, used in the following PG, containing the numbers from 0 to 1599 in rows of 40 across using Excel.

You can see that using a pre-created image works much faster and for a much larger number of boxes

2 Likes
13

This seems to be great, but it will be hard to make it work if the data is dynamic right?

14

and also just wanted to know, how did you created the image? by manually ??

Can you elaborate the process?

15

True

In Excel

  • Decide on grid size
  • Number first row from 0
  • Second row - use forumla to add row length to cells in first row
  • Copy second row as many times as needed to complete grid
  • Adjust cell sizes
  • Set background color
  • Remove cell lines
  • Copy the grid
  • Paste the copy as a picture into a second sheet.
  • Copy the picure
  • Paste picture into your favorite image editing app
  • Save image
1 Like
16

Hi @JohnK How can we do this if the data is dynamic?? or are what can be other workarounds, like showing a placeholder etc.?

17

Can you explain what exaclty is particle.uvs means?

18

It specifies the region of the texture to be applied to the particle in the form lower left coords (x, y) and upper right coords (z, w)

particle.uvs.x = 0;
particle.uvs.y = 0;
particle.uvs.z = 1;
particle.uvs.w = 1;

is whole of image

particle.uvs.x = 0.25;
particle.uvs.y = 0.25;
particle.uvs.z = 0.75;
particle.uvs.w = 0.75;

would take the middle section of the image.

I am using particle.uvs to specify which ‘cell’ from the whole image is applied to a perticular particle.

1 Like