如何在A帧AR中解决网格视觉问题?

2022-06-19 00:00:00 javascript aframe augmented-reality

我对javascript和a-Frame还是个新手。我正在开始使用它并将我的模型加载到网站

Link to Web-site

Link to Marker for AR

正如您在手机中看到的,网孔的材质错误,并且网孔的某些部分互相凹陷?或者它是如何正确命名的..。它发生在其他软件(Blender,Unity和e.t.c)中,当三角形具有相同的位置和彼此的剪裁槽时。但在搅拌机网格中没有这个麻烦。我可以如何处理此问题#1?

第二个问题2是错误的材料,在导出到GLTF之前,这些材料在搅拌机中看起来不同。

Correct Materials Image

如何更改材质的颜色?如果可以,如何理解我现在重新着色的那部分网格子网格?我使用GLTF原因动画支持。相反,我可以将OBJ与MTL结合使用。但我读到如果我改正它就没有动画...

我是一个新手,尝试使用简单的解决方案,因为这不是我的工作领域-我经常使用Unity,但在这里我害怕代码:)

将非常高兴看到您的建议或解决方案!谢谢!


解决方案

关于网格-视觉问题,我假设您指的是左侧图像(胸部和手)上的这个剪辑:

尽管模型在屏幕上看起来很近很小,但它远离原点和/或重新缩放。Z缓冲区中的深度值在原点附近非常精确,但您将对象移动得越远,情况就越糟糕。您可以通过在呈现器中启用对数深度缓冲区(签出this example)来解决此问题。

您可以通过将模型移开并放大(不使用ar.js)来获得类似的";裁剪";效果:

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

解决方案:

  1. 如上所述-您应该启用呈现器使用对数深度缓冲区:

    // a-frame
    <a-scene renderer="logarithmicDepthBuffer: true" ...
    
    // three.js
    var renderer = new WebGLRenderer({logarithmicDepthBuffer: true})
    // or rendererReference.logarithmicDepthBuffer = true
    
  2. 但如果出于任何原因(性能?不知道,需要测试一下。)您需要另一种解决方案-使用THREE.PerspectiveCamera()而不是默认解决方案也可以解决裁剪问题:

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

相关文章