How to get a mesh face in Solid Particle System with pickWithRay

[Valeriob]

Hi,

i created a Solid Particle System with box shapes, and i was able to get the particle picked by a ray.

I would like to draw something (another mesh, with some text probably) on top of the box shape on the face that was picked.

I tried the following, and i see particle._model._shape, how can i use face.faceId to reconstruct that surface ?

Thanks ! 

let info = this.scene.pickWithRay(ray);
let face = sps.pickedParticles[info.faceId];
let particle = sps.particles[face.idx];

let someArrayOfPointsToBuildA2dSurface = someMagicFunction( particle._model._shape, face.faceId);

 

[Guest]

Pinging @jerome

Wingnut uses moderator perms:  Potential testing playground:  https://www.babylonjs-playground.com/#2FPT1A#229

[jerome]

back

quick answer :

the model shape is simply a reference to the geometry of the model used to build the current particle, so I don't think this will help you (this is the geometry of a box in your case).

http://doc.babylonjs.com/how_to/solid_particle_system#pickable-particles 

If you want to change one face of a given particle, you need to catch the picked particle, what you already know how to do, then to catch the picked facet of this particle (counted in the particle facet pool) with the property .faceId

let info = this.scene.pickWithRay(ray);            // get the ray pickingInfo
let face = sps.pickedParticles[info.faceId];    // get the pickedParticle object in the SPS mesh
 

this object has two properties :

.idx : the particle index giving you then the particle in SPS with sps.particles[face.idx]

.faceId (same property name than for the previous pickingInfo object) : the facet number  counted in this particle geometry.

As you built your own SPS, you know then what geometry you used as a model to design each particle, in your case boxes. This second property value will give you what faced of the box is picked on the picked particle, so something between 0 and 11 (a box is 12 triangles). You could then change this particle UVs on the fly to modify the texture. Note this won't be that simple because of the initial UVs of the model. Maybe it's easier to stick a planar quad particle with the wanted texture on the picked box face instead ? 

[Wingnut]

19 hours ago, jerome said:

Maybe it's easier to stick a planar quad particle with the wanted texture on the picked box face instead ?

Thx @jerome.  Any chance you could use my PG... to teach us HOW to do that? 

Maybe one version using a standard plane, and one version with a quad particle?

On 10/31/2018 at 12:49 PM, Valeriob said:

I would like to draw something (another mesh, with some text probably) on top of the box shape on the face that was picked.

I think Valeriob meant to say "on the side that was picked".   "Face" is a gray/wobbly term, at least in the USA.   In real life general conversation, it means side.   In 3D land, it means a triangular section.    For noobs... you can see the TWO triangle "faces" (facets?) that create the "side" of a box... by setting box.material.wireframe = true;   Warning:  I don't think wireframe mode is possible on SPS boxes.

Jerome... can/would you show us both ADDING and REMOVING the picked-side plane/quad?  Anyone?  (thx)

I am also curious about how to parent the 0-6 side-covering quads/planes... so it/they transforms (positions, rotates, scales) WITH the selected box particle.

Perhaps allow a "grouped" or "compound" SPS particle?  The box particle would be made-of 6 standard planes.  It would ACT like a single particle... until picking started.  Then... it would allow picking-per-side.

I bet that would be very difficult to do.  It probably needs heavy SPS system mods that will hurt perf.  Crazy ideas... sorry. 

Maybe it is best NOT to use SPS particles, and instead.... use 6-plane boxes, with planes parented together.  I dunno. 

I (and maybe Val) could use more user-friendly PG demos and ideas, please.  Side-selecting on boxes... is a fairly popular webGL activity  (just like color-per-side and texture-per-side is super-popular on meshBuilder boxes).

Perhaps we could start a new series of playgrounds... beginning with that #229 demo code.  *shrug*  I want to TRY to make this easy/friendly.  (don't we all?)    Yet we don't want to slow-down the performance-tweaked particle systems.

[Valeriob]

Thanks everyone !

Wingnut  is right, i just wanted to draw some text on the spot of the side of the box picked by the ray. I do not want to modify the sps, i can just draw a surface on top of that cube side (adding a small offset to the direction of the normal).

I'm experimenting a bit and i copied what babylon.solidParticleSystem.ts  _rebuildParticle does to be able to reconstruct the "side" picked. Then i created a custom mesh to draw the surface on those points. It's a lot of work but seems working.

My problems originate from my inexperience as jerome explained : ".faceId (same property name than for the previous pickingInfo object) : the facet number  counted in this particle geometry."

So FaceId is indeed a FaceT id, here was my confusion.

 

Another solution would be to build the mesh again from the business data, and then apply the texture only on the picked side.

Valerio

[jerome]

https://www.babylonjs-playground.com/#2FPT1A#231

this is buggy but this is the simple approach :

- I added a first quad planar particle in the SPS, this particle is invisible by default 

- when picking a box particle, this box is set as the quad parent, and the quad is set as visible and  located/ rotated in the picked box local space according to its picked side (what is buggy and unfinished in my example, but you can understand the way it works... just identify each box side one by one) :  http://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors  )  

http://doc.babylonjs.com/how_to/solid_particle_system#particle-parenting