topic Re: [SceneView] Moving the camera around / camera tracking in ArcGIS JavaScript Maps SDK Questions

[SceneView] Moving the camera around / camera tracking

VictorBerchet — Sat, 19 Sep 2020 23:00:04 GMT

I am the developper of flyxc.app which is an application used to display paragliding flights.

You can see an example here. 3D support has just been added as I have only discovered the ArcGis API lately - it's really great !

Next thing I'd like to implement is to track the pilot when the cursor moves on the timeline at the bottom of the screen (as of now you have to click on the timeline to sync the pilot position. Using the mouse wheel on the timeline zooms to the pilot position).

When I tried to update the camera position each time the cursor moves on the timeline, I got a lot of "AbortedError" and most moves were not actually taken.

Does anybody have some experience about tracking a moving object with the camera in a SceneView ?

I guess it should be possible as you can track a moving object using your mouse. However I am unsure doing it with the API. Any help is welcome.

Thanks

Re: [SceneView] Moving the camera around / camera tracking

ArnoFiva — Tue, 22 Sep 2020 16:44:54 GMT

Hi Victor,

thanks for the question! Can you be a bit more specific how exactly you update the camera? The AbortedError messages are probably because you use goTo() with animations. Try disabling the animations when you call goTo().

There are a few presentations and demos out there that create a smooth camera animation, with and without user interaction. These resources might help:

https://github.com/dkoerner/arcgis-js-api-3d-web-editing-demo (make sure you select camera path first in the upper right corner)

https://codepen.io/arnofiva/pen/f322dfcd4ed1d18ba41fa94696c86a83 (press play button on the left)

https://esri.github.io/devsummit-eu-2019-3D-jsapi/using-animations.html#/27 (move through the slides with the right arrow and press play button)

Some of them do have a lot code, so depending on what camera movement you want to do I'm happy to point you to the specific places!

Re: [SceneView] Moving the camera around / camera tracking

VictorBerchet — Wed, 23 Sep 2020 21:18:32 GMT

Thanks a lot for the detailed answer Arno !

My code was using goTo() with [I think] animation disabled. I deleted the animation code as it was not working.

It wasn't a lot of code and I'll reproduce in the coming days and let you know about the outcome - I'll check your link before.

There are 2 types of animation I want to do:

- Keep the glider at about the same place on the screen when it moves - for that I need to apply the same changes to the camera position that are applied to the glider position[1],

- The most challenging thing I'd like to do is to be able to follow the glider with some kind of tracking algorithm. Kind of what Ayvri does if you know it. However the given algo is outside of the scope of the API but if someone has some pointers on an algo, I'll take them.

[1] "same changes" is a first approximation that would be good enough to test.

Re: [SceneView] Moving the camera around / camera tracking

VictorBerchet — Fri, 25 Sep 2020 04:53:39 GMT

I confirm that settings the `view.camera` directly works great.

Not sure what I was doing wrong last time when I tried.

Thanks again Arno.

Re: [SceneView] Moving the camera around / camera tracking

ArnoFiva — Fri, 25 Sep 2020 09:18:18 GMT

Good to hear setting view.camera worked! Yes I've seen the camera tracking they use in Ayvri, it's a nice example of allowing the user to freely navigate but still keep the glider in the center of the view. I also like the wall visualizations they created below the gliders path, something that should be feasible to do with PathSymbol3DLayer.

As I understand you are still experimenting what type of camera tracking works best. As there is no single best approach to this and providing a smooth user experience depends a lot on the specific use case, I would suggest to look into the following topics. The examples I posted above all use a combination of these techniques:

Generalize geometries - there is the JavaScript API geometry engine for 2D geometries: https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-geometryEngine.html. In your case however you might just want to simplify using the time information in the GPX track.
Smooth lines: splines are a great way to create smooth curves from straight lines. Three.js has a nice implementation of Catmull-Rom curves for 3D points: https://threejs.org/docs/#api/en/extras/curves/CatmullRomCurve3
Easing: I found this tutorial very helpful showing how you can use linear interpolation to ease animations: https://codeburst.io/scroll-based-animate-timeline-with-easing-functions-on-a-webgl-scene-ef7c3f5a8d9b. This could be applied to any movement in the scene (glider progress, camera tracking)

Hope this helps and please feel free to share any progress with us or reach out if you have more questions!

Re: [SceneView] Moving the camera around / camera tracking

VictorBerchet — Tue, 06 Oct 2020 03:29:59 GMT

Thanks a lot Arno for even more great pointers (I am sorry, I only see your message now. Something must be wrong with my notifications).

> it's a nice example of allowing the user to freely navigate but still keep the glider in the center of the view.

Unfortunately I think this will be hard to do with the current Arcgis API as the (mouse) navigation is not really flexible. What I'd like to do is to be able to get the event (mouse panning) and decide what movement I want to associate to it (I created a post and an idea about that here).

> I also like the wall visualizations they created below the gliders path, something that should be feasible to do with PathSymbol3DLayer

Thanks for that pointer. I was actually thinking about using a Mesh and started some experiments.

PathSymbol3DLayer might be enough here (even if it a little less flexible).

> Generalize geometries ...

I was thinking about a simple low pass filter. The reason is that as you said I need to conserve the time information and I am not sure if the other algos you mentioned would play well with that. It should at least be good enough for a first test (and easy to implement).

I'll keep you posted,

Thanks again.

Re: [SceneView] Moving the camera around / camera tracking

VictorBerchet — Thu, 08 Oct 2020 20:13:32 GMT

Hey Arno,

I have just implemented the camera tracking.

You can see an example here.

You will see the camera tracking if you move the cursor on the graph below the map or if you use the play functionality (top right of the graph). You can switch pilot by clicking on a track or using the second to the last green control on the map (Click on the ">").

It probably still can be improved but I'm already happy with this first version that only took a couple hours to implement.

Thanks a lot for you help along the way and also to ESRI for this great API !

Re: [SceneView] Moving the camera around / camera tracking

ArnoFiva — Wed, 14 Oct 2020 09:05:41 GMT

Thanks for sharing and nice job on that app, I'm glad the resources helped you to get up to speed! The team really likes the 3D models you used for the paraglider

Please let me know if we can be of further help!