Google 如何从浏览器 link 启动 AR Animals ARCore 应用程序?
How does Google launch the AR Animals ARCore app from a browser link?
TL;DR;
Google 的新 AR animals appear as if they are AR on the web (like AR.js or 8thWall), but are actually native ARCore applications. The sleight of hand is that a link in a browser (actually a button with a very obfuscated event handler chain) launches the ARCore app itself 没有任何提示让用户安装任何东西。 Google 是怎么做到的?我也想做
详情
最近 Google introduced a search feature that allows users to view animals in AR 通过单击搜索信息卡片中的 link。
这是真正的平面感应、SLAM跟踪AR,不需要标记。我自己查看示例 phone(Pixel 2 运行 Android 9),位置和角度保真度令人印象深刻。我可以四处移动 phone,四处走动,虎脚(例如)固定在几英寸内。同样,AR 对象具有出色的视觉稳定性,避免了困扰我见过的大多数基于标记的 AR.js 应用程序的抖动,或者我在 8th Wall 的 non-marker examples.[=18 中看到的平庸的对象锚定=]
作为一名致力于通过网络交付 AR 的开发人员,我很好奇他们是如何获得如此高质量的结果的。他们是否拥有不与 THREE.js / ARKit / AR.js 开源项目共享的更高级的专有技术?
没有。通过从我的笔记本电脑上使用 USB 远程检查我的 phone 以及一些间接线索来调试老虎示例,我得出的结论是它们看起来非常好,因为它们不是网络 AR,而是使用 ARCore 的原生 AR。 Google 以某种方式导致用户的 phone 加载本机 ARCore 应用程序(系统日志显示 ARCore 本身正在作为应用程序启动)而没有任何安装提示。尝试切换到另一个应用程序会导致 AR 应用程序自动关闭,从而难以对其进行调试或检查。
Google 自己的 ARCore 文档通常暗示您需要将应用程序发布到 Play 商店才能真正将支持 ARCore 的软件交到用户手中。那么,有人知道 Google 是如何做他们在这里做的事情的吗?
所有图片均为本人原创
信息卡link:
提示向ARCore授予应用权限:
刚用过ARCore:
https://developers.google.com/ar/develop/java/scene-viewer
Scene Viewer is an immersive viewer that enables AR experiences from your website. It lets Android mobile device users easily place, view, and interact with web-hosted 3D models in their environment.
To do this, all a user needs is an Android device that has ARCore 1.9 or later. Most Android browsers are supported, and no programmatic integration with a browser is necessary -- only properly-formatted links on a web page.
<model-viewer ar alt="A 3D model of an astronaut." src="Astronaut.gltf"></model-viewer>
感谢您提出这个问题。 :) 我一直在等待这个功能,但我不知道它什么时候出来。
它通过使用 Android 的意图 URLs.
来工作
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 意图 URL
arvr.google.com/scene-viewer/1.2?[parameters]
这是将传递给 ARCore 应用程序的 URL。参数适用于如下工作:
#Intent;
好了,现在我们要告诉 Android 在何处打开 link.
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>
TL;DR;
Google 的新 AR animals appear as if they are AR on the web (like AR.js or 8thWall), but are actually native ARCore applications. The sleight of hand is that a link in a browser (actually a button with a very obfuscated event handler chain) launches the ARCore app itself 没有任何提示让用户安装任何东西。 Google 是怎么做到的?我也想做
详情
最近 Google introduced a search feature that allows users to view animals in AR 通过单击搜索信息卡片中的 link。
这是真正的平面感应、SLAM跟踪AR,不需要标记。我自己查看示例 phone(Pixel 2 运行 Android 9),位置和角度保真度令人印象深刻。我可以四处移动 phone,四处走动,虎脚(例如)固定在几英寸内。同样,AR 对象具有出色的视觉稳定性,避免了困扰我见过的大多数基于标记的 AR.js 应用程序的抖动,或者我在 8th Wall 的 non-marker examples.[=18 中看到的平庸的对象锚定=]
作为一名致力于通过网络交付 AR 的开发人员,我很好奇他们是如何获得如此高质量的结果的。他们是否拥有不与 THREE.js / ARKit / AR.js 开源项目共享的更高级的专有技术?
没有。通过从我的笔记本电脑上使用 USB 远程检查我的 phone 以及一些间接线索来调试老虎示例,我得出的结论是它们看起来非常好,因为它们不是网络 AR,而是使用 ARCore 的原生 AR。 Google 以某种方式导致用户的 phone 加载本机 ARCore 应用程序(系统日志显示 ARCore 本身正在作为应用程序启动)而没有任何安装提示。尝试切换到另一个应用程序会导致 AR 应用程序自动关闭,从而难以对其进行调试或检查。
Google 自己的 ARCore 文档通常暗示您需要将应用程序发布到 Play 商店才能真正将支持 ARCore 的软件交到用户手中。那么,有人知道 Google 是如何做他们在这里做的事情的吗?
所有图片均为本人原创
信息卡link:
提示向ARCore授予应用权限:
刚用过ARCore:
https://developers.google.com/ar/develop/java/scene-viewer
Scene Viewer is an immersive viewer that enables AR experiences from your website. It lets Android mobile device users easily place, view, and interact with web-hosted 3D models in their environment.
To do this, all a user needs is an Android device that has ARCore 1.9 or later. Most Android browsers are supported, and no programmatic integration with a browser is necessary -- only properly-formatted links on a web page.
<model-viewer ar alt="A 3D model of an astronaut." src="Astronaut.gltf"></model-viewer>
感谢您提出这个问题。 :) 我一直在等待这个功能,但我不知道它什么时候出来。
它通过使用 Android 的意图 URLs.
来工作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 意图 URLarvr.google.com/scene-viewer/1.2?[parameters]
这是将传递给 ARCore 应用程序的 URL。参数适用于如下工作:#Intent;
好了,现在我们要告诉 Android 在何处打开 link.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>