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.
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.
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.
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!
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
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.
check out my repo
I used a dea model and turned it according to the heading variable
https://github.com/hilalalhakani/HHMarker
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.
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
I'm trying to write an augment reality app for iOS tablet. For this I use AVFoundation classes to translate video from camera to screen. The augment objects are simple UILabels "flying in the air". It must look like the labels are in front of you and save the position even if you rotate the tablet. As usual i'm using CMMotionManager to capture device gyroscope data.
My problem is - I can't correctly apply device rotation quaternion to the flying UILabels.
The labels are rotating around they own axes, but they must rotate "around the tablet axes".
How to describe this mathematically? For now i only have an idea of a imaginary sphere that is around the tablet, the labels are positioned on this sphere and when you rotate the tablet than this imaginary sphere is rotating with labels in opposite direction around the same axis.
I don't wanna use any 3rd party libs.
I have worked on a similar app. But in my case the scenario was a little different. I was using UIImageView instead of UILabel. What I did was I made another UIView and made its background to default/transparent. And on that view I placed my UIImageView which rotates when UIView rotates but the CameraView UIView was creating problems with rotating. Luckily as per my requirements I have to force the device orientation to stay in landscape mode. For which I used:
- (NSUInteger)supportedInterfaceOrientations
{
return UIInterfaceOrientationMaskLandscapeRight;
}
and
- (BOOL)shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation)interfaceOrientation
{
return YES;
}
So add a transparent UIView. Then check if the problem still remains define your UIInterfaceOrientationMask in all the four possible orientations and see if it works or not.
At the end i decided to use this library: https://github.com/antonholmquist/rend-ios. Its not that easy to make this task on pure UIKit.
Was playing around with CAEmitterLayer and discovered something really weird.
I set up the CAEmitterLayer at the lower left corner, positioned at 45 degree (pointing towards the top right corner) and tried to shoot some arrows toward the top right corner.
Everything worked, except the image that I set via the content property of the cell.
Here is the original image on iOS 7 device:
When run on iOS 6, it becomes like this:
Has anyone experienced this and do you know why this is so? Having two sets of images and check whether the device is iOS 6 or iOS 7 and set the image up accordingly is not a problem for me, but my curiosity urges me to find out why this is so. Thanks in advance.
I am using Xcode 5.
This is normal behaviour in CAEmitterLayer. It uses a different coordinate system than the rest of iOS. As it was a technology derived from MacOS its origin (0,0) is located at the bottom left, while in iOS the origin is located at the top left. When the picture gets drawn it causes the image to get flipped. CAEmitterLayer was not really designed to use images like that, mostly made for particle systems that do not require a specific orientation.
The simplest solution to this would be to flip the image yourself so when CAEmitterLayer flips it again it will appear like you want it. This might have gotten changes in iOS7 so you would have to do a version check and apply the correct image.
You could also flip it in code if you wanted. This is a short code that does it:
UIImage *flippedPicture = [UIImage imageWithCGImage:picture.CGImage scale:1.0 orientation:UIImageOrientationLeftMirrored];
Source: http://www.vigorouscoding.com/2013/02/particle-image-gets-mirrored-by-uikit-particle-system/
In Apple's Maps app, when UserTrackingModeFollowWithHeading is enabled, there is a compass image that shows the direction of North-South and rotates with the rotation of the map. I have enabled UserTrackingModeFollowWithHeading in my app and would also like to show such a compass image.
I have tried to add a UIImageView with a compass image as a Subview of MKMapView but the image does not rotate with the map. Is there a way that I can make it rotate with the rotation of the map?
I know that I can manually rotate the map using UpdatedHeading and rotate the compass image with the map. This works. But I would rather use Apple's UserTrackingModeFollowWithHeading. I tried to use UserTrackingModeFollowWithHeading and UpdatedHeading together (where I rotate the compass image manually in UpdatedHeading) but this causes problems; the app crashes after a minute or so because of some conflict in using these two functions simultaneously.
Many Thanks for any help. I am using Monotouch 6.2 (but can translate any Objective C code in the responses provided to Monotouch).
I have an image that can be photographed on different orientations. My problem is after that the image was photographed I have to rotate it in an upright position. My initial plan was to put a marker on the upper left hand of the image, find its location, and rotate it. However if I take this approach, I have to study object/feature extraction. Is there any other simple solution to this problem? By the way, I need to make an iOS app out of it
Thanks in avance!