Augmented Reality Marker


I got a request to take one of our projects and render it using AR. That is, something acting as a marker for a smartphone to react on and then pop up the overlayed 3D in scale 1:1 over that marker.

I know this can be done withing Unity using some plugins perhaps, then built natively for each platform (iOS and Android), but I would prefer this to be web based online so I wouldn’t have to worry about releasing apps.

Can this be done utilizing playcanvas?

Ah, silly me. But It seems I already reached out about this topic:

So to summarize, if you’d like to see AR today an app is the only way if you’re to support iOS it seems.

There is ARToolkit, and it’s JS version, that allows to achieve exactly what you are trying to do.
But so far I haven’t seen a reliable way to track marker across different cameras, they differ a lot in terms of tracking quality :frowning:

I see. Given by some of the comments there is still the issue of the missing support for webrtc on the ios webkit platform as I understand it?

I thought iOS recently did allowed video as a texture, haven’t checked it recently. Video in JS on iOS was always a problem, because Apple does it differently from everyone else :frowning:
Although, not sure WebRTC is anyhow related to this.

Note that during WWDC, Apple announced support for WebRTC (notably getUserMedia()) in Safari for iOS 11. Unclear whether support extends to web views, but no reason to think it wouldn’t. Effectively, this means we should be able to access camera, live video and microphone from Javascript in the browser and possible web views as well. Obviously this means AR should be attainable via HTML.

You might be interested to check out this project: Augmented Reality Playground. You need to print these markers: Hiro and Kanji. Non-reflective paper works best.

On iOS11, I’m finding getUserMedia (required for AR) still doesn’t work right. Need to investigate to see if it’s something I’m doing wrong or whether it’s still a problem in iOS. But this WebRTC demo doesn’t work on iOS so I guess it’s the OS.

Curious as to what issues you’re seeing with getUserMedia() - is it failing outright or issues with pushing a live stream to a canvas object?

I don’t know because I only have my Windows laptop with me. I’d need to connect to a Mac and remote debug via Safari to get the browser console output (and debug). If somebody reading this wants to help out by investigating, I’d be very grateful. :smile:

Hi Bjorn,would it be possible for you (or anyone) to please tell me how you got on with the quest* ; we need to do the same thing.

*using AR. …a marker for a smartphone to react on and then pop up the overlayed 3D in scale 1:1 over that marker

Never got around to try anything unfortunately…

Cloudways has written an awesome post on Augmented Reality in marketing. Highlighting more on the fact that the future is for Augmented Reality. Even the marketing tactics are taking a turn by involving more of the augmented reality related strategies.
Click below to read the blog: