Google如何通过浏览器链接启动AR Animals ARCore应用？

Question

TL; DR;

Google的新AR animals看上去就像是网络上的AR（例如AR.js或8thWall），但实际上是本机ARCore应用程序。轻率的做法是浏览器中的链接（实际上是带有非常模糊的事件处理程序链的按钮）将启动the ARCore app itself，而不会提示用户安装任何东西。 Google如何做到这一点？我也想这样做。

详细信息

最近的Google introduced a search feature，允许用户通过点击搜索信息卡上的链接来view animals in AR。

这是真正的平面感应，SLAM跟踪AR，不需要标记。在我自己的手机（运行Android 9的Pixel 2）上查看示例时，位置和角度保真度令人印象深刻。我可以四处移动电话，四处走动，例如，虎脚停留在几英寸内。同样，AR对象具有出色的视觉稳定性，避免了困扰我见过的大多数基于标记的AR.js应用程序的晃动，也避免了我在第八届Wall non-marker examples中看到的中等对象锚定。

作为从事通过网络交付的AR的开发人员，我很好奇他们如何取得如此高质量的结果。他们是否拥有不与THREE.js / ARKit / AR.js开源项目共享的卓越专有技术？

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

Google自己的ARCore文档通常意味着您需要将应用发布到Play商店，才能真正将启用了ARCore的软件交付用户。那么，有人知道Google在这里做什么吗？

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

信息卡链接：

提示向ARCore授予应用权限：

刚刚使用了ARCore ：

Answer 1

https://developers.google.com/ar/develop/java/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>

感谢您发布此问题。 :)我正在等待此功能，但我不知道它何时发布。

Answer 2

它通过使用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视图底部的信息表上显示的网页的链接。 https://editorconfig.org/
  • file：这是glb格式的3D模型文件。
  • referrer：不确定这是为了什么，可能会进行跟踪。
  • share_text：这将设置您单击共享按钮时共享的文本。
  • sound：要播放的音频文件，格式为og​​g。
  • title：模型的名称，显示在底部的信息表标题中。

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

  • package=com.google.android.googlequicksearchbox;有趣。这将在Google应用而非ARCore应用中打开。 Google习惯于在Google应用中粘贴随机内容，我想这就是其中之一。
  • 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>