Search code examples
javascriptaugmented-realityaframe

How I Can Solve Mesh Visual Problem in A-Frame AR?

I am newbie at javascript and a-frame. I'am starting using it and load my model on web-site

Link to Web-site

Link to Marker for AR

As you can see in your phone mesh have wrong materials and some parts of mesh is go trough each other? Or how it named correctly... It happen in other software(Blender,Unity and e.t.c) when triangles have same position and clip trough each other. But In Blender Mesh dont have this trouble... What can I do with this problem #1?

And second problem #2 is wrong materials, that look different in Blender before export to GLTF.

Correct Materials Image

How I can change color of material, and if it's can be done - how understand that part of mesh-submesh I recolored now? I use GLTF cause of animation support. Instead I could use OBJ with MTL. But I read that it don't have animation if I correct...

I'm very newbie and try use simple solutions cause it's not field of my work - I work with Unity a lot, but here I am scared of code :)

Will be realy glad to see you advices or solutions! Thank you!

Solution

  • By Mesh-Visual problem i assume you mean this clipping on the left image (chest, and hands):

    enter image description here enter image description here

    Despite the model being seemingly close and small on the screen, it's far away from the origin and/or rescaled. The Depth values in the z-buffer are precise near the origin, but the further you move the object, the worse it gets. You can solve it, by enabling a logarithmic depth buffer (check out this example) in the renderer.

    You can achieve a similar "clipping" effect by moving the model away and enlarging it (without using ar.js):

    <a-entity id="model" position="-1 0.5 -100" scale="40 40 40" gltf-model="#robot"

    Solutions:

    1. As mentioned above - you should enable using logarithmic depth buffer by the renderer:

      // a-frame
<a-scene renderer="logarithmicDepthBuffer: true" ...

// three.js
var renderer = new WebGLRenderer({logarithmicDepthBuffer: true})
// or rendererReference.logarithmicDepthBuffer = true

    2. But if for any reason (performance? no idea, would need to test that.) you need another solution - using a THREE.PerspectiveCamera() instead of the default one also solves the clipping issue:

      // ar.js needs to be up and running - wait until scene.systems["arjs"]._arSession is not null
scene.camera = new THREE.PerspectiveCamera()