5

TL;博士;

Google 的新AR 动物在网络上看起来好像是 AR（如AR.js或8thWall），但实际上是原生ARCore应用程序。诡计是浏览器中的一个链接（实际上是一个带有非常模糊的事件处理程序链的按钮）会启动ARCore 应用程序本身，而不会提示用户安装任何东西。谷歌是如何做到这一点的？我也想做。

细节

最近谷歌推出了一项搜索功能，允许用户通过单击搜索信息卡中的链接在 AR 中查看动物。

这是真正的平面感应、SLAM 跟踪 AR，无需标记。在我自己的手机（运行 Android 9 的 Pixel 2）上查看示例，位置和角度保真度令人印象深刻。我可以移动手机，四处走动，老虎的脚（例如）保持在几英寸内。同样，AR 对象具有出色的视觉稳定性，避免了困扰我所见过的大多数基于标记的 AR.js 应用程序的抖动，或者我在 8th Wall 的非标记 示例中看到的平庸的对象锚定。

作为一名致力于通过网络交付 AR 的开发人员，我非常好奇他们是如何取得如此高质量的结果。他们是否拥有比 THREE.js / ARKit / AR.js 开源项目更优越的专有技术？

不。使用笔记本电脑上的 USB 远程检查我的手机，加上一些间接线索，调试到老虎示例，我得出的结论是它们看起来很好，因为它们不是 Web AR，而是使用 ARCore 的原生 AR。谷歌不知何故导致用户的手机加载原生 ARCore 应用程序（系统日志显示 ARCore 本身正在作为应用程序启动）而没有任何安装提示。尝试切换到另一个应用程序会导致 AR 应用程序自动关闭，从而使其难以调试或检查。

Google 自己的 ARCore 文档通常暗示您需要将应用程序发布到 Play 商店才能真正将支持 ARCore 的软件交付给用户。那么，有谁知道谷歌是如何做他们在这里做的事情的？

所有图片都是我的原创作品

信息卡链接：

带有链接的信息卡

提示向 ARCore 授予应用权限：

提示授予权限

ARCore 刚刚被使用：

应用使用日志

4

2 回答 2

2

https://developers.google.com/ar/develop/java/scene-viewer

Scene Viewer 是一种身临其境的查看器，可让您从您的网站获得 AR 体验。它使 Android 移动设备用户可以轻松地在其环境中放置、查看 Web 托管的 3D 模型并与之交互。

为此，用户只需要一台具有 ARCore 1.9 或更高版本的 Android 设备。大多数 Android 浏览器都受支持，并且不需要与浏览器进行编程集成 - 只需网页上格式正确的链接即可。

<model-viewer ar alt="A 3D model of an astronaut." src="Astronaut.gltf"></model-viewer>

感谢您发布这个问题。:) 我一直在等待这个功能，但我不知道它什么时候出来。

于 2019-06-22T07:59:49.493 回答
0

它通过使用 Android 的意图 URL 来工作。

intent://arvr.google.com/scene-viewer/1.2?file=https://storage.googleapis.com/ar-answers-in-search-models/static/GiantPanda/model.glb&title=Giant%20panda&referrer=google.com:ANIMALS:kp_carousel&sound=https://storage.googleapis.com/ar-answers-in-search-models/static/GiantPanda/Bear_Panda_Giant_Unisex_Adult.ogg&card_content=https://arvr.google.com/searchar/infocard?data%3DCg0vZy8xMWo1ZjVkbms0EAE%26hl%3Den-US&share_text=See%20a%20life-sized%20animal!%20Search%20%22Giant%20panda%22%20on%20Google%20and%20tap%20%22View%20in%203D.%22%20https://www.google.com/search?q%3DGiant%2Bpanda%26hl%3Den-US%26stick%3DH4sIAAAAAAAAAFPi0M_VNzBOyjJ8xGjMLfDyxz1hKa1Ja05eY1Th4grOyC93zSvJLKkUEuNig7J4pLi44Jp4FrFyu2cm5pUoFCTmpSQCADr-Ul5OAAAA#Intent;package=com.google.android.googlequicksearchbox;scheme=https;S.browser_fallback_url=https://arvr.google.com/scene-viewer?file=https://storage.googleapis.com/ar-answers-in-search-models/static/GiantPanda/model.glb&title=Giant%20panda&referrer=google.com:ANIMALS:kp_carousel&sound=https://storage.googleapis.com/ar-answers-in-search-models/static/GiantPanda/Bear_Panda_Giant_Unisex_Adult.ogg;end;

跳到最后一个生成器。

让我们分解 URL 格式。

  • intent://好的，这是一个 Android Intent URL

  • arvr.google.com/scene-viewer/1.2?[parameters]这是将传递给 ARCore 应用程序的 URL。参数工作如下：

    • card_content：这是一个网页链接，显示在 AR 视图底部的信息表上。 显示网页嵌入位置的屏幕截图。
    • file: 这是 3D 模型文件，glb 格式。
    • referrer: 不知道这是干什么用的，可能是在跟踪。
    • share_text：这会在您单击共享按钮时设置要共享的文本。
    • sound：要播放的音频文件，ogg 格式。
    • title：模型的名称，显示在底部信息表的标题中。

  • #Intent;好的，现在我们将进入告诉 Android 在哪里打开链接的部分。

    • package=com.google.android.googlequicksearchbox;有趣的。这会在 Google 应用中打开，而不是在 ARCore 应用中打开。谷歌有在谷歌应用程序中粘贴随机东西的习惯，我想这就是其中之一。
    • scheme=https;这意味着开头的 URL 应作为 https:// URL 传递给 Google。
    • S.browser_fallback_url=https://arvr.google.com/scene-viewer?[parameters]如果用户没有 Google 应用程序，则会打开此 URL。
      • file： 往上看。
      • title： 往上看。
      • sound： 往上看。
      • referrer： 往上看。

  • ;end;URL 的结尾在这里。

urlform.oninput=()=>{
out.textContent=`intent://arvr.google.com/scene-viewer/1.2?file=${encodeURIComponent(file.value)}&title=${encodeURIComponent(title.value)}&referrer=&sound=${encodeURIComponent(sound.value)}&card_content=${encodeURIComponent(card.value)}&share_text=${encodeURIComponent(share.value)}#Intent;package=com.google.android.googlequicksearchbox;scheme=https;S.browser_fallback_url=https://arvr.google.com/scene-viewer?file=${encodeURIComponent(file.value)}&title=${encodeURIComponent(title.value)}&referrer=&sound=${encodeURIComponent(sound.value)};end;`
}
#urlform{
display:grid;
grid-gap:9px;
}
<form id="urlform">
<input type="text" placeholder="URL of model file (GLB)" id="file">
<input type="text" placeholder="Model name" id="title">
<input type="text" placeholder="URL of sound file (OGG)" id="sound">
<input type="text" placeholder="URL of card webpage (HTML)" id="card">
<textarea placeholder="Share text" id="share"></textarea>
</form>
<div id="out"></div>

于 2020-12-02T15:44:00.603 回答