title: A-Frame Jittering Of 3D Model
body: <p>I am trying to augment a car model using the hiro pattern, but there is jittering.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;title&gt;augmented reality&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;!-- A FRAME --&gt;
    &lt;script src="https://aframe.io/releases/0.8.2/aframe.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v3.8.4/dist/aframe-extras.min.js" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://rawgit.com/mayognaise/aframe-gif-shader/master/dist/aframe-gif-shader.min.js" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/aframe-event-set-component@^4.0.0/dist/aframe-event-set-component.min.js"&gt;&lt;/script&gt;
    &lt;!-- import events.js script --&gt;
    &lt;script src="https://rawgit.com/nicolocarpignoli/nicolocarpignoli.github.io/master/ar-playground/events.js"&gt;&lt;/script&gt;
    &lt;!-- import the webpage's stylesheet --&gt;
    &lt;link rel="stylesheet" href="/style.css"&gt;
  
    &lt;!-- import the webpage's javascript file --&gt;
    &lt;script src="/script.js" defer&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
    &lt;a-scene shadow="type: pcfsoft" embedded arjs='sourceType: webcam; debugUIEnabled: false;' debug&gt;
  
      &lt;a-marker preset="hiro"&gt;
        &lt;a-entity shadow="cast: true" gltf-model="https://cdn.glitch.com/0d1945ac-ed6f-44be-9903-e1c1626575a4%2Fcar.glb?1548349423434" position="0 0 0" crossOrigin="anonymous" response-type="arraybuffer" rotation="0 0 0" scale="0.05 0.05 0.05"&gt;
        &lt;/a-entity&gt;
      &lt;/a-marker&gt;
      &lt;a-entity light="type: ambient; color: #CCC"&gt;&lt;/a-entity&gt;
      &lt;a-entity camera&gt;&lt;/a-entity&gt;
  
    &lt;/a-scene&gt;
  
    &lt;!-- include the Glitch button to show what the webpage is about and
            to make it easier for folks to view source and remix --&gt;
    &lt;div class="glitchButton" style="position:fixed;top:20px;right:20px;"&gt;&lt;/div&gt;
    &lt;script src="https://button.glitch.me/button.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When the camera is closer to the marker than the object is jittering (broken textures) is a bit less, but when the camera is far (increase the distance between the marker and camera then the jittering increases as in the attached images.</p>
  
  <p>When Far<br>
  <a href="https://i.stack.imgur.com/lSatd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lSatd.png" alt="When Far"></a> </p>
  
  <p>Closer<br>
  <a href="https://i.stack.imgur.com/Sh33B.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Sh33B.jpg" alt="Closer"></a></p>
  
  <p>Far<br>
  <a href="https://i.stack.imgur.com/9BpIs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9BpIs.png" alt="far roung 2 feet"></a></p>