search

jeromeetienne / AR.js

Efficient Augmented Reality for the Web - 60fps on mobile!
MIT License
15.79k stars 2.22k forks source link

Unable to create marker for custom marker using AR.js Marker Traning #437

Closed sskadit closed 5 years ago

sskadit commented 5 years ago

If I use this kind of image for the AR.JS Marker Training the Patt file is absolutely rubbish.

I have followed all the blogs like how to create a custom marker.

Tell me how could I get the perfect patt file where it can recognise the image properly.

screenshot 2018-11-12 at 3 46 31 pm

droid001 commented 5 years ago

@sskadit : You should only be reporting bugs on AR.js here. Ask your question on Stackoverflow and I'll help you out.

sskadit commented 5 years ago

@sskadit : You should only be reporting bugs on AR.js here. Ask your question on Stackoverflow and I'll help you out.

Thanks I have asked the stackover flow question

https://stackoverflow.com/questions/53260343/ar-js-marker-not-training-properly

sskadit commented 5 years ago

Is there any image recognition like Vuforia capability with AR.JS @droid001

sskadit commented 5 years ago

The trick is that the background should be rgb(240,240,240) and you should have an eye on the grid which is going to be produced. As you can see from the produced .patt file there are 16 values per row so if you have an image which is hitting that grid well then you're more likely to get a good recognition result.

screen shot 2018-11-12 at 11 55 47

marker

Here's the svg I use as a template for markers:

marker-trainer.svg.zip

Thanks for the help!! @droid001

droid001 commented 5 years ago

@sskadit Not what I've seen while looking in the source code, but maybe someone on Gitter would know more about it.

nicolocarpignoli commented 5 years ago

use grey instead of white colors (with the black of course) and maybe I guess the image is too complex. try with another simplier image like the apple without the leaf. if it works, it's surely the 'too complicated' shape that your image has

commentatorboy commented 5 years ago

I have the same problem. I am creating a extremly simple marker. letter

This is the pattern file image

But currently it does not work. I am using the following code:

<!doctype HTML>
<html>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"> </script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v4.2.0/dist/aframe-extras.min.js"></script>
  <body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs>
      <a-assets>
        <a-asset-item id="tree" src="bench.glb">
      </a-assets>
    <a-marker preset='custom' type='pattern' url='test.patt'>
        <a-entity rotation="-90 0 0" material="shader: flat; color: red;" scale="0.01 0.01 0.01" gltf-model="#tree">
            <a-animation attribute="rotation"
                       dur="10000"
                       fill="forwards"
                       to="0 360 0"
                       repeat="indefinite"></a-animation>
        </a-entity>
        </a-marker>
    <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>
nicolocarpignoli commented 5 years ago

@commentatorboy although it seems a simple image, this is not a 'simple marker'. try using only one of the letters, i.e. only the 'E' letter. to learn more about markers, please have a look here: https://medium.com/chialab-open-source/ar-js-the-simpliest-way-to-get-cross-browser-ar-on-the-web-8f670dd45462

commentatorboy commented 5 years ago

I found out that if you use a pixelated text font it is more likely to work. I would recommend other people using pixelated text font too. tt

@nicolocarpignoli Thanks for the link.

nicolocarpignoli commented 5 years ago

Yes, problem was with the original image, 'too complex'. Nice to know this "pixeled text" thing. Thanks!

I close as solved