Soft mouse follow (ease)

[Pieter_van_Stee]

Hi there,

I was looking for a way to do a soft mouse follow like this example: MIDWAM

In fact you come across this kind of effect/feel in a lot of webgl websites.

How would I best approach this in babylon?

Thanks!
Pieter

[labris]

The effect is 2D mouse tracker with child elements and some positioning and delay functions.
If you want to to it over Babylon canvas, just use usual HTML+CSS+JS.
The approach is shown here - html - I'm trying to get a div element to follow my mouse (javascript), but it keeps glitching - Stack Overflow
Or you’d like to implement this effect into Babylon app with no external HTML and CSS?
(the approach will be the same - some elements are following the pointer with some nice animations)

[Cedric]

A quick try I did :

https://playground.babylonjs.com/#AMQMPH

[Pieter_van_Stee]

Hi, and thanks for responding so quickly with two interesting approaches to get this done.

I played around with this a bit here is the updated version

However my initial question was more about the interaction between the mouse movement and the subtle camera motion that is caused by it. I notice it’s been used on a lot of websites these days to give a bit more the feel like you have an interaction with the canvas.
Also I would like to modify it further in the future to subtlety give control to the viewer when the camera follows a predefined path, where the camera can slightly look around but no full 360° controll.

Maybe also interesting that if after a few sec of idle time the camera returns to the original looking position on the path/driven by the initial animation stored within the camera.

Thanks for the help!
Pieter

[Vinc3r]

Maybe it’s a similar question I’ve asked here, where @Robin_McLaut helped me using a lerp function to get smooth movement relative to cursor: https://playground.babylonjs.com/#H2FTZW#15

[labris]

Here is another example with changing camera direction - https://playground.babylonjs.com/#AMQMPH#4

[Pieter_van_Stee]

Hi Labris,

Thank you for your response.
However it’s not really what I was going for.

Here is the modification that I made.
https://playground.babylonjs.com/#AMQMPH#5
What I was going for was that the mouse movement counteracts the motion you get in the viewport.
The important thing here was that the “start” stays as the center.
I believe this PG will to that.

Let me know if anyone can still think of improvements for this case.
Thanks
Pieter

[Pieter_van_Stee]

@Pieter_van_Stee

important thing here was that the “start” stays as the center

So I continued on my last version and made a few adjustments.
Check the last PG

At the moment I’m stuck trying to define a function so that in the future I can easily and dynamically define these mouse pointers with a function.
Therefore I’d like to use dynamically declared variables so that if there are more items/objects they can be declared within the function.

The issue seems to be that the value

window["px" + count]

Can’t reach to within the

scene.onBeforeRenderObservable.add(()=> {

Because when I log it there, it returns a NaN.

Any help is welcome here, as I’d like to use this kind of dynamically declared variables frequently in the future.

Thanks
Pieter

[Blake]

Hey there, an issue here is that the onBeforeRender function is bound to the variable count, which always has the value 3 after the loop is finished. One quick way to fix this is to declare a variable inside the for loop body which will hold the current count value.

Here I named this new variable index for example, initialize it to the current count value, and then use index in place of count in the onBeforeRender function.
https://playground.babylonjs.com/#AMQMPH#11

[Pieter_van_Stee]

@Blake

Hey there, an issue here is that the onBeforeRender function is bound to the variable count, which always has the value 3 after the loop is finished. One quick way to fix this is to declare a variable inside the for loop body which will hold the current count value.

Here I named this new variable index for example, initialize it to the current count value, and then use index in place of count in the onBeforeRender function.

Thanks Blake,

So if I understand correctly, we have the

const index = count;

Which prevents the the count within the onBeforeRenderObservable from being the same as the last count?

This seems to resolve that issue, but in this case the old function

PointerUI(scene, hidePointer = true);

was still turned on, which generated the custom pointer in this case. If I comment it out, the pointer doesn’t appear. Am I still missing something within the PointerUIGenerator function for this?

Thanks!
Pieter

[Blake]

Here we go, got it working I think. There were a few issues to fix:

1. Using the wrong indexes into the graph array. Probably using a Graph class instead of an array would cut down on these kinds of errors, that way you don’t have to remember which property is stored at which index in the array.

2. For the LERPing, = needed to be changed to +=. Also some issues using y instead of x.

3. You were using var for name and followDelay, which causes them to be created only once, so they always have the last value assigned to them. If you use const or let instead then a new variable will be created for each loop iteration and will be bound to the created observable function.

https://playground.babylonjs.com/#AMQMPH#12

[Pieter_van_Stee]

Great @Blake

Thanks for the sample code, that’s something I can work with and further develop.
I might be getting back to this as I’d like to add more information and functionality to the mouse pointer so that if you hover over an object it can give you more information about what you can do with that click/drag action.

Thanks
Pieter