评论

叠幻AR SDK介绍

叠幻AR SDK在浏览器端(Web)和小程序端通过极致优化增强现实AR的核心算法,为企业客户提供高质量且沉沉浸感更高的AR场景服务。

SDK介绍:

叠幻AR SDK是北京叠幻三维科技有限公司拥有完全自主知识产权的增强现实AR核心算法软件套件。叠幻AR SDK在浏览器端(Web)和小程序端通过极致优化增强现实AR的核心算法,为企业客户提供高质量且沉浸感更高的AR场景服务。 其基本能力包括:AR图像识别与跟踪,平面检测与跟踪,陀螺仪IMU跟踪,空间定位与跟踪以及即时定位与建图(SLAM)等。

应用场景

广告营销: AR能够广泛赋能互动营销、数字营销等领域。 通过更具趣味性、科技感、沉浸式体验让消费者快速了解品牌,促进产品推广与销售。

展厅景点:叠幻AR提供空间定位与跟踪和SLAM技术,赋能商业街、展览会、博物馆,旅游景点等空间AR场景。为客户提供整套WebAR解决方案,助力客户完成拓新、推广和博关注等业务需求。

教育培训:AR赋能基础教育,让知识“跃然纸上”,更加生动活泼,具象化,为孩子插上想象力的翅膀。 AR赋能职业培训让危险、复杂的实验变得安全与高效,节省培训时间与费用,降低陈本。

AR其实在各行各业都有广阔的应用前景。

产品优势:

算法领先:拥有完全自主产权的核心算法,即时定位和地图(SLAM)引擎为移动浏览器上的实时AR进行了高度优化。

轻量化AR:无需下载APP,降低用户使用门槛,可以随时随地获得沉浸式体验。

部署灵活: 客户AR场景支持托管和私有化部署。可根据行业特性和业务要求采用不同的部署模式,所有的产品功能也可根据需求灵活拆分组合。


SDK内容

提供一个WebAR软件包:包括WebAR软件和数据文件(模型文件和配置文件)。

[root@VM-0-10-centos ~]# pwd;ls *.zip
/root
webar.release.yyyy.mm.dd.zip   //WebAR软件包yyyy.mm.dd是<>.<>.<>

服务器上解压软件包包括:

root@VM-0-10-centos ~]# pwd;ls -l webar
/root
total 32
drwxr-xr-x 4 root root 4096 Jan 18 14:02 bin //库函数目录
drwxr-xr-x 2 root root 4096 Jan 18 14:02 css //格式目录
drwxr-xr-x 2 root root 4096 Jan 18 14:02 font //字体目录
drwxr-xr-x 2 root root 4096 Jan 18 14:02 img //图片目录
drwxr-xr-x 4 root root 4096 Jan 18 14:11 js  //JavaScript目录,AR核心算法
-rw-r--r-- 1 root root 1483 Jan 18 14:16 main.8833e03c.html //主页面
drwxr-xr-x 3 root root 4096 Jan 18 14:12 model //模型目录
drwxr-xr-x 3 root root 4096 Jan 17 11:04 product //客户配置信息目录


Web二维码生成

Web二维码生成须遵守下列格式:

https://www.visional3d.com/webar/main.html?code=0217wG000v498N1fGJ000JKhdY07wG0F&product=Card2022

注:

1. 其中将www.visional3d.com 替换成“WebAR服务器”网址对应的URL地址。

2. 修改main.html文件,并在其中设置重定向跳转到实际的页面,即main.xxxxxxxx.html(其中xxxxxxxx为版本号,具体请参考AR软件包)。

  1. code和product后面的数值对应每一个AR场景。

code=0217wG000v498N1fGJ000JKhdY07wG0F

product=Card2022

每个AR场景code和product的值可是在main.xxxxxxx.html设置。请参考【main.xxxxxxx.html用户设置】章节。

提示:可通过一下两种方式任选其一进行实际页面的跳转:

1) 使用meta标签进入页面的跳转,此方法可以控制跳转的时间,以及设置自定义跳转的网址。

<meta http-equiv="refresh" content="0;url=https:// www.visional3d.com/webar/main.xxxxxxxx.html?code=0217wG000v498N1fGJ000JKhdY07wG0F&product=Card2022">

黄色标底的内容,替换成相应的AR场景。

2)利用js实现页面的跳转或定时跳转。

<script language="javascript" type="text/javascript">

// 以下方式直接跳转

window.location.href = 'https:// www.visional3d.com/webar/main.xxxxxxxx.html?code=0217wG000v498N1fGJ000JKhdY07wG0F&product=Card2022';

黄色标底的内容,替换成相应的AR场景。

// 五秒以后再跳转

setTimeout("javascript:location.href='https:// www.visional3d.com/webar/main.xxxxxxxx.html?code=0217wG000v498N1fGJ000JKhdY07wG0F&product=Card2022'", 5000);

</script>

黄色标底的内容,替换成相应的AR场景。


微信小程序二维码生成

微信小程序二维码生成须遵守下列格式:

https://www.visional3d.com/webar?code=0217wG000v498N1fGJ000JKhdY07wG0F&product=Card2022

注:

  1. 其中将www.visional3d.com 替换成“WebAR服务器”网址对应的URL地址。

微信“扫一扫”跳转需小程序后台进行相应设置,请参考【微信小程序后台配置】章节。

  1. 每个AR场景code和product的值可是在main.xxxxxxx.html设置。请参考【main.xxxxxxx.html用户设置】章节。


客户微信小程序后台配置

1. 登陆小程序后台

2. 进入:开发-》开发管理-》开发设置

3. 配置业务域名,

设置成部署的域名。

4. 找到【扫普通链接二维码打开小程序】

5. 点击【添加】按钮进行如下设置:

1 3 设置成自己部署的域名。

main.xxxxxxx.html用户设置

  1. 指定数据存储地址
//指定数据存放地址,包括:bin/model/product/img/font     
ARTool.DataUrl = '.';//默认存放在main.xxx.html同一目录下


  1. 注册动画监听函数
//注册AR展示指定时间后的返回事件     
ARTool.AddEventListener('show', function (e) {     
     alert('popup')     
  }, 10000);//10000为指定的时间,单位为ms


  1. AR定位“用户提示信息”
//指定用户提示信息     
ARTool.UserHint = {     
     text:['請以手機鏡頭對準(大三巴)圖案,', '光線太暗或者角度太偏可能導致AR無法識別'], //指定文本信息,可以多行     
     font:{name: "Verdana", size: "20", align: "center", color: "rgba(255, 255, 255, 100)"}, //指定显示所用字体     
     constrain:{delay:10000, tilt:30} //指定约束条件:delay-等待指定时间后提示,单位为ms;tilt-手机与平面夹角大于指定数值后提示,单位为度。     
};


  1. AR准备过程返回事件
//注册AR准备过程的返回事件     
ARTool.AddEventListener('progress', function (e) {     
     console.log('progress', e.percent)     
 });


  1. 设置AR场景的code和product
//指定项目标识码和项目名称,当同时在url中也指定时,以url中的优先
    ARTool.Code = '0217wG000v498N1fGJ000JKhdY07wG0F';
    ARTool.Product = 'Card2022';


  1. AR场景执行
/**
  * 初始化AR环境,第一个参数指定显示窗口(div)的id
  */
ARTool.Run('webgl-window', false, function(info){ 
   //初始化成功
});


  1. AR场景销毁
/**
  * 销毁AR环境
  */
ARTool.Dispose();


微信小程序端调用示例

  1. 在小程序里创建新的page,命名为webar。

2. 修改webar.js

/**
  * 生命周期函数--监听页面加载
  */
 onLoad: function () {
   this.setData({host: 'www.visional3d.com', hashcode: '8833e03c', code: '0217wG000v498N1fGJ000JKhdY07wG0F', product: 'Card2022'});
   this.setData({showWebAR: true});
 }


注:host,code 与 product根据AR场景相关内容修改

3. 修改webar.wxml


AR初始化报错接口

AR初始化过程中出现任何错误(Failure)信息,客户可以根据AddEventListener接口自定义用户事件或处理流程。

如:摄像头未授权使用、摄像头不可用、设备不兼容、模型不存在、未知任务、未定义UUID、登陆失败和时间超时等。

//注册AR初始化失败的返回事件
 ARTool.AddEventListener('fail', function (e) {
     console.warn('fail:', e.status);
     switch (e.status) {
         case 'disable'://camera
         case 'unavailable'://camera
         if (e.wx) {
             e.wx.miniProgram.navigateTo({
                 url:'fail' + '?status=' + e.status
             });
         }
         else {
             alert('can\'t open camera!');
         }
         break;
         case 'unsupport'://device
         break;
         case 'unexist'://model
         break;
         case 'unknown'://taskid
         break;
         case 'undefine'://uuid
         break;
         case 'timeout'://code
         break;
         case 'failure'://login
         break;
     }  
 }); 


场景案例:

1) Omega虎年贺卡AR营销方案:


2)完美展厅“大鱼海棠线下体验:


最后一次编辑于  2022-03-10  
点赞 3
收藏
评论
登录 后发表内容