How can I add a 3d object as a marker on Google Maps like Uber does

Question

I want to add a 3d marker for showing cars on map with rotation like Uber does but I can't find any information on adding 3d objects on Google Maps SDK for iOS.

Would appreciate any help.

Apparently no one is seeing what OP and I are seeing so here's a video of a Uber car turning 90 degrees. Play it frame by frame and you'll notice that it's not a simple image rotation. Either Uber went through the trouble of doing ~360 angles of each vehicles, or it really is a 3D model. Doing 360 images of every car seems foolish to me.

First of all Uber not using any 3D object for marker its just an image with shadow color on car image so same thing you can use it in your image thats it. — CodeChanger, Dec 05 '16 at 13:03
Are you sure you have seen the latest version? [link](http://imgur.com/a/Iz6r2) — Tolgahan Arıkan, Dec 05 '16 at 13:18
Yes I have seen latest version of Uber and i am sure that is an image with shadow effect. — CodeChanger, Dec 05 '16 at 13:22
Are they using multiple images and change the image too as the rotation changes then? — Tolgahan Arıkan, Dec 05 '16 at 14:03
@CodeChanger so there is 360 images of very category? what are you saying man? really? — amalBit, Dec 22 '16 at 10:03
No there is nothing like 360 images but you can rotate image in CG and that is the logic behind this. — CodeChanger, Dec 22 '16 at 13:02
@CodeChanger you should have a closer look at the app. The perspective of the cars change based on its heading and where they are on the map. — samvermette, May 31 '17 at 01:41
Yes you are correct based on heading of map and location updation car image moved and rotate thats it nothing else — CodeChanger, May 31 '17 at 05:27
@CodeChanger have a closer look at the screenshot above. It's not just the image getting rotated. — samvermette, May 31 '17 at 12:47
Replaced the screenshot with a video since it seems no one is seeing it. — samvermette, Jun 03 '17 at 00:20

Felix Lapalme · Answer 1 · 2017-06-07T21:08:56.123

35

From what I can tell, they are not using 3D objects. They are also not animating between 400 images of a car at a different angle. They're doing a mix of rotating image assets and animating between ~50-70 images of a car at different angles. The illusion is perfect because it really does look like they used 3D car models !

Look at this GIF of a Uber car turning a corner (Dropbox link):

We can clearly see that that the shadow and the car's view angle doesn't update as often as the car's rotation.

Here I overlaid 2 images of the car at different angles, but using the same car image:

We can see that the map is rotated ~5 degrees but the car image is perfectly clear because it hasn't changed, it was simply rotated.

edited Jun 07 '17 at 21:08

answered Jun 07 '17 at 20:05

Felix Lapalme

1,058
1
11
25

1

That slow-mo GIF is super helpful and confirms your theory. Thanks! – samvermette Jun 07 '17 at 20:43
1

Base on what the images are being rotated? – Brian Nezhad Jun 07 '17 at 21:33
@Farhad that's not what the question is about – Felix Lapalme Jun 07 '17 at 22:10
1

@FelixLapalme But its relative, if we are talking about the perspective of multiple image, how different perspective presents them self in the view? I mean there is many theories to create such an illusion. I'm not saying your wrong though, your method work prefect but it doesn't explain how perspectives are coming to live. – Brian Nezhad Jun 07 '17 at 22:31
so @FelixLapalme can you help in achieving this animation? – Er. Khatri Jul 27 '17 at 07:03
Yes, to my best knowledge, I know Uber and other rideshare apps use images to display the car driving on the map, – Chauyan Apr 07 '20 at 20:55

score 13 · Accepted Answer · answered Mar 06 '19 at 19:47

Uber just released a blog post documenting this.

It looks like the vehicles were modeled in 3D software and then image assets depicting different angles were exported for the app. Depending on where the vehicle is on the map and its heading then a different asset is used.

score 5 · Answer 3 · answered Jun 02 '17 at 13:31

5

First, they are NOT 3D Objects if that's what you referring to (It's possible to create one though, but waste of time) They are simply 3D image created in Photoshop or Illustrator (Mostly) that have 3D perspective (It's also retina optimized, that's why it looks very clear).

The reason you see that the car is rotated its because the UIImageView that the image is being held into is rotated (using CABasicAnimation mostly) using calculation base off of 3D device position (Same technology use for running apps to track your location etc), which you can use Core Location to retrieve that data.

It's a proccess, but very doable. Good Luck!

answered Jun 02 '17 at 13:31

Brian Nezhad

6,148
9
44
69

Please see my edit in the original question. This is not a simple rotation: https://www.dropbox.com/s/sngka80y99c9kh3/uber-cropped.mov?dl=0 – samvermette Jun 03 '17 at 00:17
It's still a rotation that is calculated by the user (Driver) phone compass degree. Like I say, you can create 3D objects if you want (waste of time), but that's defiantly a retina image. And to answer your "rotation for every single car is foolish", it's not, cause they use server like Redis to store that type of data for just a short period of time (possibly 2-3 second) then it get deleted, that's what Memory cache Database are made. – Brian Nezhad Jun 03 '17 at 11:13
What youre describing is how the old Uber app used to display vehicle images. If you take a close look at the video I posted above you will see that the 3D PERSPECTIVE of the vehicle is changing WITH THE ANGLE. That's not a mere rotation. Either in addition of rotating the car they're also changing the image to show a new perspective or it's a 3D object and that is what I'm trying to figure out. I can't believe this answer got 10 upvotes when it's completely missing the basic detail that the image isnt just getting rotated! – samvermette Jun 07 '17 at 02:58
2

Yes, I really can't understand why people are not seeing the issue here and keep making the same explanation... – Tolgahan Arıkan Jun 07 '17 at 07:10
@samvermette I see what you mean now. Well it's a 3D object that was create with possibly SceneKit and placed within a view. Like I say it's possible to make 3D object still. But the rotation is still using Driver compass degree. – Brian Nezhad Jun 07 '17 at 11:46

Ronald Cardenas · Answer 4 · 2019-06-05T06:18:07.917

4

Thanks All answers are valid.

if you want you can see the video running, how it works

You can generate sprite sheet ( around 60 ) tiles

How i implement it and tools you need

3d source car model.
blender, animate camera using path animation elipse.
camera rotate around of car from top to bottom view
render 3d marker using sprite generated with blender, for angles use bearing change on location updates.

Your vehicle needs to be rendered to support most screens, so the base size for each tile was 64 px and I was scaling according to the dpi of the screens

Result implementation:

https://twitter.com/ronfravi/status/1133226618024022016?s=09 enter image description here

edited Jun 05 '19 at 06:18

answered Jun 05 '19 at 05:41

Ronald Cardenas

146
1
4

2

Hello Ronald, can you provide more details or code snippet regarding how you managed to do it? – Tushar Gogna Jun 21 '19 at 07:24
hey ronald can be so kind to share piece of code this. it will be very helpful for many of developers like me. thanks – Khalid Saeed Sep 30 '20 at 11:55

score 0 · Answer 5 · answered Apr 06 '20 at 14:59

I believe a pair of marker images, one is the real marker, and another one is a darker blurry shadow can do the trick in a cheaper way. Putting the shadow marker beneath the marker, shifting X & Y axis to an amount where you feel the shadow would be put appropriately, and finally moving them as well as rotating them (on web version, you may need separate rotated images) at the same time should be able to [re]create the illusion.

As @Felix Lapalme already explained it beyond any easier, am not diving any deeper into explaning it.

score 0 · Answer 6 · answered Oct 11 '20 at 11:16

0

check out my repo I used a dea model and turned it according to the heading variable https://github.com/hilalalhakani/HHMarker

answered Oct 11 '20 at 11:16

Hilal

23
1
7

score 0 · Answer 7 · answered Oct 27 '21 at 01:57

0

I achieved this in Xamarin by rendering three.js in a webview then sending the image buffer directly to the marker instead of drawing it to the screen. It only took a couple of days, and for my use case it was needed because I want the drivers to be able to change the color and kind of car, but if this is not the functionality you need you're better of just using a sequence of rendered images.

answered Oct 27 '21 at 01:57

Jonathan Adams

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 27 '21 at 04:15

Raksha Saini · Answer 8 · 2017-06-19T09:46:45.213

If you want to Rotated your image as the marker. Want to show a moving object you can use .git image. It would be help full for you.

Swift 3

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)

//Rotate a marker
let degrees = 90.0
let london = GMSMarker(position: position)
london.title = "London"

//Customize the marker image
london.icon = UIImage(named: "YourGifImageName")
london.groundAnchor = CGPoint(x: 0.5, y: 0.5)
london.rotation = degrees
london.map = mapView

For more info Please check here

How can I add a 3d object as a marker on Google Maps like Uber does

8 Answers8

Linked