I do something wrong with mesh.intersectsPoint(otherMesh.position)...

[willemmulder]

Hi guys,

 

I'm creating a simple selection-mechanism with a 'rubberband' which selects all the meshes within that rubberband.

What I have now is this:

 

http://www.babylonjs-playground.com/#4EPTA

 

For selection, I check the intersection of the generated rubberband mesh (line 122) with the existing box positions and if they intersect, the selected boxes get a green color. Like this:

 

        function getMeshesSelectedByRubberBand() {             var meshes = [];             for (var index in boxes) {                 var box = boxes[index];                 if (game.rubberBand.intersectsPoint(box.position)) {                     meshes.push(box);                 }             }             return meshes;         }

 

but as you can see the wrong boxes are selected, and I don't understand why... Do anybody see anything wrong?

[iiceman]

Hi willen,

 

I played around with it for quite a while now and didn't get it to work with the intersect methods, no clue why... maybe there is a bug or we both were doing something wrong here maybe somebody else can enlighten us.

 

Anyways, I tried a different approach and it seems like I succeeded: http://www.babylonjs-playground.com/#PSKRF#0

 

The idea is to do the intersection check manually by calculating the distance between the center of the bounding box and the boxes and then just check if there are closer than half the size of the rubber band box.

 

Here is another (fancy) version where the box updates while you drag: http://www.babylonjs-playground.com/#PSKRF#1

 

Hope that helps! Let us know about how it goes and if you need anything else!

[willemmulder]

Hi iiceman, 

 

Thanks so much!

 

Your method works perfectly, so I'll be using that, but in the meantime I'm really interested if somebody else can figure out why the normal intersect methods in the demo don't work as expected...

 

A small follow-up question would be how to make a simple 'flat selection ring / circle' around the selected objects instead of changing their color... (also posted here, no answers http://www.html5gamedevs.com/topic/19636-how-to-create-a-selection-ring-like-in-starcraft-2/). Do you have any pointer that I could look at?

[Temechon]

Maybe you can use decals  on the ground below.

[willemmulder]

Well yes, but then I'd still need a mesh that looks like a nice selection-ring I guess :-)

[Wingnut]

Hi Willem...  good to have you on the forum with us.

 

http://www.babylonjs-playground.com/#1OLW0N

 

I made some minor changes.

 

Oddly enough, the whole problem SEEMED to be fixed by adding line 128...  a scene.render().  You made the selection box fine... (fun/useful code, by the way)... and everything seemed right, but it needed to be kicked (with scene.render) to get it started. 

 

I dunno.  I just went feeling around in the dark until something worked.  heh

 

I will leave it to you... to figure out how to make the selection area be see-thru... when drag goes from upper-right to lower-left.  Cool demo!  Fun collaborating.

 

By the way, decals make their own mesh when they are created, so you can plaster one onto the ground without worrying about making a mesh for the decal texture.

 

Also, there is mesh.showBoundingBox = true/false... for indicating "mesh is selected".  Also, we have an "edges renderer" that can be used.  And, you can make a CLONE of the object and set its material to wireframe, and place the cloned wireframe mesh...  atop the selected mesh (you might need to set selectedmesh.visibility = 0.5).  And, speaking of visibility... you could sweep that value in the renderLoop (maybe with a sine wave)... between 0.5 and 1.0.  In other words, the mesh cycles half-visible-full-visible... when it is selected.  Fancy! 

 

http://www.babylonjs-playground.com/#TYAHX#21 - a demo where I was testing the logic of the edges renderer... to see how well it "found" edges... even when there was very little angular change between faces of the sphere.

 

All in all, showBoundingBox, decals, edgesRenderer, visibility pulsing, or overlaying a wireframe... these are all ways of showing something being selected... WITHOUT using a material color change.  There's many more, like scaling pulsing, spinning, vibrating the mesh randomly, swimming a sine wave thru its vertex positions, lots of goofy toys to play-with.  Ok, party on!

[iiceman]

Nice fix Wingy! I took a look at the bounding boxes when I played around with it. I was hoping I could use them to calculate the size of the rubber band but it didn't work out somehow. Maybe it's the same problem with the intersect method and the scene.render() somehow forces a bounding box update? Somehow I remember having ready something similar...I think

 

I refactored a bit and made the rubber band rescale instead of recreating it all the time: http://www.babylonjs-playground.com/#PSKRF#2

 

I took a shot at the selection circle, too: http://www.babylonjs-playground.com/#PSKRF#3

Using dynamic texture to draw a circle on a disc mesh that is then placed under the mesh. I think it looks pretty neat, but that's for you to decide, willem.

 

Edit: since I had a good run I kept going and added a cool dashed line + spinning effect. You can have a lot of fun with dynamic textures: http://www.babylonjs-playground.com/#PSKRF#4 Fancy, eh?

[willemmulder]

Guys you are so awesome! 

 

It's so great to come to this forum as a newbie, start trying something out, and get this incredible help, pointers, enthousiasm, examples   This feels like collaboration how it is meant and I will surely try to give back once I know my way around 

 

Thanks Wingnut, I'll surely go with the scene.render() fix so that I can use as much standard code as possible. The edges renderer is nice too, I'll probably use it later for some other uses.

 

iiceman, re-using that rubber band is a great idea, thanks for sharing the demo.

And the circle is even more awesome, I didn't know I could use 2D canvas as a texture: excellent! And yes, it certainly looks great   

 

 

This playground is really one of the most useful things of the framework; it makes iterating, showing, helping so much easier!