是什么?
Browser-AR是一个能够将网页渲染到现实中的AR浏览器。
普通用户使用Browser-AR APP扫描AR码或者二维码,就能体验到AR效果。
开发者根据Browser-AR的规则,生成AR码,就能将自己的Web应用轻松变为AR应用。
体验Browser-AR
第一步,点此下载APP(暂只支持安卓版)
第二步,打开APP后,扫描下方AR码,即可体验AR效果。
开发文档——如何快速创建自己的AR应用
以下部分介绍了如何快速搭建自己的AR应用。利用Browser-AR引擎,可以将Web页面渲染到现实场景中,快速实现AR产品,开发流程如下。
1. 开发web应用
Browser-AR的应用基于HTML,即普通网页。AR模型即html页面,开发者首先需要有Web产品(web开发工具可以参考此处),根据Browser-AR的渲染规则,开发者的Web产品需遵循以下规范。
1.1 页面视觉规范
Browser-AR引擎在渲染模型时,可以设置背景色,设置抠除某个颜色的部分,所以要求页面背景和内容部分的颜色需要区分。
1.2 应用交互规范
Browser-AR引擎将网页渲染到场景中后,目前不能实现点击、拖放等交互动作,建议产品以信息展示类功能为主。页面交互功能正在开发中。
2. 生成AR-URL
所有的Browser-AR应用需开发者自行托管,提供一个URL,然后根据以下步骤处理为AR-URL。
2.1链接生成规则
生成AR-URL即在页面原URL的基础上增加AR渲染参数,参数以“?”开头,以“&”组合,包含以下项,可以缺省。
举例说明:http://browser-ar.com?ar-w=3&ar-t=0.8
表示在场景中渲染browser-ar.com这个网页,设置了2个参数,”ar-w=3″表示网页宽度为AR码宽度的3倍,”ar-t=0.8″表示网页不透明度为80%,其他参数为缺省默认值。
各参数规则如下:
2.2页面宽度ar-w
描述:页面宽度与AR码的宽度比
取值范围:0到100
默认值:2
2.3页面宽度分辨率ar-px
描述:页面宽分辨率,单位为像素
取值范围:0到10000
默认值:1080
2.4 页面宽高比ar-whratio
描述:页面宽度与页面高度的比值
取值范围:0到100
默认值:1
2.5页面高度ar-h
描述:页面悬浮于AR码之上,此参数表示中心点距离AR码中心高度,单位厘米
取值范围:0到100
默认值:0(即页面紧贴AR码)
2.6页面上下角度ar-pitching
描述:页面与AR码所在平面,竖直方向的角度
取值范围:-90到90
默认值:0(页面与AR码平面在水平方向上平行)
2.7 页面左右角度ar-rolling
描述:页面与AR码所在平面,水平方向的角度
取值范围:-90到90
默认值:0(页面与AR码平面在竖直方向上平行)
2.8 不透明度ar-t
描述:页面不透明度
取值范围:0到1(0表示完全透明,1表示不透明)
默认值:1
2.9 页面朝向是否固定ar-toward
描述:页面是否朝向用户,等于0时,页面相对于AR码固定不动,等于1时,页面跟随用户变化角度,永远面向用户。
取值范围:0或1
默认值:0
2.10 页面背景色ar-bg
描述:表示网页背景色,以16进制颜色表示,识别到此参数时,将去除网页中的此颜色。
取值范围:#000000到#ffffff
默认值:未识别到此参数时将不去除背景
举例:某页面背景色为白色(#ffffff),想要去除页面所有白色部分,即增加ar-bg=#ffffff参数,页面中所有白色部分将变成透明(镂空效果),16进制颜色也RGB颜色转换参考此处
3. 生成Browser-AR码
3.1生成短链接
为了简化AR码复杂度,提高识别距离,最好将网页URL利用短连接工具生成短链。此步骤非必须。
3.2生成二维码
增加参数后的URL及其短链接称为AR-URL,使用第三方工具生成AR-URL的二维码图片。
3.3使用识别图案和二维码拼出AR-code
样例如下:
点此下载识别图案和样例图。
4. 完成
将生成的AR-code贴在任意处,使用Browser-AR APP扫码即可体验AR效果。