image/plane are stretched vertically in a-frame with image-tracking

[louis-ev]

Hi !

first of all thanks a lot for the awesome work ! I have been studying and implementing it in one of my open-source apps, do•doc, which is mostly used by kids and they love the face tracking feature. They draw masks and add them to do•doc, where they can see them mapped on their faces. Works great :)

---

Anyway, I’ve been trying to add image-tracking as well (kids take a picture of two drawings, one becomes the target of the other) and almost can get it to work. However I get what looks like a bug : the projected image is stretched vertically at first, but this is fixed when I open the a-frame inspector. What could cause this ?

Two screenshots to show the problem, the only difference between them is that I opened the inspector :

My a-frame code (I’ve added height and width but this makes things worse…) :

        <a-scene
          :mindar-image="`imageTargetSrc: ${mind_and_results[0].mind}; filterMinCF:0.1; filterBeta: 10;`"
          vr-mode-ui="enabled: false"
          device-orientation-permission-ui="enabled: false"
          color-space="sRGB"
          renderer="colorManagement: true, physicallyCorrectLights"
        >
          <a-assets>
            <img id="result" :src="'/' + mind_and_results[0].result" />
          </a-assets>

          <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

          <a-entity mindar-image-target="targetIndex: 0">
            <a-plane
              src="#result"
              position="0 0 0"
              height="0.552"
              width="1"
              rotation="0 0 0"
            ></a-plane>
          </a-entity>
        </a-scene>

And in context, as a Vue.js component : https://github.com/l-atelier-des-chercheurs/dodoc/blob/dodoc2-dev/public/src/vue/components/publication_templates/subcomponents/ImageTrackingModule.vue

Thanks !

[hiukim]

@louis-ev The face mask from your student is really interesting!

You need to set height and width properly for your <a-plane> according to the dimensions of your result image. Checkout the bottom tips on https://hiukim.github.io/mind-ar-js-doc/quick-start/webpage

[louis-ev]

Hi @hiukim, thank your for helping! I actually read your docs, and set the width and height for this reason. I’ll get the actual image ratio later, for now I just tested values coming from your examples.

In my code you can see that height="0.552" is not taken into account until I open the inspector.

Here is another example with width and height set to 1. Same bug in Firefox and Chrome on macOS, and Safari on iOS.

<a-scene
          :mindar-image="`imageTargetSrc: ${mind_and_results[0].mind}; filterMinCF:0.1; filterBeta: 10;`"
          vr-mode-ui="enabled: false"
          device-orientation-permission-ui="enabled: false"
          color-space="sRGB"
          renderer="colorManagement: true, physicallyCorrectLights"
        >
          <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

          <a-entity mindar-image-target="targetIndex: 0">
            <a-plane
              position="0 0 0"
              height="1"
              width="1"
              rotation="0 0 0"
            ></a-plane>
          </a-entity>
        </a-scene>

After opening the aframe inspector :

Resizing the window doesnt work, it really seems to be the inspector that fixes the a-frame scene. I thought the bug could be with aframe but I couldn’t find anything on this on the web…

[louis-ev]

Hi @hiukim, Do you think I should post this issue in the A-Frame repo? It seems strange that I’m getting this bug with just a basic a-plane, and that pulling out the inspector fixes it… Thank you for your time!

[hiukim]

@louis-ev sometimes weird things like this happen, it could be a bug anywhere, or opening the inspector trigger some re-rendering.

looking from your code ${mind_and_results[0].mind}, it looks like you are using some kind of framework maybe react. I guess you have some additional logic instead of a plain html as in the example.

If that's the case, what I normally would do is to start from a working example first (e.g. the original example in the documentation). You can change height and width to see if there is any effect. If yes, then make gradual changes up to a point that doesn't work and we'll know the problem.

[louis-ev]

Hi @hiukim , indeed, thanks for the tip! It seems that adding a wrapper with this css code fixes this bug

  overflow: hidden;
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;

Alignment is not perfect but almost there :)

Thanks!