Issues with Mouse Cursor Shape made with 'Afterimage' Post-processing filter

Questions
, ,
1

I’ve been working on implementing a custom cursor at the top of my scene by utilizing the ‘Afterimage’ post-processing filter. While I’m not entirely sure if this is the right approach, I decided to give it a try. My aim is to display the ‘afterimage’ in a circular shape around my mouse cursor. I’ve managed to make it work to some extent, but I’m facing problems in achieving a perfectly circular effect.

so i tried to modify the shader in this way:

‘void main() {’,
’ vec4 texelOld = texture2D( tOld, vUv );‘,
’ vec4 texelNew = texture2D( tNew, vUv );’,

    '	float distance = distance(vUv, mouse);', // i take the distance between the pixel and the mouse cursor but of course i should find a way to have something like distance.x and distance.y*screenratio to have a perfect circle. but i dotn find the way top do it
  
    '	if (distance < radius) {', // so  effect is applied to all pixels within the radius
    '		texelOld *= damp* 1.2* when_lt( texelOld, 0.4 );',
    '          //texelNew*= damp* 1.2* when_lt( texelOld, 0.3 ); ',

	'    } else {',
    
    '        texelOld *= damp * 0.1 * when_lt( texelOld, 0.9 );',
    '    }',
    '	gl_FragColor = max(texelNew, texelOld);',

    '}'

on the image you can see the shape of the cursor (bottom middle) wich is pretty ugly , i tried so many ways to change the conditions in the shader that it could display the right shape. thnaks for help.

cursor
cursor1920×1055 50.5 KB

2

It may not be the result you’re after but that image looks cool

3

well thanks … all is working except that cursor shape :frowning: its cool because it make the afterimage effect working around the cursor while i move it but the shape is ovale wich is not nice)

4

no idea what im looking at , i cant make out anything that resembles a cursor. would you provide a live link, or a video, or maybe mark it red?

ps, if you haven’t yet, try meshtransmissionmaterial instead of meshphysicalmaterial. the former looks a hundred times better for stuff like that because it has real anisiotropic blur and optional chroma.

1 Like
5

thanks that look amazing. i m gonna try it tomorrow.

6

5cc0d8aa167287a17ece5f20f61c1541c9450607
5cc0d8aa167287a17ece5f20f61c1541c94506071920×1055 82.5 KB

here you can see the ovale where you can see the afterimage filter; so it look like it follow the cursor because it works like this : the filter is aplied stronger around the cursor.but i couldnt find a way to make is visible in a perfect circle.

float distance = distance(vUv, mouse);

if (distance < radius) {
texelOld = damp 1.2* when_lt( texelOld, 0.4 ); ///the effect is stronger in tha area
} else {
texelOld *= damp * 0.1 * when_lt( texelOld, 0.9 );', ///the effect is nearly to 0
}

the problem is not specific to three.js , its just i cant find a way to have an area perfectly round. And the more stronger i use the effect the more you see the ovale shape. i should find a way to take about the ratio of my screen.
Its maybe not the best way to make an effect that look like following the cursor but that’s the only way that came to my mind :slight_smile:

7

the coordinate system of uv scales with the screen resolution, which means that x axis unit is slightly longer than y axis on the screen.
If you are trying to make the shape circle instead of oval, There is a good ol’ shader technique to make the coordinate uniform:

vec2 p = (vUv * 2.0 - 1.0) * resolution / min(resolution.x, resolution.y);

(hope you have an access to the resolution)

Now the p is a coordinate where (0, 0) locates in the center of the screen, and the x-y unit is uniform.
Note that you also need to transform the mouse coodinate in the same way.