是什么?

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效果。