Imagebased marker works only with aframe-ar.js not ar.js

[matthias77]

Hi, I found an example working with aframe-ar.js. I tested it with an image (normal marker creation but with an colored image) and voila - it works nice. I tried to reproduce it with ar.js and three.js (basic example) and it won't working, don't know why. I think this must be an configuration or something like this. I hope someone can explain that to me. I'm impressed how fast and stable ar.js works, but I really think the usage of nearly "normal" images improves the capabilities and make it much more sexy and would be a real alternative to markerless AR.

Many thanks, matthias

https://github.com/sriyan983/AR_js/tree/master/ardemo

[kalwalt]

@matthias77 I would like to help you, because in the past i did it. But where is the code with ar.js? You posted only that with aframe-ar.js...

[matthias77]

Hi,

thanks for the fast reply. I simply used the basic example from here: https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/basic.html and replaced the patt file with the one (pattern-marker.patt) from the demo above. I tested with different markers, all my image-marker tests runs with the aframe version und not with the ar.js one. I would say in the last part of aframe-ar.js is something, that proccesses the marker different.

Thank you!! Matthias

[kalwalt]

Won't works in this way, The reason is that you must specify in this case the patternRatio, you can do this with the THREEx.ArToolkitProfile

////////////////////////////////////////////////////////////////////////////////
//          handle arToolkitSource
////////////////////////////////////////////////////////////////////////////////
        var artoolkitProfile = new THREEx.ArToolkitProfile();
    var arToolkitSource = new THREEx.ArToolkitSource({
        // to read from the webcam
        sourceType : 'webcam',
    })
    arToolkitSource.init(function onReady(){
        onResize()
    })
    // handle resize
    window.addEventListener('resize', function(){
        onResize()
    })
    function onResize(){
        arToolkitSource.onResize()
        arToolkitSource.copySizeTo(renderer.domElement)
        if( arToolkitContext.arController !== null ){
            arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)
        }
    }
///////////////////////////////////////////////////////////////////////////////
//          initialize arToolkitContext
////////////////////////////////////////////////////////////////////////////////
  // set patternRatio
  artoolkitProfile.contextParameters.patternRatio = 0.9
  //artoolkitProfile.contextParameters.cameraParametersUrl = THREEx.ArToolkitContext.baseURL + '../resources/data/camera_para.dat'
  artoolkitProfile.contextParameters.cameraParametersUrl = '../../resources/data/camera_para.dat'
  artoolkitProfile.contextParameters.detectionMode = 'mono'
  var arToolkitContext = new THREEx.ArToolkitContext(artoolkitProfile.contextParameters)
    // initialize it
    arToolkitContext.init(function onCompleted(){
        // copy projection matrix to camera
        camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
    })
    // update artoolkit on every frame
    onRenderFcts.push(function(){
        if( arToolkitSource.ready === false )   return
        arToolkitContext.update( arToolkitSource.domElement )
        // update scene.visible if the marker is seen
        scene.visible = camera.visible
    })
/// after set the marker Control routine ArMarkerControls()...

i think it should be an old issue about this.

[kalwalt]

@matthias77 I can do a simple example if you want.

[matthias77]

Hello kalwalt,

I hacked your code inside and pasted around and now it works with my image marker. As you said, the patternRatio (artoolkitProfile.contextParameters.patternRatio = 0.9) is the relevant point. And now I recognize this value in the marker generator, I'm blind. You saved me hours (or days) of testing around. I will post my sample when I've finished for others.

Thank you, Matthias

[kalwalt]

@matthias77 glad that you solved! Be aware that in certain circumstances, colored markers may not works. You should create for better performances a high contrast image. A yellow shape with a white background probably it will be diffcult to be recognized...

You saved me hours (or days) of testing around

:smile:

I will post my sample when I've finished for others.

thanks for this!