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
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


Excellent…Thanks a lot @nasimiasl !!!

1 Like

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


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

1 Like

Hi all, in this sample 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:

1 Like

Hi all, i need to improve with somes GUI´s … 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 … 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 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:


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: 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?


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

Hi @Evgeni_Popov @nasimiasl , i want to draw multiple circles on the sphere when clicking the surface, could you please give some help?
To make multiple circles i found the RTT solution ([NME] Is interactable shader available in NME?).
To draw a well circle on sphere i found the CustomMaterial (vPositionW) solution in this question page.
But when i trying to use them together, i stuked. It seems the effectWrapper can not be used with CustomMaterial(ERROR: 0:8: ‘vPositionW’ : undeclared identifier)

Here is the PG:

It seems what you need is drawing a decal when we click:


Hi @Evgeni_Popov , actually i’m trying to draw animated dots, paths and sections on the surface of the globe earth based on geo data for visualization.
Known sulotions on plane earth: mesh(disc for dot, tube for path, custom mesh for section) + nodeMaterial.
But on globe earth, use mesh on the non-plane earth surface is not a good solution(just in my own opinion), because the element meshes(dot, path etc.) can not fit perfectly on the earth surface, like this:

And i played the decal PG you mentioned above, it just makes the element meshes to fit the surface easier, but also not perfect:

So, i’m trying to find a shader solution to do this.
And another question: if a shader solution can do this, is it possible to interact with it(make dots, paths, sections pickable)?

Or, is there a better way?

Hope you pro guys to give some advice. :slight_smile:

You have a zoffset problem, you must set the zOffset property so that the decal is drawn a bit in front of the underlying object:

It’s the same thing for your first PG but it is a bit more problematic because the polygons extend on big areas over the sphere so you need to use a big zOffset value to fix the z-fighting, but then you have artifacts when you rotate (I have set a zOffset value on the red poly only):

Disabling z-testing and enabling backface culling almost work:

There are some thin triangle artifacts when we rotate because the polys only approximate the sphere. Maybe by triangulating differently / with more triangles you could improve things…

For a shader solution, maybe you can adapt this algorithm for the sphere case but I’m not sure it is easy and that it will be enough for your needs:

1 Like

Thank you a lot! @Evgeni_Popov
I will try with the decal solution to make multi-segment curved path.
And also view the shader solution, but the page (Determining Whether A Point Is Inside A Complex Polygon) is not available for me(maybe the firewall problem in my area), i will try to view this with another vpn later.