能否在Wikitude JS API的AR.GeoLocation中实现3D模型动态遮挡？

我正在开发一款基于Wikitude的AR应用，需求是当用户进入预定义地理围栏区域时，在建筑特定高度显示广告横幅。目前已经通过AR.GeoLocation成功将3D模型放置在目标建筑上，但遇到了模型会穿过中间墙体、建筑甚至遮挡物（比如树木、手）被看到的问题。希望实现动态遮挡效果：当目标建筑与摄像头之间存在任何遮挡物（建筑、树木、手等）时，隐藏模型被遮挡的部分，仅显示未被遮挡的区域。

当前实现代码 #

var World = { 
    loaded: false, 
    rotating: false, 
    init: function initFn() { 
        this.createModelAtLocation(); 
    }, 
    createModelAtLocation: function createModelAtLocationFn() { 
        /* First a location where the model should be displayed will be defined. This location will be relativ to the user. */ 
        //var location = new AR.RelativeLocation(null, 5, 0, 2); 
        var geoLoc = new AR.GeoLocation(23.027390, 72.558721, 320.);//National Handloom 
        //var geoLoc = new AR.GeoLocation(23.028350, 72.506674, 320.);//Iscon 
        //var geoLoc = new AR.GeoLocation(26.206274, 73.048096, 320.);//Jodhpur 
        //var geoLoc = new AR.GeoLocation(40.319421, -74.631490, 320.);//client 
        var location = new AR.RelativeLocation(geoLoc, 10, 10, 10); 

        /* Next the model object is loaded. */ 
        var modelEarth = new AR.Model("assets/earth.wt3", { 
            onLoaded: this.worldLoaded, 
            scale: { x: 10, y: 10, z: 10 } 
        }); 

        var indicatorImage = new AR.ImageResource("assets/indi.png"); 
        var indicatorDrawable = new AR.ImageDrawable(indicatorImage, 0.1, { verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP }); 

        /* Putting it all together the location and 3D model is added to an AR.GeoObject. */ 
        var obj = new AR.GeoObject(location, { 
            drawables: { cam: [modelEarth], indicator: [indicatorDrawable] } 
        }); 
    }, 
    worldLoaded: function worldLoadedFn() { 
        World.loaded = true; 
        var e = document.getElementById('loadingMessage'); 
        e.parentElement.removeChild(e); 
    } 
}; 

World.init(); 

解决方案 #

1. 启用硬件深度遮挡（核心方案，支持动态遮挡） #

Wikitude的原生SDK（Android/iOS）支持基于设备深度传感器的实时深度遮挡，这是处理手、树木等动态遮挡物的最优方案：

• 第一步：开启AR View的深度感知
  • Android：在初始化ArchitectStartupConfiguration时添加setDepthEnabled(true)
  • iOS：在配置WTArchitectView时设置depthEnabled = true
• 第二步：为模型开启遮挡属性
  修改你的AR.Model初始化代码，添加occlusionEnabled: true参数，让模型能被深度数据实时遮挡：

  var modelEarth = new AR.Model("assets/earth.wt3", {
      onLoaded: this.worldLoaded,
      scale: { x: 10, y: 10, z: 10 },
      occlusionEnabled: true // 启用深度遮挡
  });
  

2. 静态建筑遮挡补充（针对固定场景） #

如果需要对特定建筑做更精准的静态遮挡，可以结合Wikitude的SLAM空间映射功能：

• 使用Wikitude的空间扫描工具，将目标建筑及周边环境扫描成3D空间网格
• 将扫描得到的网格作为遮挡面添加到AR场景中，模型会被这些静态结构遮挡
• 注意：这种方式仅适用于固定场景，无法处理动态移动的遮挡物

3. 场景联动优化 #

为了确保模型仅在合适的场景下显示，可以补充以下逻辑：

• 监听地理围栏进入事件，仅在用户进入目标区域后才初始化模型
• 通过Wikitude的深度API检测模型与摄像头之间的遮挡占比，当遮挡超过设定阈值时，隐藏模型或降低透明度

关键注意事项 #

• 深度遮挡依赖设备的硬件深度传感器（如iPhone的LiDAR、Android的TOF传感器），需要在应用中添加设备兼容性判断
• 对于无深度传感器的设备，可以采用基于图像的视觉遮挡检测，但效果会弱于硬件方案
• 确保使用的Wikitude SDK版本支持深度遮挡功能（建议使用最新稳定版）

内容的提问来源于stack exchange，提问作者Umesh AHIR