Circle/Ring around mouse pointer

Questions
21

Hi @Evgeni_Popov , I have tried these solutions, but still can’t solve my problem.

The decal solution can’t help, because its shape is not easy to control, as i will draw dots, paths and geo sections on it, and i want an accurate mouse interaction when hovering and clicking on decal meshes. The options only allowed me to set a rectangle shape, so i can only interact with rectangle mesh, not the correct shape.

The shader solution should be the correct way, but i still have these problems:

  1. Drawing a huge amount of elements(dots, paths and geo sections ) would bring a performance problem, because of the compilation cost and the for loop cost.

100 dots is ok: https://playground.babylonjs.com/#EVMT6Y#29
2K dots is not: https://playground.babylonjs.com/#EVMT6Y#31

And our goal is more than this, maybe 30K dots.

  1. So i switched to RTT solution, to use the texture buffer feature to lower the performance cost, to draw one dot or a batch of dots at one time, and draw the next batch based on current state. But when i reached here, i was confused.

To draw dots with ShaderMaterial and CostomMaterial are both ok:
ShaderMaterial: https://playground.babylonjs.com/#1OH09K#1015
CostomMaterial: https://playground.babylonjs.com/#EVMT6Y#29

But when i use the same shader code in RTT, it can’t work, seems the varying variable i calculated manually (vPositionW) has some inner problem or conflict.

PG here: https://playground.babylonjs.com/#4C900K#19, and i get this error: FRAGMENT varying vPositionW does not match any VERTEX varying

Can you give some help?

And at the end, reconsidered with performance and interaction, is this the right way?
If it is not, how can i draw a huge amount of elements(dots, paths and geo sections) on any mesh surface, and make them interactable?

22

The effect renderer is rendering a 2D triangle that covers the whole screen, not 3D objects. So world / view / projection matrices don’t exist.

You should not pass a vertex shader (the effect wrapper will used its own one which simply output 2 triangles to cover the whole screen) and don’t use vPositionW in your fragment shader:

If you want to take this route, you will have to draw yourself a circle in the render target texture at the location corresponding to where you want the circle to appear on the sphere. It’s easier to simply use a DynamicTexture and draw into it. See for eg:

It will draw a point in the texture where you click on the sphere. To know the location (x,y) where to draw in the texture, we are using the u/v coordinates of the clicked point. Note that the circle is really an ellipsis because when projected onto the sphere, the circle is deformed into an ellipsis. You will have to counter this transformation by drawing an ellipsis in the texture instead of a circle.

2 Likes
24

Hi @Evgeni_Popov

Considered the border articulation situation, transformation between uv and sphere seems not easy to handle, and it may raise the calculation cost under big data.

Probably, i will change my element design.

Thank you so much for replying my questions! :metal:

1 Like
25

This effect is very useful. Can it be achieved through the EffectLayer? The effect I want is to use it without changing the existing material of the mesh，need to confirm that EffectLayer can process it