Custom zooming

[RyanONeill1970]

I have a particle system and some walls ( https://www.babylonjs-playground.com/#8PY6X5#15 ), if you move the mouse around you can see the last mesh touched is tracked by using a red sphere.

There is a reason for this, I'm trying to zoom in to the last place that the mouse was so it zooms like a slippy map (Google, Bing, Yahoo maps etc.). A slippy map will zoom on a 2d surface to where the cursor is (for an example, see Google maps) so that it is more intuitive and the origin of the zoom is from that point.

I've removed the ArcRotateCameraMouseWheelInput so I can use my own mouse wheel tracking.

The walls should remain static with only the particle system expanding.

Two questions;

1. I think the zoom is done, but I can't get my head around the next bit which is to translate the SPS mesh step by step as the zoom happens via the last mouse position (mouseSphere in code). I've left a TODO marker in the code where I think this should be handled.
2. The mouse tracking drops frames compared to the example I copied it from ( https://www.babylonjs-playground.com/#2FPT1A#68 ) which was far more complex. Am I doing something dumb?

If you want to know what this is for, it's a data visualisation and the walls will consist of labelled axes.

Hopefully that makes sense.

Regards

Ryan

Edited December 2, 2018 by RyanONeill1970
Fix version of playground code.

[RyanONeill1970]

I've somehow stumbled onto the right code and not sure how, but it works as expected except for the slowness of the mouse tracking so any thoughts on that would be helpful.

Simply using SPS.mesh.setPivotPoint(mouseSphere.position); works as I want it to.

New custom zoom is at https://www.babylonjs-playground.com/#8PY6X5#16

To reiterate my speed question 'The mouse tracking drops frames compared to the example I copied it from ( https://www.babylonjs-playground.com/#2FPT1A#68 ) which was far more complex. Am I doing something dumb?'

[RyanONeill1970]

Still not sure why the other example and mine differed so much in GPU performance but I've found the 'go faster' button so it works a lot smoother now.

In the call to scene.pick I set fastCheck to true which stopped at the first mesh it hit.

pickResult = scene.pick(scene.pointerX, scene.pointerY,null,true);

 

https://www.babylonjs-playground.com/#8PY6X5#17

Am I doing this right? Seems OK now.

[sable]

The reason it was quite slow is that spheres have a lot of faces, and the pick function has to iterate over each one to find the picked point.

The fastPick version doesn't behave in the same way as the original, as it generally is just stopping at the ground/wall intersection, so is not putting the mouse sphere on the SPS.

You can implement your own picking for the sps, and do ray sphere tests, https://www.babylonjs-playground.com/debug.html#8PY6X5#18, which is much, much, faster.

If the particles aren't spheres, then you could do the above using spheres as bounding spheres, and then get the actual picked point from an intersection test with just the closest particle.

I'm not sure the zooming in is quite working as intended, as if you move the mouse once already zoomed in, and then zoom out or in, the sps jumps to a new position. Probably need to do some sort of correction given the current pivot point.

 

 

[RyanONeill1970]

Thanks @sable , it's mostly working apart from as you say, the jumping around when changing position.

I can't get my head around the correction that is needed. If anyone has any input it would be greatly received.

[RyanONeill1970]

I just noticed all the extra work you did in the playground @sable, did that come out of your head? That's very impressive, would take me quite some time to figure out what is going on there.

Thanks again

[sable]

Was mainly just copied from a project I've been working on which faced similar performance issues with picking sphere particles from a sps, with corrections for the pivot point changing.

I''ll try and take a look at sorting out the jumping in the next few days, but post back if you get it sorted before then.

[RyanONeill1970]

I've made progress but it still suffers from changing origin when zoomed in (https://www.babylonjs-playground.com/#8PY6X5#22). I think I need to watch more tutorials as I am missing something.

Seeing as I've spent all week on this I think I'll move on to a different problem and give myself a break.

If anyone can see what I've done wrong, I'd be very appreciative.