Circle/Ring around mouse pointer

Hi, my goal is add a circle/ring around the mouse pointer when i move it over the mesh

. This my start point to do the circle PG https://playground.babylonjs.com/#UIVCZ3#2
My idea with this sample is, when i move the mouse(this sample i have in onPointerDown but my goal is on OnPointerMove) over the mesh, according the radius i get all the facet inside the radius and i paint or add highlight on facet - This is my start point to get the main goal " circle/ring around the mouse pointer ".
How i can improve this… can you help me ?

Thank you very much!

1 Like

nice i don’t know we have it or not but i start make it on shader

https://playground.babylonjs.com/#UIVCZ3#5

5 Likes

Excellent…Thanks a lot @nasimiasl !!!

1 Like

You can use decals to draw something at the mouse location (left click to draw):

https://playground.babylonjs.com/#UIVCZ3#6

3 Likes

:slight_smile: Thanks a lot @Evgeni_Popov another good functionality!!

1 Like

Hi all, in this sample https://playground.babylonjs.com/#8ZQVW1#1 i want click in one of this mesh and start add the material (disc), but when i click one of this mesh, in first time we have a “blink” on mesh and nothing happens, but if i move to other mesh the disc appear and when i go back to the first mesh also we have a disc…
Can you help me understand what is the problem ? Why the disc not appear in first click on first mesh and how can prevent the “blink”?

Thank you very much!!

You have a blink because when you change the material of the mesh it has to be compiled and it takes some time (at least one frame). During this time, the mesh is not displayed anymore, hence the blink.

To get rid of the blink, you should assign the material to the sphere/box right from the start. To have the circle show up as soon as you click, you should set the pointerHover value in the onclick handler:

https://playground.babylonjs.com/#8ZQVW1#2

1 Like

Hi all, i need to improve with somes GUI´s https://playground.babylonjs.com/#8ZQVW1#3 … I need to had the slider to increase or decrease the radius of disc, but until now i can not do that. What i´m doing wrong ? Can you help me ?

Thank you very much!!

Hi all, i think i found it https://playground.babylonjs.com/#8ZQVW1#4 … I needed to add mat.AddUniform(‘radius’,‘float’) before the Fragment_Before_FragColor… But if exist a better solution, tell me please :wink:

Thank you very much!

No that’s ok, but you should remove the line:

    float radius = radius;

as it is not needed.

1 Like

Hi all, sorry to be boring, again :slight_smile:
I have thi PG https://playground.babylonjs.com/#8ZQVW1#6 and goal is: when i click one of this mesh i want add the same radius than i have on diamenter slider on disc, and i want add one more material (matDiffuse), but until now this two material types doesn´t work together.
Can you help me ?

Thank you very much!

A multi material is used to apply different materials to different parts of a mesh (sub meshes). It is not used to apply several materials to the same part, something which is not really possible.

So you need to set the blue diffuse color to the matDisc material:

https://playground.babylonjs.com/#8ZQVW1#8

3 Likes

Hi, I found your playground really helpful for something similar I’m trying to accomplish, but I dont fully understand the code, and I can’t find an explanation of what these functions do in the documentation. Specifically:

  1. AddUniform
  2. Fragment_Before_FragColor

the second one (Fragment_Before_FragColor) is even more confusing because it has nested code in a string - what language is that and where are some variables/values coming from like: vPositionW.xyz. Again, looking at the docs, here I just see shaderPart: string as the parameter.

Are there more up-to-date docs somewhere that I can look at that describe some of these things in more detail?

Thanks

1 Like

sorry for late hey we have 2 kind programming in webgl one in javascript and the second in GPU (shader programming ) so that is why you dont get them because the variabnle defined in standardmaterial shader and we just customize that so you can understand that if you read about “shader” in webgl