UV values and solid particles.

[chicagobob123]

Read the documentation and the UV values are not what the documentation states. 

The SPS uses only one material, so only one texture.
However you can choose, per particle, which part of the texture you want to apply to this particle with the uvs particle property.
This property is a Vector4 and is initially set to (0, 0, 1, 1) for each particle (or to initial UVs values if the model had UVs per face), 

I have a single mesh, a single material and an array of 48 UV values.

First) The UV per particle Value is a Vector4 not an Array of UVs.  

Setting it to an array of UV seem to do anything. 

So I reached into the debugger and pulled out this array during the update 

(p is for particle) p._model._shapeUV   which had the array of UV values. 

OK I thought maybe I am getting someplace. So I switched the array and it worked the first time only. 

After that any change to the UV did nothing. 

Well I reached the sum knowledge of what I know to this point.

Ideas?

 

 

[jerome]

http://doc.babylonjs.com/overviews/Solid_Particle_System#uvs

Don't be confused : the solid particle uvs property, despite its name looks like the name of a mesh UV array, is a little different.

• For a standard mesh (the UV array you've got apparently), each pair of floats is each mesh vertex coordinate in the texture image once the mesh "unwrapped" onto it.
• For a solid particle, the uvs property is a Vector4. This Vector4 depicts the bottom left and upper right coordinates of a quad in the texture image. This quad is the part of the whole image to be "cropped" and to be applied onto the particle. You could image it as the particle texture. How is it applied a the particle level ? well, the particle is built from an initial model (remember sps.addShape() ) whom the geometry and the UV were copied from. So each particle can considered at its own level like having the same UV than its model.

In brief,

SPS has one material and one texture.

You can cut quads in the texture image and apply them independently to each particle with the property uvs.

Then, at the particle level, each quad is each particle texture, it's applied on the particle geometry according to the initial UV array of the particle model.

 

The uvs property is only intended to set a different texture than the whole image to the whole SPS or to each of its particles.

[chicagobob123]

• For a solid particle, the uvs property is a Vector4. This Vector4 depicts the bottom left and upper right coordinates of a quad in the texture image. This quad is the part of the whole image to be "cropped" and to be applied onto the particle. You could image it as the particle texture. How is it applied a the particle level ? well, the particle is built from an initial model (remember sps.addShape() ) whom the geometry and the UV were copied from. So each particle can considered at its own level like having the same UV than its model.

 

From what you are saying I dont think the SPS can can work for me. It think I understood but in case I did not.  

I created a texture shown below which shows 6 independent faces for each side of a cube. The UV array and vertices are below as well.  I get the individual faces to show up on the particles. (As shown in the picture below the texture) 

I created a second UV array to point to the top row but I can not change the particles.

Altering the uvs did nothing useful and messed everything up.

(from your statement the particle is for a single face image picture that is repeated on all faces. Not a UV mapped image) 

Note: I would put the entire example into playground but I do not have the ability to put the texture any place accessible. 

So in the end.. I am starting to think that this is not working out.  

 It shows up on a single particle 
 "uvs": [[  0.167,0.0,  0.167,0.5, 0.0,0.0, 0.0,0.5,      // X1
           0.167,0.0, 0.167,0.5,  0.333,0.0,0.333,0.5,    // X2
            0.333,0.0, 0.333,0.5, 0.5,0.0, 0.5,0.5,       // X3       
            0.667,0.0,  0.667,0.5,  0.5,0.0, 0.5,0.5,     // X4        
            0.834,0.0,  0.834,0.5,  0.667,0.0, 0.667,0.5, // X5        
           1.0,0.0,  1.0,0.5,  0.834,0.0, 0.834,0.5  ]],  // X6 

 "vertices": [10.0, 0.0, 5.0, 10.0, 0.0, -5.0,
             -10.0, 0.0, 5.0, -10.0, 0.0, -5.0,    
             10.0, 15.0, 5.0, 10.0, 15.0, -5.0,
            -10.0, 15.0, 5.0, -10.0, 15.0, -5.0,    
             10.0,0.0,5.0,10.0,0.0,-5.0,
             10.0,15.0, 5.0,10.0, 15.0, -5.0,  
            10.0, 0.0, 5.0, -10.0, 0.0, 5.0,
            10.0, 15.0, 5.0, -10.0, 15.0, 5.0,

            -10.0, 0.0, 5.0, -10.0, 0.0, -5.0,
            -10.0, 15.0, 5.0, -10.0, 15.0, -5.0,
             10.0, 0.0, -5.0,-10.0, 0.0, -5.0,
             10.0, 15.0, -5.0,-10.0, 15.0, -5.0
      ],

 

 

[jerome]

Well, I think you could do it this way :

you've got a file with 6 images, each being a side of your container, so just create a standard BJS box using the per face texture feature : http://doc.babylonjs.com/tutorials/CreateBox_Per_Face_Textures_And_Colors#textures

(this is the same concept : a quad cropped in the image then associated to a box face)

Once this box is created with the right uvs settings, just use it as your SPS particle model : each particle will then have the same UVs partition than the box model. So each particle will have 6 different sides. 

[chicagobob123]

32 minutes ago, jerome said:

Once this box is created with the right uvs settings, just use it as your SPS particle model : each particle will then have the same UVs partition than the box model. So each particle will have 6 different sides. 

I don't understand Jerome. Or maybe I am not making myself clear. The second picture shows Babylon Solid Particles System with 6 different sides UV mapped.

What I can not do is change the UV mapping array to display the RED O's on the fly. 

I am stuck with the X's. Its one texture all I want to do is point a new UV array so it can display a different location. 

How can you change this UV array mapping on the fly?

From what I can tell you can't. The UV array mapping is not alterable once its assigned to the particle. 

[jerome]

sorry, I didn't understand well initially.

yep, you are right : you can't change the particle UVs on the fly, they are fixed according to the particle model. I mean : you can't change the way the particle geometry unwraps onto a surface.

But you can change the image of a given particle... if you've got different images in the same texture file. 

So you could have particles with 6 different X per side and other particles with 6 different O per side, the X and O images being in the same texture file.

If I find some time, I'll try to make you a PG with your texture file.

Lead :

- consider for you particle model only a row, say, the Os, so imagine that the texture is twice smaller on its height (no X, only a row of Os) => define your UV for the model as you would do with the per texture feature for the box. You just tell how a box (the model) must unwrap onto a row, right.

- then your model is ready, create your SPS particles from it : each particle will have the same way as its model to unwrap on a surface

- now, from the real texture file (with O and X rows), define two quads : a row of Os and a row of Xs, those are two different surfaces... these quad coordinates are the possible particle uvs.

- you can  then on the fly assign one or the other uvs value to each particle

 

 

[chicagobob123]

I am not sure what quads mean. But I am going to try and figure that out. 

I think an example would help a lot if you get time thanks 

[jerome]

have a look at this commented PG : http://www.babylonjs-playground.com/#2FPT1A#89

maybe not that optimized, but didactic (I hope) :

we use only one image  file : 

Each box has 6 different sizes : this is done by setting the texture per side on the box model (we don't apply any texture to it). We just say each side will receive 1/6th of the image width on its width and the whole image height on its height (like we had only one row in the image file)

Then at SPS initialization, each particle (one of three) is given the upper row of the image by the quad coordinates (0, 0.5, 1, 1) or the lower row (0,0, 1, 0.5). These values are the particle uvs property values.

At last, in the render loop, randomly, we change sometimes the quad (lower and upper) associated to each particle according to its current state. Doing this operation to all the particles each frame is probably not a very good idea in terms of performances, but it's on didactic purposes.

 

Anyway : 1 mesh, 1 texture, 1 draw call but hundreds or thousands of different solid particles.

[EDIT] this one with 5000 boxes still run at 60 FPS in chrome here http://www.babylonjs-playground.com/#2FPT1A#90

5000 particles and a higher frequency of texture update : http://www.babylonjs-playground.com/#2FPT1A#91  still 60 FPS

and just for fun, each frame texture update on each of the 5000 particles : http://www.babylonjs-playground.com/#2FPT1A#92  (60 fps also here)

[chicagobob123]

I tried this last night with my code and it did not work. Now I have to figure out why it worked for you and not me. 

THIS, thank goodness, is exactly what I needed to try and continue. Except I cant load a vehicle from a scene.

Have to figure both of these things today. Running out of time. 

 Thanks. 

WELL DUH! 

Copy and paste without understanding. 

I had one line to many in my code. Guess which one it was 

     sps.computeParticleColor = false; 
       sps.computeParticleTexture = false;   <<<<<<<<<<<<< It was this one DUH!

[jerome]

I commented the code for you step by step.

[chicagobob123]

Oh its working fine now.  Thanks so much for all the patience. 

I had to remove this line  sps.computeParticleTexture = false;  

Which I probably picked up from a particle example someplace. 

[chicagobob123]

Its working just fine. Everything is doing what it should DUH !!! Thanks a bunch.

[jerome]

cool ! 

[chicagobob123]

Wouldn't this be a great way to control an army of characters with different UV Maps?  

Just thinking of it from a gaming perspective. Or you might be able to have 10 layers and have MORPHS from one character state to another. 

Lots of game ideas when you think about it. BUT back to WORK 

[GameMonetize]

You nailed it @jerome!!!!

[jerome]

I will probably add one of this sample in the SPS doc as they depict easily the per particle texture feature combined with the per model side texture one