CODEWITHSUNDEEP
javascriptwebaugmented-realityaframear.js
Aryan
Aryan

Reputation: 101

A-Frame Jittering Of 3D Model

I am trying to augment a car model using the hiro pattern, but there is jittering.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>augmented reality</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- A FRAME -->
  <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
  <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js" crossorigin="anonymous"></script>
  <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v3.8.4/dist/aframe-extras.min.js" crossorigin="anonymous"></script>
  <script src="https://rawgit.com/mayognaise/aframe-gif-shader/master/dist/aframe-gif-shader.min.js" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/aframe-event-set-component@^4.0.0/dist/aframe-event-set-component.min.js"></script>
  <!-- import events.js script -->
  <script src="https://rawgit.com/nicolocarpignoli/nicolocarpignoli.github.io/master/ar-playground/events.js"></script>
  <!-- import the webpage's stylesheet -->
  <link rel="stylesheet" href="/style.css">

  <!-- import the webpage's javascript file -->
  <script src="/script.js" defer></script>
</head>

<body>


  <a-scene shadow="type: pcfsoft" embedded arjs='sourceType: webcam; debugUIEnabled: false;' debug>

    <a-marker preset="hiro">
      <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">
      </a-entity>
    </a-marker>
    <a-entity light="type: ambient; color: #CCC"></a-entity>
    <a-entity camera></a-entity>

  </a-scene>

  <!-- include the Glitch button to show what the webpage is about and
          to make it easier for folks to view source and remix -->
  <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
  <script src="https://button.glitch.me/button.js"></script>
</body>

</html>

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.

When Far
When Far

Closer
Closer

Far
far roung 2 feet

Upvotes: 1

Views: 2105

Answers (1)

janpio
janpio

Reputation: 10902

There is a AR.js bug that could be behind this: https://github.com/jeromeetienne/AR.js/issues/410

One workaround is to add this code before </body>:

<script>
// Workaround for an AR.js bug (https://github.com/jeromeetienne/AR.js/issues/410)
const sceneEl = document.querySelector('a-scene');
sceneEl.addEventListener('loaded', () => {
    sceneEl.camera = new THREE.PerspectiveCamera();
});
</script>

Upvotes: 1

Related Questions