Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
    John More
    If anyone finds the same error I did try and find out what OS was used to generate the NFT. It seems current mac version generates bad NFT markers. Windows works 100% of the time.
    Hello all,
    I'm currently trying to integrate AR.js in a Vue.js Web App. Has anyone done this before and can guide me to useful articles?
    Benny Lyn
    Hi @max-koa, it appears I make a mistake on the HTTPS, thanks for answering my question. Now, the model doesn't appear when I pointed HIRO markers, what's a possible mistake that I've done or missed?
    Anyone have any idea how one might go about obfuscating the marker so its not viewable when content is being shown? Not sure if possible...
    @BennyLynn_gitlab can't help you with this, sorry. I am also having this issue currently. Not sure if something is being done wrong or a bug. But what I would check, it's if everything is being loaded correctly, maybe errors in your console.
    Benny Lyn
    It only show this THREEx.ArMarkerControls: 'markersAreaEnabled' is not a property of this material.
    Sebastian Uson
    Hello, im new in this lobby someone can help me with one problem?
    When adding a QR code to a marker, like in this example: https://medium.com/arjs/ar-code-a-fast-path-to-augmented-reality-60e51be3cbdf
    are you supposed to include the QR code when generating the patt file?
    Hello guys, what 3D model file type is recommended for use?
    Dzmitry Haiduk
    Hi anyone! I am using tensorflow.js. The smartphone's camera tracks a rectangular object, let's say an electric stove, I have the coordinates of the 4 corners of the front panel in a two-dimensional coordinate system. The question is how to recalculate the coordinates of the rectangle into a new 3D coordinate system, let's say three.js, taking into account the rotations of the displacements of the scaled rectangle 2D.
    Hi ! I want to implement a function, when the camera scans the marker, ar.js displays the model,The model will be displayed in the center of the screen,The model does not move with the mark, What should I do?
    After the image is recognized, how to load the model to realize the zoom function, the model does not disappear after the camera is removed
    @jrDevarts_twitter a few different model formats can be used but I've found gltf the easiest!
    Hello Team. Can you help me with how to set "a-nft" label to get the better stability in the 3D model showed as AR? Maybe using the smoth parameters.... Or any other thing that I can do to achieve a stable (with no jitter) 3D AR model. Thanks for your help!!!!
    Micah Haycraft
    is ar.js down? I'm getting a 522 status code for importing the script source
    Micah Haycraft
    looks like githack is down
    Micah Haycraft
    is the aframe-ar.js file from the cdn available somewhere else?
    Micah Haycraft
    nvm githack is back up
    Michael Hussar
    I'm really excited about the prospect of Web based AR. However, despite about 2 weeks of research I can not find any implementation that does not result in jittery, unstable image tracking. I have used every trick and tip in the book, for example suggestions given in articles such as this one: https://medium.com/chialab-open-source/10-tips-to-enhance-your-ar-js-app-8b44c6faffca I have scoured the documentation for AR.js and A-Frame and searched various Github repos but still haven't found the simplest example demonstrating solid, non-shaky tracking. At this point I'd even be willing to hire some one to teach me the hidden secrets of how to accomplish this with WebAR. However, I'm starting to draw the conclusion that it is not yet possible to achieve image tracking stability with WebAR ala AR.js / A-Frame that rivals some of the commercial alternatives out there. This is a very disappointing conclusion to draw and I hope someone can prove me wrong and direct me to a resources with a simple Hello World that can demonstrate solid image tracking with AR.js. Any help is welcome. Thank you in advance!
    I have the same way of thinking. @mhussar which are the commercial alternatives (web based)? Thanks
    Michael Hussar
    @hbaugmentedreality I've been looking at Zapworks for a client of mine. They offer something called Universal AR which does have a browser based Web AR implementation that does not require any additional app. However, it does require a subscription fee which my client is not interested in. I also am not interested in paying for something that should be achievable "for free" via direct WebAR using something like AR.js etc. Again, perplexed how difficult it is to achieve stable image tracking with non-commercial WebAR solutions. I suppose this reveals my lack of technical understanding regarding, how difficult a technological feat it is to achieve stable tracking.
    Christian Sigl
    i'm working on a webrtc based AR streaming solution right now, using ARToolkitx (NFT for now, opencv 2D tracking later) integrated into blender, it already works with software encoding/decoding on the serverside including container-environment, still working on cuda support. right now it is tested with desktop-webcam and android chrome, but will also work with safari. i also did this with unity3D some months ago, however i think that blender is a more natural environment for AR content creation
    @mhussar There is a new open source library that you can try: https://github.com/hiukim/mind-ar-js
    Michael Hussar
    @mattle-ai Thanks!
    Hi everyone! I'm trying to set up multimarkers, but I'm having some trouble. Question here: https://stackoverflow.com/questions/66688333/setting-up-barcode-multimarkers-ar-js
    Hello, has anyone here able to play a model animation using the animation mixer when marker is found?
    @qu1ckdry thanks!
    I figured it out using <a-entity gltf> doesnt work with animation mixer for some reason. Some update must have changed it...
    what works is using <a-gltfmodel > instead...
    Hello wondering if anyone can help me with location based? There's an issue in the old repository that never got a solution, and it looks like I'm not the only person who's been struggling to get it to work: AR-js-org/AR.js#209
    as the 2nd commenter says on there - the augmented objects are fixed to the camera and not to a gps location. I'm using the exact example code from the docs
    Any advice appreciated !
    Dzmitry Haiduk
    Hi everyone! Is it possible to capture a video of an ar.js scene?
    @dhaiduk I think there is a solution in the AR.js github in the issues section where someone solved it...
    Hi everyone custom image not working in nft marker can u please try to help out this issue.

    @nickw1_gitlab https://hikar.org/webapp does not work on my iPhone SE (14.4.1), I can see all the labels which seem to be placed in correct direction, but the camera freezes. The same happen with red-box example in GitHub issue AR-js-org/AR.js#216. The iOS Safari console output the error:
    Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. (aframe-ar-nft.js:210535)

    When I replace "videoTexture: true;" with embedded, the camera works but not 'click' and if both "videoTexture: true;" and embedded, then the screen is totally black.

    Any idea what could be the problem? Thx in advance🙏🏽

    Anyone have a working example to click image or models that are shown over a marker. Apparently all the ones I found dont even work anymore and I don't understand why this is not a main usage to be able to interact...
    @max-koa - a belated thank you for the SVG link
    Following up on the comment from Edie @echodeltamoon_twitter - [Location AR not anchoring] I had no trouble getting the Location Based Example working(https://github.com/AR-js-org/AR.js#location-based-example). I was able to change text, text scale, add it to my geolocation HOWEVER, the text locks to the camera and does not anchor to the geolocation. Does anyone have a solution to this or good link they recommend for some custom anchoring attempts to keep the object at the location?
    Joseph Seger
    Hello everyone I was wondering if someone could please help me out with keeping my object still when using the NFT marker/Image Marker with A-frame. I have messed with the smooth Attributes but I still can not seem to keep the object from being extremely jittery. It would be helpful if someone could point me in the right direction.
    Jiří Lýsek

    Hi everyone, I will just post this here if someone has similar issue or want to make a pull-request. I needed to display far objects (>1km) like in the Hikar example. I was fighting with videoTexture: true because the image from camera gets squished and does not maintain aspect ratio. I wanted to maintain aspect ratio and make the image from camera cover whole area. I came up with this solution:

    //main <a-scene> element - you need to wait for loading - use `loaded` event
    var scene = document.getElementById('scene');
    //this is the extra component created by AR.js which puts camera feed into scene without making far objects invisible
    var webcam = document.querySelector("[arjs-webcam-texture]");
    var component = webcam.components['arjs-webcam-texture'];
    //you also need to wait for video to start playing via `loadeddata` event or similar, otherwise the `videoWidth` and `videoHeight` is zero
    var viewportRatio = scene.clientWidth / scene.clientHeight;
    var videoRatio = component.video.videoWidth / component.video.videoHeight;
    var w = Math.max(1, videoRatio / viewportRatio);
    var h = Math.max(1, viewportRatio / videoRatio);
    component.geom.attributes.position.array = new Float32Array([
            -w / 2, h / 2, 0,
            w / 2, h / 2, 0,
            -w / 2, -h / 2, 0,
            w / 2, -h / 2, 0
    component.geom.attributes.position.needsUpdate = true;
    //you should also call this code once the viewport size changes (onresize event of window)

    I am not sure how this code affects placing precision of 3D content in the image (you should probably adjust FOV, but I am not that far yet - outdoor testing required).

    And one small note: you should calculate with magnetic declination when displaying location based augmented content because the device's compass gives you angle to magnetic north which is not true north. You can simply calculate declination with some library (like magvar) and rotate the whole scene a bit like this:

    <a-scene id="scene">
      <!-- mag. declination 5 degs. -->
      <a-entity rotation="0 5 0" id="parent">

    You obviously need to set the rotation attribute dynamically as the declination differs in various locations. Than put all your location based content into the #parent element.

    Thank you @lysek for sharing your solution. I had the same problem, a workaround is to scale up the object when it becomes distant (see AR-js-org/AR.js#204). But it has some limitations, I will definetly try your solution.
    Nick Whitelegg
    @machinegunjoeviterbo this was a bug on ios which has been fixed recently, see AR-js-org/AR.js#235. You have to set the additional option playsinline to true when creating the video element. If you look at the PR you should be able to figure out the code change you need to make, let me know if not,
    @lysek thanks for that, this is a known problem. Are you happy submitting a PR to the repo?
    @KCoulter14 the text should not lock to the camera as long as you create an <a-entity text="..."> or <a-text> and set the gps-entity-place or gps-projected-entity-place component to the appropriate latitude and longitude. If you look at the 'connecting to a web API' example at https://ar-js-org.github.io/AR.js-Docs/location-based-tutorial/ this gives an example of what to do.
    Hello all, I tried for a long time to change the gltf model but it doesn't work... That's why I would like to ask you what is wrong in my code?
    Thnk you for help