Unity WebGL AR实现：GPS/图像标记的JS与Unity通信技术问询

背景与约束 #

将现有Unity+ARCore移动端AR应用移植至WebGL平台，因浏览器无法调用原生ARCore平面追踪API，选择基于地理位置的AR（Geo AR）或图像标记追踪两种替代方案。核心要求：

• 保留C#核心业务逻辑，Unity版本锁定2022 LTS+
• Geo AR需达到约5米精度，标记追踪需中等精度
• 实现浏览器到Unity WebGL的低延迟数据传输（地理坐标/标记变换矩阵），实时更新GameObject位置

可行方案 #

• 基于地理位置的AR：利用浏览器Geolocation和DeviceOrientation API获取用户坐标与朝向
• 基于图像标记的AR：采用JS追踪库（如js-aruco、ARToolKit.js、mind-ar-js）检测视频流中的标记

具体技术解决方案与实现模式 #

一、基于GPS的Geo AR方案 #

1. 数据过滤与去噪

• 地理坐标：使用watchPosition替代getCurrentPosition，开启enableHighAccuracy: true获取高精度数据；通过**指数加权移动平均（EWMA）**过滤噪声，公式为：currentValue = alpha * newReading + (1 - alpha) * currentValue（alpha取0.1~0.3，平衡响应速度与平滑度）；同时丢弃单次坐标偏差超过accuracy值2倍的异常数据。
• 设备朝向：对DeviceOrientation返回的alpha（方位角）同样应用EWMA平滑；监听compassneedscalibration事件，提示用户校准罗盘；忽略单次角度变化超过30度的异常值。

2. JS到Unity的最优传输格式

优先选择直接操作Emscripten内存，比JSON序列化/SendMessage开销低一个数量级：

• Unity侧：通过[DllImport("__Internal")]导出C函数，注册内存回调或暴露内存地址：

  [DllImport("__Internal")]
  public static extern void RegisterGeoDataCallback(IntPtr callback);
  
  private delegate void GeoDataCallback(float lat, float lng, float heading, float accuracy);
  private GeoDataCallback _callback;
  
  void Start() {
    _callback = OnGeoDataReceived;
    RegisterGeoDataCallback(Marshal.GetFunctionPointerForDelegate(_callback));
  }
  
  void OnGeoDataReceived(float lat, float lng, float heading, float accuracy) {
    // 处理地理数据
  }
  

• JS侧：通过Module.ccall调用注册函数，直接传递原始数值：

  function sendGeoData(lat, lng, heading, accuracy) {
    Module.ccall('RegisterGeoDataCallback', null, ['number','number','number','number'], [lat, lng, heading, accuracy]);
  }
  

若需兼容简单场景，可使用SendMessage传递压缩字符串（如"lat,lng,heading"），但仅适合低频更新。

3. WGS84到Unity坐标转换（5米精度实现）

将WGS84经纬度转换为UTM平面坐标系，适配Unity XZ平面：

1. 坐标转换：在JS或C#中实现UTM转换逻辑（直接使用成熟的转换算法，避免自行编写复杂公式），将经纬度转为东向（Easting）和北向（Northing）值。
2. 原点对齐：以用户初始位置为Unity世界原点(0,0,0)，其他物体的坐标为「物体UTM值 - 用户初始UTM值」，确保相对位置准确。
3. 精度优化：结合Geolocation返回的accuracy值，对Unity中物体位置做插值平滑；若精度低于5米，暂时隐藏AR物体或提示用户移动到信号良好区域。

二、基于图像标记的AR方案 #

1. 变换矩阵低开销传输

直接操作Unity WebGL的内存缓冲区Module.HEAPF32：

• Unity侧：申请内存并暴露偏移量：

  public static float[] markerMatrix = new float[16];
  [DllImport("__Internal")]
  public static extern int GetMarkerMatrixOffset();
  
  void Start() {
    int offset = GetMarkerMatrixOffset();
    // 将markerArray映射到内存偏移地址
  }
  

• JS侧：将16元素的Float32Array矩阵写入HEAPF32，再通知Unity读取：

  function sendMarkerMatrix(matrix) {
    // 转换矩阵格式（JS库多为列优先，Unity为行优先，需转置）
    const unityMatrix = [
      matrix[0], matrix[4], matrix[8], matrix[12],
      matrix[1], matrix[5], matrix[9], matrix[13],
      matrix[2], matrix[6], matrix[10], matrix[14],
      matrix[3], matrix[7], matrix[11], matrix[15]
    ];
    // 写入Unity内存（每个float占4字节，偏移量除以4）
    Module.HEAPF32.set(new Float32Array(unityMatrix), markerMatrixOffset / 4);
    // 通知Unity更新
    unityInstance.SendMessage("MarkerManager", "OnMatrixUpdated");
  }
  

2. 视频追踪与Unity渲染帧同步

• 将JS追踪逻辑绑定到requestAnimationFrame，确保与Unity渲染帧同频；
• Unity侧在Update中主动读取内存中的最新矩阵，而非依赖JS每帧推送；
• 若追踪帧率（如30FPS）低于Unity渲染帧率（如60FPS），对矩阵做线性插值，避免物体跳动。

3. MindAR-JS与Unity集成成熟模式

核心逻辑：JS负责视频捕获与标记追踪，Unity负责渲染与业务逻辑，步骤如下：

1. HTML层初始化：加载MindAR-JS，将视频画布设为Unity背景（或隐藏，让Unity相机叠加AR内容）；
2. 标记追踪回调：MindAR检测到标记时，获取变换矩阵并转换为Unity兼容格式；
3. 内存通信：JS将矩阵写入Unity内存，Unity C#脚本在Update中读取并更新GameObject的transform。

简化代码示例：

• JS侧：

  const mindar = new MindARThree({container: document.body});
  const anchor = mindar.addAnchor('marker-id');
  anchor.onTargetFound = () => {
    const matrix = anchor.group.matrix.elements;
    const unityMatrix = [/* 转置后的矩阵 */];
    Module.HEAPF32.set(new Float32Array(unityMatrix), markerMatrixOffset / 4);
    unityInstance.SendMessage("MarkerManager", "OnMarkerDetected");
  };
  mindar.start();
  

• Unity C#侧：

  public class MarkerManager : MonoBehaviour {
    public GameObject arObject;
    private float[] _matrix = new float[16];
  
    void Update() {
      // 从内存读取矩阵
      Marshal.Copy(GetMarkerMatrixOffset(), _matrix, 0, 16);
      // 应用到物体
      arObject.transform.SetPositionAndRotation(
        new Vector3(_matrix[12], _matrix[13], _matrix[14]),
        Quaternion.LookRotation(
          new Vector3(_matrix[8], _matrix[9], _matrix[10]),
          new Vector3(_matrix[4], _matrix[5], _matrix[6])
        )
      );
    }
  }
  

三、通用集成问题 #

1. 频繁数据更新的通信方式选择

• 高频更新（≥30FPS）：优先直接操作Emscripten内存或调用C函数，避免SendMessage的序列化开销；
• 低频事件（如标记检测/丢失）：使用SendMessage足够，实现简单。

2. JS追踪器初始化时机

在Unity WebGL加载完成的回调中启动JS追踪逻辑，确保Unity模块完全就绪：

var unityInstance = UnityLoader.instantiate("unityContainer", "Build/Project.json", {
  onSuccess: function(instance) {
    // 初始化Geo追踪或标记追踪
    initGeoTracker();
    // 或 initMarkerTracker();
  }
});

内容的提问来源于stack exchange，提问作者Cheloveki Team