Image Tracking with Webxr

Рет қаралды 4,506

Күн бұрын

This is a tutorial in using webxr's image tracking api. We're doing two simple projects: a gravity simulation and an animation tracked to cards. This is a new/experimental api so it might not work on everyone's phone.
Timestamps
0:00 Intro
0:48 Quick Demos
2:16 Image Quality
3:29 Gravity Simulation
5:07 Skeleton Code
6:55 Animation Code
7:35 Gravity Sim Code
Demo:
gravity:
graemeniedermayer.github.io/A...
skeleton:
graemeniedermayer.github.io/A...
Code:
gravity markers: github.com/graemeniedermayer/...
skeleton:
github.com/graemeniedermayer/...
animation: github.com/graemeniedermayer/...

Пікірлер: 16

@Divalium Жыл бұрын

Thanks for the code, it looks amazing ! It's a really nice experimental feature, I hope it will be released one day, it will make web AR a lot easier to use.

@bb97979 Жыл бұрын

Hi, I was trying to follow this video along with your JS code, but I'm afraid the webxrMarker doesnt work anymore. Are you available for some questions anywhere? Cheers.

@grae_n Жыл бұрын

Thanks! Yes there was a broken path so it should work better now (the image location needed to be moved on the html part). You might need to hard refresh your phone because phones really like caching html pages. Hopefully it works better now. The image it tracks to is located here github.com/graemeniedermayer/ArExperiments/blob/main/data/images/earth.jpeg I like questions. I've updated my youtube about section to include email.

@riventori Жыл бұрын

is it possible to do real world object tracking with this feature? and if not is there a way to do it?

@grae_n Жыл бұрын

Certain types of objects might work but it isn't optimized for objects. There definitely is a way to do it it's just finding thrle best method. Mediapipe's js objectron and with the camera api might be a starting point.

@codecoffee1554 Жыл бұрын

Is it possible to detect hand gestures and interact with the scene when doing image tracking?

@grae_n Жыл бұрын

It definitely is possible! Its usually more about finding the easiest path. There's a handtracking api for webxr, I havent tried it yet. There's also google's mediapipe, it does hand detection. Although it would require camera access, which is can be a little challenging.

@codecoffee1554 Жыл бұрын

@@grae_n thanks for the insight!

@ronintsai8420 Жыл бұрын

Which is the minimum version of chrome that supports image-tracking feature?

@grae_n Жыл бұрын

This is actually pretty difficult to answer because official i think it's still in development. You can see it's dev status here chromestatus.com/feature/6548327782940672

@ronintsai8420 Жыл бұрын

@@grae_n Thank you for your reply, I am curious what browser you use for your Demo。

@JayRGabz Жыл бұрын

hi i tried to run this on ios but it doesn't work.. even in xrviewer.. :(

@grae_n Жыл бұрын

Thanks for trying with the xrviewer! I was really hoping that webxr would be adopted by ios. If they don't release it with the rumoured apple glasses it might just never happen.

@JayRGabz Жыл бұрын

@@grae_n the other projects run with xr viewer except these ones that have image tracking.

@mettymaster6963 Жыл бұрын

Hi, i tried your code but i get an error on this line navigator.xr.requestSession( 'immersive-ar', sessionInit ).then( onSessionStarted ); saying Unrecognized feature requested: image-tracking

@grae_n Жыл бұрын

This might be because your phone doesnt support this feature. Ill double check because a lot of features have changed recently.