How Reflector makes the ground realize the effect of Gaussian blur

I hope to get the effect of Figure 1, which makes the smooth ground highlight more realistic, but the final effect is the appearance of Figure 2, which is very strange. I tried to add another layer of mask above the ground and set the opacity to 0.95, but the final effect looked fake (as Figure 3). This problem has taken me a lot of time. I hope someone can help me. Thank you.

:point_down:Figure 1

:point_down:Figure 2

:point_down:Figure 3
screen2

In addition,I found that when using Reflector, it seems that its reflection to Sprite is not normal. In Figure 2 and figure 3, the red label uses Sprite. The projection of Sprite can only be seen at some angles, and the projection direction is not right. Is this a bug of Reflector? How to solve this problem? Thank you.

This can only be achieved with a custom shader. Meaning you have to overwrite the following default shader of Reflector:

I don’t think this use case was ever tested so far. However, there are related scaling issue with THREE.Points, see THREE.Points sprites are not scaled correctly by THREE.Water shader · Issue #11889 · mrdoob/three.js · GitHub.

This can only be achieved with a custom shader. Meaning you have to overwrite the following default shader of Reflector

Thank you very much for your reply. About whether overwrite default shader of Reflector can provide more help, I shall be very grateful. I’m not good at it.

code at Edit fiddle - JSFiddle - Code Playground