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

作者：Jerry Wang

2022 年 5 月 13 日
本文字数：3630 字
阅读完需：约 12 分钟

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

用户故事(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 文件的一个例子：