3d models blinking/flashing and animation don't work

SystemDiagnosticss commented 4 years ago

Do you want to request a feature or report a bug? Report a bug

What is the current behavior? When scene render any 3d models with animations model are blinking. On this video we can see ugly blinks on trex legs and face. In secont 3dmodel we can see how blink rubiks cube and animation don't work. This behaivor we can see also in nft example from AR.js repo for a-frame My questions: Why it's happening(ugly blinking)? And how to run animations correct? If the current behavior is a bug, please provide the steps to reproduce. Run nft example python3 -m http.server 8000 --bind 127.0.0.1, in another terminal ./ngrok http 8000

Please mention other relevant information such as the browser version, Operating System and Device Name Chrome 80.0.3987.116, Android 9, Samsung Galaxy Tab A SM-T510 What is the expected behavior? Rendering 3d models with animation without blinking and correct animation

SystemDiagnosticss commented 4 years ago

UPDATE I am add animation use animation-mixer="clip:Take 001;" and extras-lib <script src="https://cdn.jsdelivr.net/npm/aframe-extras@6.1.0/dist/aframe-extras.min.js"></script>

But blinking problem is still unresolved: video

My code:

<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aframe-extras@6.1.0/dist/aframe-extras.min.js"></script>

<style>
  .arjs-loader {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .arjs-loader div {
    text-align: center;
    font-size: 1.25em;
    color: white;
  }
</style>

<body style='margin : 0px; overflow: hidden;'>
  <a-scene
      vr-mode-ui='enabled: false;'
      embedded arjs='trackingMethod: best; sourceType: webcam; debugUIEnabled: false;'>

      <a-nft
          type='nft' url='/label-wine2/label-wine2'
          smooth='true' smoothCount='10' smoothTolerance='0.01' smoothThreshold='5'>
          <a-entity
              gltf-model='/17_3dior2/scene.gltf'
              animation-mixer="clip:Take 001;"
              position='300 100 -150'
              rotation='-90 0 0'
              scale='2 2 2'
              >
          </a-entity>
      </a-nft>
  <a-entity camera></a-entity>
  </a-scene>
</body>

Why it's happening(ugly blinking)?

SystemDiagnosticss commented 4 years ago

UPDATE Blinking SOLVED by adding to a-scene renderer='logarithmicDepthBuffer: true;' So a-scene code snippet:

<a-scene
      vr-mode-ui='enabled: false;'
      embedded arjs='trackingMethod: best; sourceType: webcam; debugUIEnabled: false;' renderer='logarithmicDepthBuffer: true;'>

h3d-longnsp commented 7 months ago

Wow thanks a lot. You saved me from a lot of headache. The documentation for AR js is really unintuitive and definitely needs more updates. For example, there was no mention that I need to add aframe-extras in order for animation-mixer to work.

AR-js-org / AR.js

3d models blinking/flashing and animation don't work #111