# New WebAR solution with Babylon.js

**URL:** <https://forum.babylonjs.com/t/new-webar-solution-with-babylon-js/54324>\
**Category:** Demos and projects\
**Tags:** ar, webar\
**Created:** [October 23, 2024, 11:55pm UTC](https://forum.babylonjs.com/t/new-webar-solution-with-babylon-js/54324 "2024-10-23T23:55:26Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![alemart](https://avatars.discourse-cdn.com/v4/letter/a/bb73d2/32.png) [@alemart](https://forum.babylonjs.com/u/alemart)\
**Post date:** [October 23, 2024, 11:55pm UTC](https://forum.babylonjs.com/t/new-webar-solution-with-babylon-js/54324/1 "2024-10-23T23:55:26Z")

</div>

Hi! I’m alex 🙂 and I’m new here.

I’ve been working on a WebAR engine called [encantar.js](https://github.com/alemart/encantar-js). You can use it in combination with Babylon.js to create Augmented Reality experiences. It’s open source, easy to use, GPU-accelerated and it can be used anywhere (it’s not WebXR; it’s Augmented Reality made from scratch with computer vision).

At the present time the engine features image tracking. There is a Babylon.js demo that you can try with your mobile device or with your PC. I created this account to share it with you, guys!

I hope you find it useful! 🙂

 ![Captura de tela_2024-10-23_20-02-07](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/3/33f25dabe8c3f3d1bf3839201e8f0f599a21e3be.jpeg)

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [October 24, 2024, 8:16am UTC](https://forum.babylonjs.com/t/new-webar-solution-with-babylon-js/54324/2 "2024-10-24T08:16:04Z")

</div>

Hi @alemart This is a pretty impressive project for a 1st post on the forum!  
Congrats and welcome!

---

<div class="post-metadata">

**Author:** ![leo\_h](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/leo_h/32/39859_2.png) [@leo\_h](https://forum.babylonjs.com/u/leo_h)\
**Post date:** [October 25, 2024, 9:10pm UTC](https://forum.babylonjs.com/t/new-webar-solution-with-babylon-js/54324/3 "2024-10-25T21:10:27Z")

</div>

Looks pretty impressive!

I currently use AR.js with marker tracking in my project, I wonder how this compares to it and what differences there are? I see it’s “just” image tracking (no marker tracking), presumably that will result in slightly lower tracking quality than AR.js marker tracking.  
I also see that in the demo the input video is quite low resolution (320x568), it would be interesting to see how much it affects performance to increase that, to allow the markers to track better slightly further away…

Totally rooting for you with this project! 🥳 Having basically only AR.js for open source AR tracking isn’t very good, especially considering it’s not in development any more…

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [October 26, 2024, 1:18am UTC](https://forum.babylonjs.com/t/new-webar-solution-with-babylon-js/54324/4 "2024-10-26T01:18:45Z")

</div>

Welcome to the community!

Absolutely amazing! I had a look at the code and it’s very well written and commented too!

> [@leo\_h](#):
>
> Totally rooting for you with this project! 🥳 Having basically only AR.js for open source AR tracking isn’t very good, especially considering it’s not in development any more…

I can’t agree more!

KUDOS @alemart !

---

<div class="post-metadata">

**Author:** ![alemart](https://avatars.discourse-cdn.com/v4/letter/a/bb73d2/32.png) [@alemart](https://forum.babylonjs.com/u/alemart)\
**Post date:** [October 26, 2024, 11:26pm UTC](https://forum.babylonjs.com/t/new-webar-solution-with-babylon-js/54324/5 "2024-10-26T23:26:15Z")

</div>

Thank you guys, I appreciate it 🙂

> [@leo\_h](#):
>
> I also see that in the demo the input video is quite low resolution (320x568)

I keep a low resolution by default to have it run on all kinds of devices of various audiences, but you can use the API to increase the resolution of the tracking, of the camera, and of the rendered scene. Performance is affected by different factors such as upload times (GPU).

---

<div class="post-metadata">

**Author:** ![leo\_h](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/leo_h/32/39859_2.png) [@leo\_h](https://forum.babylonjs.com/u/leo_h)\
**Post date:** [October 28, 2024, 3:53pm UTC](https://forum.babylonjs.com/t/new-webar-solution-with-babylon-js/54324/6 "2024-10-28T15:53:22Z")

</div>

Do you plan to continue updating this project over time? (not asking for you to see the future 😄 just short term at least, do you consider it finished and done with or might you continue working on it a bit?).  
Just trying to decide whether to spend some time testing porting one of my projects to it from AR.js!

> [@alemart](#):
>
> but you can use the API to increase the resolution of the tracking, of the camera, and of the rendered scene.

Sounds great!

---

<div class="post-metadata">

**Author:** ![alemart](https://avatars.discourse-cdn.com/v4/letter/a/bb73d2/32.png) [@alemart](https://forum.babylonjs.com/u/alemart)\
**Post date:** [October 29, 2024, 1:41am UTC](https://forum.babylonjs.com/t/new-webar-solution-with-babylon-js/54324/7 "2024-10-29T01:41:52Z")

</div>

> [@leo\_h](#):
>
> Do you plan to continue updating this project over time? (not asking for you to see the future 😄 just short term at least, do you consider it finished and done with or might you continue working on it a bit?).

Within my possibilities, yes. I dream of expanding it, but I’ve been doing it without support.

---

<div class="post-metadata">

**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\
**Post date:** [December 24, 2024, 7:10am UTC](https://forum.babylonjs.com/t/new-webar-solution-with-babylon-js/54324/8 "2024-12-24T07:10:05Z")

</div>

excellent!

---

<div class="post-metadata">

**Author:** ![rafaelj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rafaelj/32/36167_2.png) [@rafaelj](https://forum.babylonjs.com/u/rafaelj)\
**Post date:** [December 25, 2024, 12:12am UTC](https://forum.babylonjs.com/t/new-webar-solution-with-babylon-js/54324/9 "2024-12-25T00:12:24Z")

</div>

Hi,

I liked the idea, I tested it here and I enjoyed trying to hit the ball in the basketball hoop in a different way.

😃

---

<div class="post-metadata">

**Author:** ![Escobar](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/escobar/32/2726_2.png) [@Escobar](https://forum.babylonjs.com/u/Escobar)\
**Post date:** [January 13, 2025, 5:00pm UTC](https://forum.babylonjs.com/t/new-webar-solution-with-babylon-js/54324/10 "2025-01-13T17:00:27Z")

</div>

@alemart I’ve purchased your system and it works perfectly in frontal angles but fails in narrow ones, I think that it is related to the angle transform since the markers are perfectly attached to the reference image.

My impression is that the transformation of the tracker to the camera orientation has something wrong and at those narrow angles the camera is less rotated than it should be. This is an effect that can be seen very well in the babylon demos you provide.

Regards

---

<div class="post-metadata">

**Author:** ![alemart](https://avatars.discourse-cdn.com/v4/letter/a/bb73d2/32.png) [@alemart](https://forum.babylonjs.com/u/alemart)\
**Post date:** [January 13, 2025, 6:36pm UTC](https://forum.babylonjs.com/t/new-webar-solution-with-babylon-js/54324/11 "2025-01-13T18:36:16Z")

</div>

> [@Escobar](#):
>
> it works perfectly in frontal angles but fails in narrow ones

Thank you for your feedback. I know the cause of it and I’m already looking into it.

> [@Escobar](#):
>
> My impression is that the transformation of the tracker to the camera orientation has something wrong and at those narrow angles the camera is less rotated than it should be.

It is not that it is “wrong”, but rather, it is the case that a underlying mathematical model can be enhanced. In a nutshell, the plan is to add a more sophisticated model. The tracking was improved in the latest release (0.4.0), and I intend to do more work on it still.

---

<div class="post-metadata">

**Author:** ![Escobar](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/escobar/32/2726_2.png) [@Escobar](https://forum.babylonjs.com/u/Escobar)\
**Post date:** [January 13, 2025, 8:05pm UTC](https://forum.babylonjs.com/t/new-webar-solution-with-babylon-js/54324/12 "2025-01-13T20:05:23Z")

</div>

@alemart will we be informed on new releases? 😊

---

<div class="post-metadata">

**Author:** ![alemart](https://avatars.discourse-cdn.com/v4/letter/a/bb73d2/32.png) [@alemart](https://forum.babylonjs.com/u/alemart)\
**Post date:** [January 13, 2025, 11:05pm UTC](https://forum.babylonjs.com/t/new-webar-solution-with-babylon-js/54324/13 "2025-01-13T23:05:11Z")

</div>

I can share this update with you guys here 🙂

---

<div class="post-metadata">

**Author:** ![alemart](https://avatars.discourse-cdn.com/v4/letter/a/bb73d2/32.png) [@alemart](https://forum.babylonjs.com/u/alemart)\
**Post date:** [March 12, 2025, 1:31am UTC](https://forum.babylonjs.com/t/new-webar-solution-with-babylon-js/54324/14 "2025-03-12T01:31:16Z")

</div>

A new version of encantar.js is out with improved tracking, particularly on steep angles!

[![](https://img.youtube.com/vi/og1f33IhXMs/maxresdefault.jpg "Improved tracking of my Augmented Reality Engine") ](https://www.youtube.com/watch?v=og1f33IhXMs)

@Escobar

---

<div class="post-metadata">

**Author:** ![Escobar](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/escobar/32/2726_2.png) [@Escobar](https://forum.babylonjs.com/u/Escobar)\
**Post date:** [March 13, 2025, 10:46am UTC](https://forum.babylonjs.com/t/new-webar-solution-with-babylon-js/54324/15 "2025-03-13T10:46:37Z")

</div>

Do you want to marry me? 😄

---

<div class="post-metadata">

**Author:** ![a.dzhakhangirov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/a.dzhakhangirov/32/45723_2.png) [@a.dzhakhangirov](https://forum.babylonjs.com/u/a.dzhakhangirov)\
**Post date:** [March 14, 2025, 9:15am UTC](https://forum.babylonjs.com/t/new-webar-solution-with-babylon-js/54324/16 "2025-03-14T09:15:00Z")

</div>

Hello, Alemart. I wanted to try it. But I did not find the /dist folder and the encantar.js in [alemart/encantar-js: GPU-accelerated Augmented Reality for the web.](https://github.com/alemart/encantar-js). Is that ok?  
Is this instruction relevant at the moment? [Set up a web server - encantar.js: GPU-accelerated Augmented Reality for the web](https://encantar.dev/tutorial/set-up-a-web-server/)

---

<div class="post-metadata">

**Author:** ![alemart](https://avatars.discourse-cdn.com/v4/letter/a/bb73d2/32.png) [@alemart](https://forum.babylonjs.com/u/alemart)\
**Post date:** [March 15, 2025, 1:42am UTC](https://forum.babylonjs.com/t/new-webar-solution-with-babylon-js/54324/17 "2025-03-15T01:42:40Z")

</div>

> [@Escobar](#):
>
> Do you want to marry me? 😄

No, but I’m glad to see that you’re enchanted by my magic! 😆

I’d like to ask everyone who is interested in this project or who is already using it to support it by [purchasing a copy](https://encantar.dev/download) or by [becoming a sponsor](https://github.com/sponsors/alemart).

If you’re able to tell others about the project, that also helps.

I dream of expanding this work, but having support is essential. If you’re like me and would also like to see the project expand, that’s how you can help.

> [@a.dzhakhangirov](#):
>
> Hello, Alemart. I wanted to try it. But I did not find the /dist folder and the encantar.js in [alemart/encantar-js: GPU-accelerated Augmented Reality for the web.](https://github.com/alemart/encantar-js). Is that ok?  
> Is this instruction relevant at the moment? [Set up a web server - encantar.js: GPU-accelerated Augmented Reality for the web](https://encantar.dev/tutorial/set-up-a-web-server/)

Purchase your copy from the website in order to support the project, or get a source release and run the build script via npm.

---

<div class="post-metadata">

**Author:** ![Escobar](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/escobar/32/2726_2.png) [@Escobar](https://forum.babylonjs.com/u/Escobar)\
**Post date:** [March 15, 2025, 9:51am UTC](https://forum.babylonjs.com/t/new-webar-solution-with-babylon-js/54324/18 "2025-03-15T09:51:13Z")

</div>

I already purchased it a couple of months ago and I encourage to do the same to everyone!

---

<div class="post-metadata">

**Author:** ![alemart](https://avatars.discourse-cdn.com/v4/letter/a/bb73d2/32.png) [@alemart](https://forum.babylonjs.com/u/alemart)\
**Post date:** [March 16, 2025, 3:09am UTC](https://forum.babylonjs.com/t/new-webar-solution-with-babylon-js/54324/19 "2025-03-16T03:09:28Z")

</div>

Thank you!

---

<div class="post-metadata">

**Author:** ![Anupam\_Das](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/anupam_das/32/16709_2.png) [@Anupam\_Das](https://forum.babylonjs.com/u/Anupam_Das)\
**Post date:** [March 16, 2025, 7:05pm UTC](https://forum.babylonjs.com/t/new-webar-solution-with-babylon-js/54324/20 "2025-03-16T19:05:51Z")

</div>

This is really impressive. I took a quick look at the docs and see that this is based on speedy-vision. I’m working on a project that needs to track the pose of the device/user. Is this API able to do that? (practically most AR APIs can do that, my question is more on how reliably can it track pose over a larger distance, lets say if I walk 10-15 feet)  
example:  
[YouTube](https://www.youtube.com/embed/kPwy8yA4CKM) (based on ORBSlam)  
[GitHub - raulmur/ORB\_SLAM2: Real-Time SLAM for Monocular, Stereo and RGB-D Cameras, with Loop Detection and Relocalization Capabilities](https://github.com/raulmur/ORB_SLAM2)

Also does this require a depth camera/IMU or will this work with just a simple monocular web-cam. ?

[Next page](https://forum.babylonjs.com/t/new-webar-solution-with-babylon-js/54324.md?page=2)
