写点什么

增强现实 (AR) 技术在企业管理软件中的一个实际创新案例

作者:Jerry Wang
  • 2022 年 5 月 13 日
  • 本文字数:3630 字

    阅读完需:约 12 分钟

增强现实(AR)技术在企业管理软件中的一个实际创新案例

本文前半部分我想首先介绍这个创新案例的用户故事,后半部分简单描述技术实现。


用户故事(User Story)


近些年来,诸如人工智能和 AR(增强现实)等技术迅猛发展,如何利用好这些先进技术,帮助企业实现数字化转型,是一个值得思考的问题。


某足球制造商想要使用一种高科技的新型材料来制造 2018 年世界杯使用的足球。这家足球制造商的采购人员找到了一家名叫科创材料的企业,该企业是世界上最先进的足球材料供应商之一。



科创材料使用了 SAP Sales Cloud 系统(SAP Cloud for Customer 的 Sales 模块),希望以此为基础,结合 AR,人工智能等前沿技术,打造出一个新的销售工具。


这个新的销售工具如何使用呢?我们来看一个具体的使用场景。


制造商的采购人员在科创材料的微信公众号上发起会话进行材料咨询。



根据制造商的采购员提出的要求,科创材料的人工智能助手推荐了几款合适的材料。


比如采购人员希望用一款高科技的原材料生产足球:



那么科创材料的数字助手会推送一个公众号图文消息:



采购人员点击之后,会看到科创材料的数字助手从 SAP Sales Cloud 系统后台的产品主数据中进行搜索,返回匹配采购人员要求的 6 款高科技原材料:



为了让采购人员更直观地感受每种新型材料的外观,质地和性能等参数,除了常规的文字和图片介绍外,该销售平台还提供了根据这些原材料制作的成品 3D 模型展示:



以及供客户在移动设备上能实际操作的 AR 页面,比如体验通过不同材质的皮革制成的足球,在不同场景下的弹力,滚动距离,滚动轨迹的差异等等。


点击上图的 Test Material 按钮进入 AR 页面进行体验,会询问用户是否授权访问手机摄像头。允许之后,将手机摄像头对准事先准备好的 marker(增强现实的实现技术之一,典型的载体是打印了特定图像的一张纸),即可在手机摄像头对准的现实区域内看到一个虚拟的足球。



此时采购人员就能在手机上通过手机触动这个虚拟足球的方式,来模拟现实中的踢球动作,以此来体验不同材质制成的足球的各项参数。比如下图显示的是触球后足球的滚动距离和空中运行轨迹。



在微信公众号页面里可以做一些简单的配置,选择其中几种材料,以对比的方式显示它们的参数差异。



假如采购人员通过初步筛选,发现其中几款材料比较合适,然而对于最后购买哪款犹豫不决,于是该采购人员把经过初步筛选的几款材料通过微信分享给其他同事,让这些同事帮忙甄别,通过投票选出最合适的材料。


采购人员点击 Create Poll 按钮发起投票请求:



选中第一,第三和第四款之后,通过微信分享给其他同事所在的微信群里:



微信群里的其他同事打开这个分享页面后,点击 Vote Materials 开始投票,同时可以留言讨论并查看投票结果。




等同事们都投完票后,科创材料数字助手自动将投票结果告知采购人员。经过微信群里讨论,大家一致认为应该购买得票数最高的那款原材料。于是采购人员告诉数字助手,决定买 2 吨 。



数字助手通过 Sales Cloud 的报价单模型,生成了一张包含报价的 PDF 推送给采购人员:



这就是足球制造商的采购人员使用这个创新解决方案的完整流程。



我们希望通过这个简单的创新案例,展示出 SAP C/4HANA 和当今一些新技术相结合,从而帮助企业实现数字化转型,成就智慧企业的可能性。


当然,这里选择足球的原材料和成品只是作为一个例子帮助大家更直接地感受到人工智能和增强现实给企业流程管理带来的便利和改善,大家可以自行把足球脑补成其他的物品,比如机械臂,汽车,家电等等。


这个创建案例的亮点:


(1) 集成 SAP Sales Cloud,引导客户完成购买之旅。


(2) 利用微信和 Recast.AI 与客户交互,实现销售过程自动化。


(3) 利用 AR 技术呈现 SAP 系统内不同产品主数据对应的原材料差异,方便专业人士的验证和体验,加速购买决策流程。



以上介绍了这个创新案例的应用场景,下面我们来聊聊技术实现。从开发层面说,该创新案例可分为下图这几个模块:



(1) 微信公众号网页端。使得用户可以在微信应用里查看原材料的详细信息,和基于每种原材料制作的成品的 3D 模型,并提供分享页面,创建投票页面等功能。


(2) AR 页面,使用 AR 的方式,展示各种原材料制成的足球。


(3) Proxy Service,又称消息服务器,中间服务器,用于链接微信页面和 SAP C4C 后台系统,并结合 Recast.AI 提供智能客服。


(4) C4C Backend service(后台服务)增量开发,根据微信用户输入的产品关键字(比如"高科技材料",搜索系统的产品主数据并返回匹配内容。


限于文章篇幅,本文不会深入到代码层面介绍这四个模块的实现,只是简要叙述其原理。对细节感兴趣的朋友欢迎留言私聊。


微信公众号网页端


网页端就是指前面提过的原材料显示页面,包括 3D 模型显示页面,投票页面等。我用的框架是 Angular,开发了一个单页面应用,它有一个外壳页面 index.html,在 app.js 中创建了 AngularJS 的 module。在 config.js 中使用 Angular 的 config 配置页面以及和页面关联得控制器,配置路由规则,配置渲染和加载规则。这些没什么可说的,毕竟我司和国内的 Angular 高手数不胜数。



其中 3D 模型的显示我用的是 threejs 这个基于 webGL 的 JavaScript 框架。基于 webGL 的开源框架,需要支持 webGL 的浏览器,通过这个框架将 3D 模型,主要是每种足球原材料的 obj 文件,mtl 文件和各种纹理图片渲染成最后在微信里看到的不断旋转的 3D 足球。


这些 3D 模型文件在我的电脑上长这个样:



  • obj 文件: 一种开放的几何定义文件格式,它仅表现 3D 几何体,即顶点的位置,以顶点列表的方式定义每个多边形的顶点,法向量和面的 UV 坐标,以及纹理顶点。顶点以逆时针存储,不必显式声明法向量。其中 obj3.0 格式支持多边形(Polygon),直线(Lines),表面(Surfaces),和自由形态曲线(Free-form Curves)。直线和多角形通过它们的点来描述,曲线和表面则根据于它们的控制点和依附于曲线类型的额外信息来定义。这些信息支持规则和不规则的曲线,包括那些基于贝塞尔 (Bezier)曲线,B 样条(B-spline),基数(Cardinal/Catmull-Rom 样条),和泰勒方程(Taylor equations)的曲线。


obj 文件的一个例子:



  • mtl 文件(Material Library File): 材质库文件,描述的是物体的材质信息,采用 ASCII 存储,任何文本编辑器可以将其打开和编辑。一个 mtl 文件可以包含一个或多个材质定义,对于每个材质都有其颜色,纹理和反射贴图的描述,应用于物体的表面和顶点。


  • 用作 3D 物体表面的纹理的各种 png 图片:这个很好理解。


比如下图是某种材质制成的成品足球:



那么它对应的纹理文件是这样的:



我的任务就是使用 threejs 的 API 把这些模型 merge 在一起,生成最后带有 3D 视觉效果的 JavaScript 对象。为了避免让本文成为 threejs 编程教程,我不展开描述,感兴趣的朋友请查询 threejs 官网:


https://threejs.org


AR 页面


该页面也是基于另一个增强现实的 JavaScript 框架 AR.js 开发的,从 github 上的 Star 数目就能看出其受欢迎的程度。


https://github.com/jeromeetienne/AR.js/



这个页面的具体编码工作是 SAP 成都研究院数字创新空间在德国的兄弟团队完成的,这里不做更多介绍。


微信消息服务器


开发一个服务端应用,部署在 SAP 云平台上(其他云平台也行),然后把服务的 url 配置到微信公众号的开发者中心中去即可。



具体开发方式我之前的 C4C 同事张航和大卫哥已经做过详细介绍,这里不再重复:



而基于 Recast.AI 的智能客服实现,我的文章 使用Recast.AI创建具有人工智能的聊天机器人 里详细介绍过使用方法。


C4C 后台服务开发


根据用户微信输入的关键字,去 C4C 系统查找匹配的产品主数据。


我们前面视频里显示的 6 款原材料,在 C4C 系统主数据配置如下:



而关于 PDF 文件在 SAP ABAP Netweaver 系统的生成,笔者写过很多文章:


(1) Convert word document into PDF via Adobe Livecycle Enterprise service


https://blogs.sap.com/2013/11/14/convert-word-document-into-pdf-via-adobe-livecycle-enterprise-service/


(2) Another way to preview PDF in CRM web client UI with little coding


https://blogs.sap.com/2013/12/17/another-way-to-preview-pdf-in-crm-web-client-ui-with-little-coding/


(3) Create Webservice enabled Adobe PDF attachment in CRM Application


https://blogs.sap.com/2014/05/16/create-webservice-enabled-adobe-pdf-attachment-in-crm-application/


(4) Export WebClient UI table to PDF


https://blogs.sap.com/2017/05/03/export-webclient-ui-table-to-pdf/


(5) How to render PDF which displays picture from the image attachment of your custom BO


https://blogs.sap.com/2017/05/03/export-webclient-ui-table-to-pdf/


当然,选择 SAP 系统外的第三方 PDF 生成方案也是可以的,生成 PDF 后,将文件的 url 推送到微信上,用户点击 url 即可在微信里打开 PDF 查看内容。


这个 C/4HANA 同人工智能与增强现实技术结合的创新案例就介绍到这,感谢阅读。


总结

本文首先介绍了增强现实(AR)技术在企业管理软件中一个实际的应用场景,这个场景来源于笔者工作中参与的一个项目。接着详细阐述了该技术的前后端实现的架构和技术细节,希望对有类似需求的同行有借鉴意义。

发布于: 8 小时前阅读数: 24
用户头像

Jerry Wang

关注

🏆InfoQ写作平台-签约作者🏆 2017.12.03 加入

SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使。2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。工作中使用 ABAP, Java, JavaScript 和 TypeScript 进行开发。

评论

发布
暂无评论
增强现实(AR)技术在企业管理软件中的一个实际创新案例_AR_Jerry Wang_InfoQ写作社区