[RELEASED] Imagine WebAR Image Tracker for Unity WebGL

Links:
Asset Store | Youtube | Demo | Tutorial | Discord | Contact Us​

Create augmented reality experiences for the web browser using this plugin. Anchor your game objects to any image without the need for any fiducial markers. Supports mobile and desktop browsers.

Important: This ImageTracker plugin is not yet inter-operable with the WorldTracker plugin. But we are planning to support combined AR experiences in future versions.

Why WebAR?
AR for the web is best suited for small and highly shareable experiences.
Easy-access: Just click a link or scan a QR code to launch your experience. No download required.

No hosting fees
This plugin will allow developers to host their own WebAR experiences like any other Unity WebGL build. Unlike other expensive WebAR solutions which requires monthly, per-view , or per-app-id subscriptions.

No markers
Uses natural-feature tracking which allows detection and tracking of any image (with sufficient details).

Faster and more accurate
Compared to other image tracking solutions which uses open-source libraries such as AR.js or A-Frame.

Summary
This plugin works similarly to other AR image tracking plugins, but intended for WebGL. Setting up your AR scene only takes a few minutes (See the tutorial).

Supports major browsers for desktop and mobile (Tested and works on Chrome, Safari, Edge, Firefox across a wide range of devices).

Showcase Video

Demos
CLICK HERE TO TRY THE WEBGL DEMO
*You can download the image targets from the TARGETS button in upper right corner of the screen

CLICK HERE TO TRY THE WEBGL DEMO FOR URP
--------------------------

Technical details
Fast and Robust Web-based CV tracker (Source code not included)

Imagine WebAR Editor
- Simplifies the creation of image targets in a single click
- Setup your AR scene in less than 5 minutes (See the demo tutorial)

Image Tracker
- Easily manage your image targets across different scenes
- Supports multiple simultaneous image tracking
- Customize tracker properties from the inspector such as speed/quality and target frame rate.
- Scripting API calls for starting/stopping, pausing/unpausing the tracker and camera

Universal Render Pipeline
- Supports URP with the exception of the following features: Post-Processing, Camera HDR


Extras

Texture Downloader
- Download textures as a png or jpeg file from the web browser. Useful for sharing image targets directly from the web browser for printing.

 

Hi!

I'm very curious about your plugin (we've worked with WebGL AND Augmented Reality for years and we are searching for a suitable solutions to integrated the both of them) but to me the demo is not working!

I'm trying with the lady bug and the flower marker and when I point to them (in Basic Demo or 3dModel) nothing happens!

I've tried using my laptop webcam (so UnityWebgl from Chrome Desktop), opening the image on my smartphone screen (fullscreen), and I've also tried using my smartphone (so Chrome Mobile) opening the image in my laptop. No console log message, so it seems nothing is happening at all.

Let me know if I can help you further with the debugging process!

 

Hello
Me neither ... nothing is happening, and i've done the same as DudoTheStampede
Do you use an integration of ARFrame (javascript) in your asset ?

 

Thank you for the interest and this feedback. I have tried replicating your scenario in our live demo and it seems to work for me (screenshot attached). Tracking quality is quite lower when the imagetarget is projected from a screen and detection might not work completely if the screen contrast is too bright.

Can you, guys, try typing this in Chrome/Javascript console right after opening the 3D Model scene, if it helps with the detection?

Code (JavaScript):

1. tracker.MAX_AREA=80000

Or better yet, if you have time to print the target, it might help.

Also, do you notice a very short freeze the first time the image becomes visible in the camera? Because it could indicate that the image is getting recognized. And we are currently fixing a bug where the camera FOV becomes zero.

Also, since we are testing and re-releasing the plugin, recently, we have temporarily disabled console logs to avoid spamming the browser. But we will re-enable this back once we stabilize the asset.

 

The WebGL part of our tracker is written in javascript and is using OpenCV.js

 

Tried but still nothing! :S

I will do that, but now I'm not in the office, so I'm without printer! Besides, I hope that's not the issue! From the video the tracking seemed robust and that's what we would like to have!

Yeah I think I can see that... FYI, I also tried from a MacBook Pro (from Chrome, not Safari) and I have the same results.

Maybe just a "FOUND!" log even only in the demo would be great to understand what's happening!

We did an implementation like that using AFrame AR but the image marker were horrible and not stable at all!
About that... from what I can imagine so the unity canvas is transparent and the webcam is rendered directly in the webpage (solving a lot of headaches!) but what about URP? In our tests we didn't manage to set the unity canvas transparent. I DONT remember if we tried without post-processing (but I think we did) so, in our demo project, we had to render also the webcam inside unity (super heavy ).
Your demo right now is in Standard Render Pipeline, right?
Do you think it will be possible (in the near future) to use URP+PostProcessing? Are you working on that?

 

If you can feel the short lag/delay, but not see anything, can you try resizing the browser window a little bit? Because this will force a Field-of-view recalculation for the AR camera. And for mobile, you can try switching back and forth to landscape/portrait. We're currently fixing a bug relating to this.

Yes, correct. The demo is using Built-In RP. And we are using a transparent Unity canvas on top of the browser video. This is mainly achieved via Unity's post here: https://support.unity.com/hc/en-us/...w-can-I-make-the-canvas-transparent-on-WebGL-

Regarding URP+PP, we currently have an experimental workaround using WebcamTexture (where Unity canvas is not transparent). But like you mentioned, the downside is that FPS is lower and tracking response is slower (WebcamTexture frame is ahead of the 3D object position like a "lerping effect"). It might still work for some experiences though.

 

@DudoTheStampede @alto971 - just updated the demo with a potential fix to the 3D models not rendering (caused by FOV getting initialized to 0). Please try and hopefully it resolves your issues. (You might need to clear your history just to be sure).

This fix will be included in the next plugin version (1.2.1). Thanks in advance!

 

Actually now it doesn't work at all for me!
As soon as I press 3d Model it gives me a javascript error:

 

Hmm.. it almost sounds like you're getting an older version of the demo site. Can you try and see if you have "version 1.2.1" in the selection screen (see attached screenshot)?
Or alternatively, can you try this new link instead? https://imagetracker.imaginerealities.com.au/demo2/

 

Same error on both demo pages!
Version is 1.2.1... I'm trying it from Chrome on Windows 10 (but same thing from Chrome in safari)!

 

Sorry to hear that. I have just tested and it works without any issues on all my test devices, Chrome Desktop, Safari Desktop, Safari iOS and Android Chrome. We will have to improve the demo - by doing some major cleanups especially re-enabling debug logs to investigate further. Will notify you here once this is completed.

Thank you so much for your patience!

 

@DudoTheStampede. Thanks for the wait. We have enabled the logs in this new demo link:
https://imagetracker.imaginerealities.com.au/debug

We should be able to see the the actual JSON value causing your error. It should look something like:

Code (JavaScript):

1. {"MAX_SIMULTANEOUS_TRACK":1,"QOS":2,"FRAMERATE":30"...}

And I wasn't really able to replicate this, so I will be needing your help here. Thank you in advance.

 

Oh nvm - We found the issue where the dot characters get replaced by commas for some countries.
We are fixing this right away and will keep you all posted!

Big thanks to @mdsaidov98 for sharing his findings!

 

Hey guys. We are able to resolve the issue in the latest version of the demo (1.2.2).
https://imagetracker.imaginerealities.com.au/demo/

It is mainly caused by floating point numbers getting parsed incorrectly in some languages. We were able to replicate by switching to a different language for the device (eg. Finnish).

Please try and let me know if it works on your end.

Fix will be included in the next plugin release (version 1.2.2). Thanks again for all for the help!

@DudoTheStampede @mdsaidov98 @alto971

 

And for anyone who is experiencing this webcam error when hosting WebGL builds to your server (usually in AWS S3)

Code (JavaScript):

1. Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getUserMedia') at ImageTracker.startWebcam

You will need to incorporate SSL because webcam access requires https.

This can be done in AWS S3 with CloudFront via the following steps here:
https://aws.amazon.com/premiumsupport/knowledge-center/cloudfront-https-requests-s3/

 

Hello~ Our team tried your plugin, it's awesome and easy to use! But we meet one problem. When we use Android phone with Wechat browser, some of their camera videos are not working well. It seems like the videos are zoomed in.

The problem occurs only on some Android phones, others are OK.
How can we do some settings to control the size of the camera videos?

Thank you~

 

Hello and thanks for reporting. This is the first time we see this issue. Can you, guys, try and see if you are able to replicate the same bug with our demo samples here? https://imagetracker.imaginerealities.com.au/demo/

Does it occur only on the WeChat browser, and not in the default Android Chrome browser? And can you also share what Android devices is this issue occurring? We'll try and see if we are able to replicate from our end.

Currently, there is no easy way to manually resize the camera video, but this shouldn't be happening in the first place.

 

Hello, thanks for your reply!

We've tried using your demo url directly, or build the demo in the asset package, both have the same bug

And we've tried default browser, Edge for android, Chrome for android, etc. , the camera video's size is still wrong

We didn't test so many devices, here's our testing device list which can reproduce the bug:
HUAWEI Mate 40 Pro
HUAWEI Mate 30

Thank you~

 

Thank you for these findings. Unfortunately, we do not have these exact test devices. But we suspect that the problem is occurring on phones with multiple back-facing cameras, and the plugin is not able to choose correctly.

But good thing you are able to replicate on our demo scene! I have just deployed a potential fix for this multi-camera issue. Can you try our demo link again and see if it changes anything?
https://imagetracker.imaginerealities.com.au/demo/

 

Thanks for your reply~ I've tried the new demo, but it seems nothing change.

I think it's very possible multiple back-facing cameras cause the problem, is it possible to let us choose or switch cameras manually?

 

Thank you for your findings and suggestion. I have reverted the fix on trying to find the "best back camera" and went with your suggestion where the user chooses between multiple back cameras (See attached screenshot).

Can you try our demo again if it resolves the issue?

 

Oh, it works !!! Now we are able to open the camera correctly with selecting Camera 1. So appreciate your fixing on this. And if we want to apply this selection box feature on our own project, do we just need waiting for your plugin upgrade, or we can have a quick fix on our index.html?

 

Happy to know it worked! Thank you for testing. We will submit this to Unity for review and should be available in the next plugin update (version 1.2.3).
But If you can send me your email and invoice number via our contact form below, I can send the updated plugin within the day

https://imaginerealities.com.au/contact-support

 

unity 2021.3.19 Imagine WebAR 1.31
Can't open the camera

 

Thank you very much for reaching out. Are you currently accessing your website via https? Due to browser security, webcam access is only granted to sites using https/ssl.

May I know which hosting provider are you currently using? If you happen to be using AWS S3, we can help you set up an SSL for your site.

Moreover, feel free to join our Discord and we can provide you support via chat
https://discord.gg/ypNARJJEbB

 

Ok, thank you.

 

As shown in the figure, how to get the camera image of the red box?

 

Currently, we do not yet support texture extraction from camera feed, but this is something we can include in a future version.

For now, you are only able to fetch the raw camera frame as a Texture2D. You can have a look at ImageTrackerCamera.GetWebGLCameraFrame() - but this is still an experimental feature.

 

@iMagesBlues
Hi, I have a question about your webAR asset.
It is possible to make the image target and 3d objects dynamically in run time using your asset?
Seems that your asset allows having a few image targets before building and publishing.

If I want to have thousands of image targets and content for web AR on my hosting like Vuforia Cloud Recognition, is it possible?

 

At the moment, we do not support runtime image marker compilation, BUT we compile markers during website initialization. And currently, all image markers are just downloaded from a URL embedded in index.html.

Meaning, you should be able to setup a backend which serves a dynamic webpage with varying marker urls. 3D model switching will have to be handled by your code, though.

In future versions, we plan to support both runtime compilation, as well as 3D model loading via Unity Addressables.

 

@iMagesBlues
I have recently purchased a license and I ran into an issue. I hope you can give me some pointers about it.
I am building an AR related software that was working with AR foundation so far, and I used reference markers as the one I uploaded. It worked well for all sorts of AR frameworks, but for some reason Imagine WebAR is not recognizing this image.
When we changed the reference image to a random image of Mount Fuji, then WebAR had no issue realizing the reference image.

Can you give us some pointers, why this reference image is not working for WebAR, and what should we focus on to create reference images that work well?

Thank in advance!

 

Hi @sandor_kolumban, I have just replied to your message in Discord, but I'll just post it here to help others experiencing similar issues. We recently found some issues on transparent image targets for some devices (such as Redmi Note 11) we're still investigating if this is a device issue or from a recent mobile browser update.
But in any case, can you try replacing the transparent pixels with a solid black/white/gray color, and see it it makes a difference?

 

Hello
Is it possible to check the operation on the "editor" before building?

 

Thank you for your inquiry. At the moment, we do not support AR functionality in the Unity Editor, as this requires us to port our tracker from WebGL to Windows/Mac/Linux which is a big feat. But rest assured, we are looking to support this functionality in future versions.
For now, we have added some simple camera controls (W,A,S,D, arrow keys etc.) to move the camera in the Editor. It's not ideal, but it should be able to cover some of the basic testing cases.

Hope this helps!

 

@iMagesBlues
Hello, this plugin looks so ...amazing is not enought, but marvelous as well.
I think a lot of people in this community has asked same question before: whether vuforia can use unity to generate webgl product, but even last month , this question has been raised in stackoverflow , and the answer is still no.
From your video ,it seems dream comes true. Bravo.

I want to ask some further question to make sure whether this $168 is worth or not:
Q1:Whether this plugin makes the user can create the image track programmatically (runtime change image track ability)?
Q2: I open the demo link ,the 3d model demo is perfect, but video demo cannot work neither 2 pictures,why?

 

Thank you for the kind and very encouraging words @boerduosu!
Indeed, and our main goal is to provide AR solutions for WebGL that is on par with industry solutions, at the fraction of the cost. To answer your questions:

1. We don’t have runtime generation in the current version of the image tracker, however, we compile image targets upon initialization of the webpage. And currently, they are downloaded as jpgs/pngs in static urls in index.html.
So if you serve the page from a backend, you should be able to change these image urls dynamically as needed.
The 3D model swapping will have to be handled by your code though.

But we're looking to support runtime image target compilation as well as cloud features such as 3D loading features (via addressable) in future versions.

2. We are just recently testing out some image targets using the video demo scene. You can try it again and it should work now.

Also, we are releasing a free version of the image tracker which you can try, before purchasing the paid version, to be sure. And we expect it to be published in the next few business days.

 

@iMagesBlues
Thank you very much for your answer so quickly~
>So if you serve the page from a backend, you should be able to change these image urls dynamically as needed.
Right, it's enought
>The 3D model swapping will have to be handled by your code though.
Whether the shown objects such as 3d model or video also has an static URL in index.htm which can be changed?
Or the shown objects such as 3d model or video must be include in the resource folder in unity to be packaged together during publish?

P.S.
I have tested both 2 video example, both 2 videos can be played but no sound, why ?

 

"Whether the shown objects such as 3d model or video also has an static URL in index.htm which can be changed?"
- Currently, all 3D models and videos are being handled from the Unity side. I guess you would like to:
1. Load a different image target + 3D model using a unique url eg. https://myarplatform.com/?id=apple
2. In your backend, you will return a webpage with an imagetarget url pointing to apple.png
3. And your unity source code will download unity addressable pointing to apple.prefab
This way, you can have as many unique image/prefab pairs as you need, which are accessible via unique urls

"...both 2 videos can be played but no sound, why ?"
- Those videos don't really have sound to begin with.
- But actually, there are some autoplay issues in iOS/Safari for videos with sound. And the workaround is to play the videoclip alongside an audioclip... not ideal but works.

 

I purchased it the other day, but as shown in the image, "Camera selection" appears. How can I prevent it from displaying?

 

the current
"Title scene"
I am creating a scene separately from "AR scene"
I'm having trouble with the camera image popping up the moment I press the "ALLOW ACCESS" button
How can I create separate scenes?

 

Thank you @Yukiyamaiina2010 for purchasing our plugin and for reaching out to our team. To answer your inquiries:

We highly recommend keeping the camera selection dropdown, because in some Android phones with multiple cameras, the wrong camera can get selected and the camera image is very pixelated. In any case, you can easily hide by adding this on your css:

Code (JavaScript):

1. #debugChooseCam {display: none}

Hmmm... depending on your usecase you can do the following:

- If you want your initial scene without AR/camera feed, make sure to delete the ImageTrackerCamera in the heirarchy and replace it with a new Camera gameobject, in that scene.
- If you want to navigate to a non-AR scene from an AR scene, make sure to call ImageTracker.StopTracker() and ImageTrackerCamera.PauseCamera() to make sure that the tracker/camera is not running in the background. Also make sure to use a default Camera instead of the ImageTrackerCamera prefab in the non-AR scene.

Let me know if you get any success. I will also give it a try and let you know how I go

 

@iMagesBlues
Hello! Any news on the free version?

 

Here says: Few business days left - Fingers crossed, should be out any day now.

 

Thank you for your answer (^^♪ i will try it soon

 

HI, how to hide button allow access camera and make it automatically allow?

 

This is a major requirement unfortunately. For security reasons, it needs a direct input from the browser to start the webcam device.
I think the best compromise you can have is a message saying "tap anywhere to start", and you have a big invisible button, that the user can press.

 

Yes
imageTrackerCamera.UnpauseCamera();
to stop it once
imageTrackerCamera.UnpauseCamera();
when you resume by calling
<canvas id="videoBackground"></canvas>
is created and is in trouble
Do you have any solution?

 

Hi @Yukiyamaiina2010, I assume you are still trying to initialize your first scene without the camera image, is that correct?
To help me understand your scenario more, can you elaborate more on the steps that you are currently doing and what issues/troubles occur?

EDIT:
But still, in any case, you can also try removing this line in your index.html

Code (CSharp):

1. window.iTracker.startWebcam();

That way, the webcam will not open in your non-AR/Main Menu scene.

But make sure to call it later when you open an AR scene.

 

Thank you for answering
It worked fine if I didn't call "window.iTracker.startWebcam();" when restarting