AR.js: In A-Frames While Loading Model (.OBJ), the model is Jittering (Broken Textures) While Augmenting On HIRO Pattern

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

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Operating System and Device Name STACKOVERFLOW : https://stackoverflow.com/questions/51879047/in-a-frames-while-loading-model-obj-the-model-is-jittering-broken-textures

I Am Trying To Augment .obj (model) OBJ MODEL (Car) on Hiro Marker (.PATT) Using A-Frames

ISSUE 1) While Augmenting On HIRO Pattern the Obj Is loading But the obj texture is jittering (fluctuating, broken) as shown in the Images- MODEL,EDGES, BROKEN TEXTURES ON EDGES… When the pattern is scanned from far the jittering is more…

When I Am Opening the model in 3D Builder the model is rendering without any jittering or disordering, Images- MODEL IN 3D BUILDR, CAR.…Can anyone help me to load the model without jittering(broken) of the model, with stability…

REQUIREMENT: On Augmenting the model(.obj,.mtl) the texture should not jitter or broke

ISSUE 2) And Another Query Can we Load the .obj and .mtl file through URL from AWS S3 bucket… Currently, As in the code, I am loading the models from local storage(ar_assets/model/…)… Can we fetching from the model URL, I tried it but it is not working, Is there any solution to load the model(.obj,.mtl) from URL, URL Of the Models Are in the code with Commented lines.

REQUIREMENT : Loading model resources(.obj,.mtl,textures) from URL insted of local storage.

----- Thanks In Advance

`<!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="UTF-8"> <meta name="author" content=""> <meta name="description" content=""> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>OBJ A-FRAME</title> <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script> <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script> <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v4.1.2/dist/aframe-extras.min.js"></script> <script src="https://rawgit.com/donmccurdy/aframe-extras/v2.1.1/dist/aframe-extras.loaders.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head>

       <body style='margin : 0px; overflow: hidden;'>
          <div class="header">
             <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pull-left">
                   <div  class="oneleft">
                      <div class="imgon">
                         <img class="imgss img-responsive" src="https://isl-web-res.s3.ap-south-1.amazonaws.com/augment/ar_patterns/mono_patterns/hiro.png">
                      </div>
                      <span class="imgname"> Scan Me </span>
                   </div>
                </div>
             </div>
          </div>
          </div>

          <a-scene shadow="type: pcfsoft" embedded arjs='sourceType: webcam; debugUIEnabled: false;'>
             <a-assets>
                <!-- RESOURCES FROM LOCAL STORAGE  -->
                <a-asset-item id="tree-obj-1"  src="../ar_assets/models/audi_ar/Audia4interior/audia4inter.obj"></a-asset-item>
                <a-asset-item  id="tree-mtl-1" src="../ar_assets/models/audi_ar/Audia4interior/audia4inter.mtl"></a-asset-item>
                <!-- URL RESOURCES FOR .OBJ -->
                <!-- <a-asset-item id="tree-obj-1"  src="https://isl-web-res.s3.ap-south-1.amazonaws.com/augment/ar_assets/models/audi_ar/Audia4interior/audia4inter.obj"></a-asset-item>
                   <a-asset-item  id="tree-mtl-1" src="https://isl-web-res.s3.ap-south-1.amazonaws.com/augment/ar_assets/models/audi_ar/Audia4interior/audia4inter.mtl"></a-asset-item>
                   -->
             </a-assets>
             <!-- <a-marker  type="pattern" url="https://isl-web-res.s3.amazonaws.com/augment/ar_patterns/mono_patterns/hiro.patt"> -->
             <a-marker  type="pattern" url="../ar_assets/pattern/hiro.patt">
                <a-entity obj-model="obj: #tree-obj-1; mtl: #tree-mtl-1" position="0 0 0" rotation="-90 0 -90" scale="0.1 0.1 0.1"></a-entity>
             </a-marker>
             <a-entity ></a-entity>
             <a-entity camera></a-entity>
          </a-scene>

          <style>
             .imgon{
             width: 55px;
             height: 55px;
             background-color:white;
             padding: 3px 2px 2px 2px !important;
             }
             .imgss{
             width: 50px !important;
             height:50px !important;
             } 
             .imgname{
             font-size: 10px;
             }
             .header {
             position: fixed;
             left: 0;
             top: 0;
             width: 100%;
             color: white;
             }
             .oneleft{
             padding: 5px 5px 5px 5px;
             margin: 5px 15px 5px 5px ;
             float: left;
             z-index: 900000000000;
             }
             #arjsDebugUIContainer{
             display: none;
             }
             .a-enter-vr-button{
             display: none !important;
             }
          </style>
       </body>
    </html>`

obj_aframe.txt

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 20 (3 by maintainers)

Most upvoted comments

I’m not sure this is related but I had similar glithes and I fixed it by setting logarithmicDepthBuffer to true when creating my rendererer

  var renderer	= new THREE.WebGLRenderer({
    antialias: true,
    alpha: true,
    logarithmicDepthBuffer: true
  });

audifaxdev on Aug 30, 2018