Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

[RELEASED] Imagine WebAR Image Tracker for Unity WebGL

Discussion in 'Assets and Asset Store' started by iMagesBlues, Jan 5, 2023.

  1. Yukiyamaiina2010

    Yukiyamaiina2010

    Joined:
    Aug 3, 2018
    Posts:
    14
    Yes
    I want to use Bloom, is there a better way?
     
  2. iMagesBlues

    iMagesBlues

    Joined:
    Mar 18, 2013
    Posts:
    75
    Unfortunately, Post-processing is not yet supported. But there is an Experimental workaround that you can use.
    Try setting ImageTrackerCamera>Video Plane Mode to EXPERIMENTAL_WEBCAMTEXTURE or EXPERIMENTAL_DATAURLTEXTURE.

    This will enable you to use Camera HDR and Post-Processing including Bloom. Note though, that this feature is still experimental and may have some issues in some devices/scenarios.
     
  3. Yukiyamaiina2010

    Yukiyamaiina2010

    Joined:
    Aug 3, 2018
    Posts:
    14
    Thank you for answering
    I'll try it (^^♪
     
    iMagesBlues likes this.
  4. lili314521063

    lili314521063

    Joined:
    Dec 3, 2019
    Posts:
    6
    upload_2023-4-14_10-5-41.jpeg upload_2023-4-14_10-5-49.jpeg upload_2023-4-14_10-5-54.jpeg upload_2023-4-14_10-5-59.jpeg
    Wechat and Safari cannot enter WebGL Demo, and they are always stuck here.
    iphone13pro

    Is there a texture extraction function in the project?Because I happen to want to use this feature
     
    Last edited: Apr 14, 2023
  5. iMagesBlues

    iMagesBlues

    Joined:
    Mar 18, 2013
    Posts:
    75
    Hello there! The usual cause of this loading issue is the compression of your WebGL build. Can you try setting Project Settings>Player>Publishing Settings>Compression Format to None. And see if it solves your issue?

    Regarding texture extraction - yes, we have the texture extraction feature, coming in the next version 1.4.2. It should be released any day now :) You can try it here in our demo:
    https://imagetracker.imaginerealities.com.au/demo/
    or check-out the video here:
    https://discord.com/channels/1070953358967459880/1070955820059218020/1087733196264833044
     
    Last edited: Apr 14, 2023
  6. lili314521063

    lili314521063

    Joined:
    Dec 3, 2019
    Posts:
    6
  7. iMagesBlues

    iMagesBlues

    Joined:
    Mar 18, 2013
    Posts:
    75
  8. lili314521063

    lili314521063

    Joined:
    Dec 3, 2019
    Posts:
    6
    upload_2023-4-14_16-16-52.png
    I'm testing with iphone Safari, you can see my screenshot, it keeps loading
    This is the case with the front and rear cameras
    iPhone Edge has the same problem, my device is iphone13Pro, and the system version is 15.4
     
    Last edited: Apr 14, 2023
  9. iMagesBlues

    iMagesBlues

    Joined:
    Mar 18, 2013
    Posts:
    75
    I see... Can you share what iPhone are you currently using, as well as the OS version? And if you haven't tried yet, can you also try accessing the website using mobile data (instead of wifi) to check if it's not a network connection issue.

    Also, you can connect your iPhone to Safari and inspect the browser console for any errors, to help us know the cause of the problem.

    We have just tested now in iPhone 8 and iPhone 14 and the app loads quickly without any issues.

    And if you have access to any other test devices (mobile or desktop), can you try and see, if they have the same problem?
     
    Last edited: Apr 14, 2023
  10. lili314521063

    lili314521063

    Joined:
    Dec 3, 2019
    Posts:
    6
    Sorry, I don't have an Apple Mac so can't see the error message in the background. I am using iphone13Pro, the system version is 15.4. Same problem with wifi and 4G. Everything works fine when I use an Android phone. Maybe it's my phone system version issue.
     
    iMagesBlues likes this.
  11. iMagesBlues

    iMagesBlues

    Joined:
    Mar 18, 2013
    Posts:
    75
    Hmmm, that's possible... currently our iPhone8 test device is running 15.6, and the iPhone14 is running 16.3.1.
    Maybe you can try updating the OS and see if the issue gets resolved.
     
  12. lili314521063

    lili314521063

    Joined:
    Dec 3, 2019
    Posts:
    6
    I just turned on the camera normally using the IPadPro. The system version is 16.0. It seems that it is really a problem with my mobile phone system. Also, when will 1.4.2 be released? Hope to use the color extraction function soon, haha
     
  13. iMagesBlues

    iMagesBlues

    Joined:
    Mar 18, 2013
    Posts:
    75
    Glad to know you got it working :) Please let me know if you still find any issues after updating.
    As for 1.4.2 - Won't be long, we're planning to submit first thing next week, and hopefully Unity is able to review within the week :)
     
  14. lili314521063

    lili314521063

    Joined:
    Dec 3, 2019
    Posts:
    6
    upload_2023-4-19_14-55-28.png

    After publishing the webpage is not displayed correctly, can you help me look at this problem
     
  15. iMagesBlues

    iMagesBlues

    Joined:
    Mar 18, 2013
    Posts:
    75
    Hey there, thanks for the inquiry. Can you reach out to our team in Discord? We may need a few more details like the link to your site so we can investigate.
    https://discord.gg/ypNARJJEbB

    You can also check for errors in the console. We had a similar report where the css file/s has been blocked by the hosting server.
     
  16. WolfPupLab

    WolfPupLab

    Joined:
    Jan 4, 2021
    Posts:
    2
    can this plugin be used to display objects without image tracking?like area tracking. thanks.
     
  17. iMagesBlues

    iMagesBlues

    Joined:
    Mar 18, 2013
    Posts:
    75
    Thank you for your interest in our plugin. The image tracker is only able to detect and track images, however, we have another plugin for tracking surfaces. We're still in the final stages of testing, but it should be released very soon :)

     
    WolfPupLab likes this.
  18. WolfPupLab

    WolfPupLab

    Joined:
    Jan 4, 2021
    Posts:
    2
    I'm so happy to hear that, can't wait for it
     
  19. risyalfebrianto97

    risyalfebrianto97

    Joined:
    Aug 2, 2022
    Posts:
    8
    hello can this used together with webview? if can how is the setting?
     
  20. iMagesBlues

    iMagesBlues

    Joined:
    Mar 18, 2013
    Posts:
    75
    Hello and thank you for your inquiry. Unfortunately, our team does not have much experience with app development and we're not very familiar with webviews. However, we have users who are able to successfully integrate the plugin in Xamarin and Flutter apps.:)
    You can join our Discord and we can help you reach out to those devs in case:)
    https://discord.gg/ypNARJJEbB
     
  21. Yukiyamaiina2010

    Yukiyamaiina2010

    Joined:
    Aug 3, 2018
    Posts:
    14
    Yes
    Version 1.4.2
    updated to

    with new features
    "Max Frame Length"
    "MaxFrameArea"
    was added
    What is the effect of changing the "MaxFrameLength" and "MaxFrameArea" values?
     
    iMagesBlues likes this.
  22. iMagesBlues

    iMagesBlues

    Joined:
    Mar 18, 2013
    Posts:
    75
    MaxFrameLength will allow you control the size of the camera image to be processed. Smaller values will result in higher FPS, but reduces tracking quality. Bigger values will result in higher quality with reduced frame rate.

    MaxFrameArea on the other hand will improve the detection quality (images will be easier to get detected), this can also improve the tracking quality a bit (not as much as MaxFrameLength does). But higher values can decrease your frame rate. Normally, you can use this if you really need to support images with very. few keypoints. Though, detectability is still determined by the number of keypoints/features in your image.

    Though keep in mind that FPS is still determined by the capabilities of the device, and the optimization of your game. :)
     
  23. Gaminggoat

    Gaminggoat

    Joined:
    Jan 27, 2015
    Posts:
    7
    Cool product! Does this work with curved images? Are you still supporting this product? Thanks.
     
  24. iMagesBlues

    iMagesBlues

    Joined:
    Mar 18, 2013
    Posts:
    75
    No support for curved images yet. But we have something under development. ;)
    Though most likely, it will come as a separate asset.
     
  25. hardware_unity

    hardware_unity

    Joined:
    Apr 12, 2019
    Posts:
    2
    Hi, I purchased this addons some time ago. For a particular project I need not to appear at the beginning of this warning indicated in the photo.
    I hope it is not a problem, because the Brower then asks for consent to use the camera.
    I need both the camera selection and the "Allow Access" button to disappear , I wish take the default available camera from device(I understand that on some devices it can be the front camera, but for me it is not a problem in this case).
    Best Regarsds
     

    Attached Files:

  26. iMagesBlues

    iMagesBlues

    Joined:
    Mar 18, 2013
    Posts:
    75
    Thanks for sharing your inquiry @hardware_unity. Regarding your inquiries, they should be do-able by editting your index.html file from WebGLTemplates. But please be mindful of the following:
    [1] You can easily remove the camera selection dropdown by removing this line in index.html
    Code (JavaScript):
    1.  await LoadWebcams();
    This will make your app choose the default camera on your device, but some Android phones with mutliple back cameras fail to return the main back camera which results in a blurred camera image. In any case, you can edit window.WEBCAM_SETTINGS in index.html to suit your needs.

    [2] You can also edit the css for the allow access button in index.html by changing this element in index.html
    Code (JavaScript):
    1. <button id="startARButton" onclick="StartAR()" style="display:none">ALLOW ACCESS</button>
    2.  
    But note that the user will need to grant access to the device camera, and this is only possible by pressing an html button. You can make a large invisible button and have a text saying "Tap anywhere to begin".

    Hope this helps. Let me know if you have any further questions ;)
     
  27. EMD_Studio

    EMD_Studio

    Joined:
    Sep 22, 2021
    Posts:
    2
    Hi, we purchased the app this week and so far we're very happy with it! Easy to get up and running with a custom image, and tracking is working quite well considering complications with our environment :)

    Today I've been trying to understand what determines the dimensions of the video stream. On desktop with a 1080p webcam, I see the console message "Set Video Dimensions 640, 480" and resizing the document body or calling iTracker.resize() only repeats this message in the console with no value change.

    Likewise, on mobile I see the message "Set Video Dimensions 480, 640" so it appears to change between landscape and portrait aspects but be fixed to 480p resolution.

    I began looking into this because the camera feed on mobile is not crisp, it appears to be scaled with jagged looking pixels.

    If your solution is using a smaller resolution for performance reasons I can appreciate that, but I'd like to know how it is being calculated and if we have any control over it? Thanks!
     
  28. EMD_Studio

    EMD_Studio

    Joined:
    Sep 22, 2021
    Posts:
    2
    Nevermind the above question, figured out that this is set by the constraints given in index.html and we can request a higher resolution!
    Code (JavaScript):
    1. window.WEBCAM_SETTINGS = {
    2.                 video: {
    3.                     facingMode: "environment",
    4.                     width: { ideal: 720 },
    5.                     height: { ideal: 1280 },
    6.                 },
    7.                 audio: false
    8.             };
     
  29. iMagesBlues

    iMagesBlues

    Joined:
    Mar 18, 2013
    Posts:
    75
    Hi @EMD_Studio! Happy to know that you find our plugin easy to use!

    And yes! that's correct, you can set your preferred camera resolution from index.html. Should you need any further info. just let me know.
    You can also reach out to us via Discord where we are most active and we can provide support via real-time chat.
    https://discord.com/invite/ypNARJJEbB
     
  30. kwsuzuki

    kwsuzuki

    Joined:
    Dec 9, 2014
    Posts:
    2
    Hello.
    Is it possible to add a tracker image while the application is running?
     
  31. iMagesBlues

    iMagesBlues

    Joined:
    Mar 18, 2013
    Posts:
    75
    Hello @kwsuzuki. We don't support runtime generation of imagetargets (yet). However, we compile image targets upon the initialization of the webpage. And currently, they are downloaded from jpg/png urls in index.html.

    So if you serve the page from a backend, you will at least be able to change the image urls dynamically. :)
     
  32. fourthedesign

    fourthedesign

    Joined:
    Oct 3, 2012
    Posts:
    3
    Hi! We purchased your asset some time ago and it works fine for our needs.
    However, we wanted to implement the screenshot-taking function and even though it works on most devices, on some devices it works fine the 1st time and then throws "RuntimeError: null function or function signature mismatch" in the browser after one or more refreshes.
    The code seems to crash in a random spot in ScreenshotManager just before merging the textures from the base and overlay.

    What we tried:
    -Debugging the Javascript functions called from Unity scripts
    -Checking for null values or missing references
    -try/catch surrounding the crashing code parts

    Unity version: 2022.3.6
    Imagine AR plugin: 1.5.3 (latest)

    Working devices/browser:
    Safari IOS
    Samsung Chrome
    Xiaomi Mi browser

    Issue Devices:
    Xiaomi Chrome
    Xiaomi Opera

    Is there anything that we can try?
    Thank you
     
  33. iMagesBlues

    iMagesBlues

    Joined:
    Mar 18, 2013
    Posts:
    75
    Hello and thank you for your findings. Unfortunately, we do not have a Xiaomi device that we can use to reproduce your issue. However, we will still try to acquire one to be able to replicate and find the cause. For the meantime, can you try the following:
    - Try replicating the issue using our demo scene here: https://webar.imaginerealities.com.au/it/demo
    Go to BasicDemo>Tracker>TakeScreenshot(Experimental), and let us know if the issue occurs.
    - Try converting ScreenshotManager.GetScreenShot_Experimental() into a Coroutine, and add single frame delays (yield return new WaitForEndOfFrame()) between the crashing code parts, in case it's some race condition between javascript and Unity.

    Thanks and will keep you posted if we are able to replicate.

    You can also reach our team via Discord where we are most active and we can support you via chat: https://discord.com/invite/ypNARJJEbB
     
  34. AdamBebko

    AdamBebko

    Joined:
    Apr 8, 2016
    Posts:
    164
    Hello, just trying out your project, and I'm getting an error when building the Demo-3DAnim scene for the first time.

    It shows the loading screen, then the splash screen then:

    ```
    An error occurred running the Unity content on this page. See your browser JavaScript console for more info. The error was:
    TypeError: undefined is not an object (evaluating 'window.iTracker.FOV')
    _IsWebGLTrackerReady@http://localhost:8000/Build/DevBuild.framework.js:2202:33
    wasm-stub@[wasm code]
    <?>.wasm-function[59171]@[wasm code]
    <?>.wasm-function[48711]@[wasm code]
    <?>.wasm-function[68521]@[wasm code]
    <?>.wasm-function[70745]@[wasm code]
    <?>.wasm-function[102541]@[wasm code]
    wasm-stub@[wasm code]
    102541@[native code]
    @http://localhost:8000/Build/DevBuild.framework.js:1796:27
    invoke_iiii@http://localhost:8000/Build/DevBuild.framework.js:16732:24
    wasm-stub@[wasm code]
    <?>.wasm-function[70718]@[wasm code]
    <?>.wasm-function[1666]@[wasm code]
    <?>.wasm-function[100551]@[wasm code]
    <?>.wasm-function[97056]@[wasm code]
    <?>.wasm-function[95008]@[wasm code]
    <?>.wasm-function[95007]@[wasm code]
    <?>.wasm-function[73486]@[wasm code]
    <?>.wasm-function[73476]@[wasm code]
    <?>.wasm-function[73505]@[wasm code]
    <?>.wasm-function[95615]@[wasm code]
    <?>.wasm-function[94685]@[wasm code]
    <?>.wasm-function[94560]@[wasm code]
    <?>.wasm-function[94560]@[wasm code]
    <?>.wasm-function[94561]@[wasm code]
    <?>.wasm-function[92588]@[wasm code]
    <?>.wasm-function[102542]@[wasm code]
    wasm-stub@[wasm code]
    102542@[native code]
    @http://localhost:8000/Build/DevBuild.framework.js:1796:27
    browserIterationFunc@http://localhost:8000/Build/DevBuild.framework.js:11442:63
    callUserCallback@http://localhost:8000/Build/DevBuild.framework.js:9436:13
    runIter@http://localhost:8000/Build/DevBuild.framework.js:9489:27
    Browser_mainLoop_runner@http://localhost:8000/Build/DevBuild.framework.js:9396:33
    ```

    I am hosting it locally on macOS. I get the same error on safari, chrome, and even my iPhone, when I log onto the localhost site (i.e http://192.168.2.3:8000, which is the address of my Mac)

    Same error on all 3
     
  35. iMagesBlues

    iMagesBlues

    Joined:
    Mar 18, 2013
    Posts:
    75
    Hello @AdamBebko, can you check if you are using the iTracker template in PlayerSettings>Resolution and Presentation>WebGL Template? That's the usual cause of that error. :)
     

    Attached Files:

  36. AdamBebko

    AdamBebko

    Joined:
    Apr 8, 2016
    Posts:
    164
    Ahh. Right you are! Thanks so much for the quick reply!
     
    iMagesBlues likes this.
  37. jobs

    jobs

    Joined:
    Jul 29, 2014
    Posts:
    8
    I need to perform both AR recognition and QR code recognition on images. I'm using zxing for QR code recognition. However, when I use ARCamera's VideoTexture.GetPixels32 as input for zxing, it doesn't recognize QR codes. Strangely, when I use WebCameraTexture, it works fine. How can I resolve this situation?
     
  38. iMagesBlues

    iMagesBlues

    Joined:
    Mar 18, 2013
    Posts:
    75
    Hi @jobs, we haven't really tried zxing alongside our plugin yet, so we're not quite sure what's happening. But rest assured, we have plans for a built-in QR code recognition feature in our plugin as well.
    In any case, if you can share more details in our Discord server, our team may be able to help with your issue :)
    https://discord.com/invite/ypNARJJEbB
     
  39. Yukiyamaiina2010

    Yukiyamaiina2010

    Joined:
    Aug 3, 2018
    Posts:
    14
    yes,
    In version 1.6.1
    I want to use Bloom, what should I do?
    Also, I would like to change the background when the camera is not activated, how can I do that? (Currently it is pure white, but I would like to make it black)
     
  40. iMagesBlues

    iMagesBlues

    Joined:
    Mar 18, 2013
    Posts:
    75
    Thanks for sharing your inquiries. To use Bloom in version 1.6.0, you will need to set the ARCamera>VideoPlaneMode to TexturePtr. Then you can either use the PostProcessing Package (for BuiltIn RP) or PostProcessing Volumes (for URP).

    And to change the background to black, you can add the line below in your index.html's body style:
    Code (CSharp):
    1. background-color: black;
    You might need to change the font colors as well as modal bg colors as needed. But this should all be possible via html/css tweaks in your index.html (some html/css knowledge is required).

    Hope this helps! :)
     
  41. Yukiyamaiina2010

    Yukiyamaiina2010

    Joined:
    Aug 3, 2018
    Posts:
    14
    Thank you for your quick reply (^^♪
    He always responds quickly and is helpful.
    I was able to move Bloom successfully.
    I also made the background black
     
    iMagesBlues likes this.
  42. jobs

    jobs

    Joined:
    Jul 29, 2014
    Posts:
    8
    Thank you for your response. I have resolved the issue. It seems that VideoTexture directly modifies GPU content through an external pointer, and pixel information is not stored in memory. I used Texture.ReadPixels to copy pixel information from GPU to CPU, and it worked. I am still looking forward to your integration of QR code recognition.
     
    iMagesBlues likes this.
  43. Yiwli

    Yiwli

    Joined:
    Mar 11, 2024
    Posts:
    1
    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
    --------------------------

    Your demos are not working right now, both web pages are giving an error:
    Failed to initialize the experience / page not found


    I also tried to run the demo locally, the main scene runs correctly, but when a try to open the other scenes, an error pops up:
    "An error occurred running the Unity content on this page. See your browser JavaScript console for more info. The error was: TypeError: Cannot read properties of undefined (reading "FOV") at_IsWebGLTrackerReady"
     
  44. iMagesBlues

    iMagesBlues

    Joined:
    Mar 18, 2013
    Posts:
    75
    Hi there and thank you for reaching out.
    I can confirm that our default WebGL demo here works fine on our test devices.
    https://webar.imaginerealities.com.au/it/demo/

    Our URP demo link has not yet been updated though. Apologies for that, and we'll look into updating that soon. For the meantime, you can check the #showcase channel in our Discord for URP games created by other devs.
    https://discord.com/invite/ypNARJJEbB

    As for your FOV error that you're encountering in your build. This usually happens if you forget to select the iTracker WebGLTemplate in ProjectSettings>Resolution and Presentation (See attached screenshot).

    Hope this helps!
     

    Attached Files: