HMS Core电商解决方案之商品3D商品展示

小蚂蚁

传统电商商品展示采用图文结合的形式，文案介绍产品的相关参数，搭配精美图片去吸引客户眼球。但图文商品展示由于色差、尺寸不符等原因，会让消费者产生图片和实物不一致的疑虑，且消费者需要消耗大量精力阅读和比较后才能做出购买决定。
随着互联网电商平台的不断完善，短视频逐渐成为商品展示的主流形式。通过拍短视频的形式可以多方位展示产品，让消费者在短时间内可以了解产品的参数和优势，极大提高了消费者的购物速度。但短视频展示的劣势在于，展示时间短且很难和消费者进行互动。
3D技术的发展赋予了电商行业最新的商品展示方式，3D模型可以360°全方位细节展示商品，让消费者更直观了解商品，增强他们对产品的信心。消费者还能隔着屏幕与商品产生互动，通过单指拖动来实现360度查看商品、自由放大查看高清细节，从而提高下单机率。
然而，目前效果佳的3D建模技术因其较高的成本而使得让广大开发者望而却步。
1.技术门槛高：专业人员加上深度相机等专业设备。
2.时间成本高：专业人员手动完成模型的制作渲染和调整。完成一个简单物体的低精度模型，工作量以小时起步，而高精度模型耗时更长。
3.耗费高：单个商品的专业建模成本高，平均价格达到上千元，复杂模型则更贵。
HMS Core的3D建模服务，助力轻松建模。用户只需使用普通的RGB相机，通过拍摄物体的不同角度图像，便可实现物体的3D几何模型和纹理的自动化生成，如在电商实物展示的场景，您可以通过此能力自动生成想展示商品模型，用于3D展示，用户可360°随心放大或缩小商品，查看商品细节，为用户提供差异化的购买体验。
3D物体建模能力由端云协同完成，端侧负责采集RGB图像，通过环绕物体拍摄多张图像，从而获取物体的不同角度图像，拍摄完毕后上传至云端实现3D物体建模。云端建模的流程及关键技术包括目标检测分割、特征检测与匹配、稀疏点云计算、稠密点云计算以及纹理重建等模块。
效果展示

以面包为例，只需环绕面包拍摄多张图像，即可得到一个逼真的面包3D模型。那这个功能是如何实现的呢？以下是详细的开发步骤。
开发前准备

• 配置集成的SDK包
  

在应用的build.gradle文件中，dependencies内添加3D建模服务的SDK依赖

// 3D Modeling Kit SDK
implementation 'com.huawei.hms:modeling3d-object-reconstruct:1.0.0.300'

• 配置AndroidManifest.xml
  

打开main文件夹中的AndroidManifest.xml文件，可以根据场景和使用需要，配置读取和写入手机存储以及相机权限，在前添加

<!-- 往sdcard中写入数据的权限 -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<!-- 使用相机的权限 -->
<uses-permission android:name="android.permission.CAMERA" />

开发步骤

• 使用云侧服务的能力，需要使用“agconnect-services.json”里的api_key值，在应用初始化时通过api_key或者AccessToken来设置应用鉴权信息，AccessToken的优先级较高。两种方式均在应用启动时初始化设置一次即可，无需多次设置。
  

（1）通过setAccessToken方法设置AccessToken。

ReconstructApplication.getInstance().setAccessToken("your AccessToken");

（2）通过setApiKey方法设置api_key。当您在AppGallery Connect上注册应用时，会给您的应用分配api_key。

ReconstructApplication.getInstance().setApiKey("your api_key");

• 新建3D物体建模引擎并初始化，新建3D物体建模配置器。
  

// 新建3D物体建模引擎。
Modeling3dReconstructEngine modeling3dReconstructEngine = Modeling3dReconstructEngine.getInstance(context);
// 新建3D物体建模配置器。
Modeling3dReconstructSetting setting = new Modeling3dReconstructSetting.Factory()
  // 设置工作模式为图片模式。
  .setReconstructMode(Modeling3dReconstructConstants.ReconstructMode.PICTURE)
  // 设置贴图模式为普通模式或PBR模式。
  .setTextureMode(Modeling3dReconstructConstants.TextureMode.PBR)
  .create();

• 新建上传监听器回调，用于处理拍摄的物体图片上传结果。
  

private Modeling3dReconstructUploadListener uploadListener = new Modeling3dReconstructUploadListener() {
  @Override
  public void onUploadProgress(String taskId, double progress, Object ext) {
     // 上传进度。
  }
  @Override
  public void onResult(String taskId, Modeling3dReconstructUploadResult result, Object ext) {
     // 上传成功处理。
  }
  @Override
  public void onError(String taskId, int errorCode, String message) {
    // 上传失败处理。
  }
};

• 使用3D物体建模配置器初始化任务，并且给新建的3D物体建模引擎设置上传监听器，上传采集的图片数据。
  

// 使用3D物体建模配置器初始化任务（该接口需要在子线程中调用）。
Modeling3dReconstructInitResult modeling3dReconstructInitResult = modeling3dReconstructEngine.initTask(setting);
String taskId = modeling3dReconstructInitResult.getTaskId();
// 设置上传监听器。
modeling3dReconstructEngine.setReconstructUploadListener(uploadListener);
// 调用3D建模引擎的上传接口，上传采集的图片数据。
modeling3dReconstructEngine.uploadFile(taskId, filePath);

• 查询3D物体建模任务状态。
  

// 查询3D物体建模任务状态需要初始化任务处理类。
Modeling3dReconstructTaskUtils modeling3dReconstructTaskUtils = Modeling3dReconstructTaskUtils.getInstance(context);
// 调用查询接口获取3D物体建模任务状态（该接口需要在子线程中调用）。
Modeling3dReconstructQueryResult queryResult = modeling3dReconstructTaskUtils.queryTask(taskId);
// 获取建模任务状态。
int status = queryResult.getStatus();

• 新建侦听器回调，调用预览函数，预览3D模型
  

Modeling3dReconstructPreviewListener previewListener = new Modeling3dReconstructPreviewListener() {
  @Override
  public void onResult(String taskId, Object ext) {
    // 3D物体建模预览结果。
  }
  @Override
  public void onError(String taskId, int errorCode, String message) {
    // 预览错误回调函数。
  }
};
// 预览模型配置。
Modeling3dReconstructPreviewConfig config = new Modeling3dReconstructPreviewConfig.Factory().setTextureMode(Modeling3dReconstructConstants.TextureMode.PBR).create();
// 预览模型。
modeling3dReconstructEngine.previewModelWithConfig(taskId, context,config, previewListener);

• 新建下载监听器回调，用于处理3D物体建模模型文件的下载结果。
  

private Modeling3dReconstructDownloadListener modeling3dReconstructDownloadListener = new Modeling3dReconstructDownloadListener() {
  @Override
  public void onDownloadProgress(String taskId, double progress, Object ext) {
    // 下载进度。
  }  
  @Override
  public void onResult(String taskId, Modeling3dReconstructDownloadResult result, Object ext) {
    // 下载成功处理。
  }
  @Override
  public void onError(String taskId, int errorCode, String message) {
    // 下载失败处理。
  }
};

• 新建的下载配置项并将新建的下载监听器传入新建的3D物体建模引擎，下载重建成功的模型文件。
  

// 设置下载配置项。
Modeling3dReconstructDownloadConfig downloadConfig = new Modeling3dReconstructDownloadConfig.Factory()
  // 配置OBJ或glTF格式。
  .setModelFormat(Modeling3dReconstructConstants.ModelFormat.OBJ)
  // 配置普通或PBR模式。
  .setTextureMode(Modeling3dReconstructConstants.TextureMode.PBR)
  .create();
// 设置下载监听器。
modeling3dReconstructEngine.setReconstructDownloadListener(modeling3dReconstructDownloadListener);
// 调用3D物体建模引擎的下载接口，传入任务id，下载地址和下载配置项，下载模型文件。
modeling3dReconstructEngine.downloadModelWithConfig(taskId, savePath, downloadConfig);

完成以上步骤就可以在电商应用中实现3D建模能力，用手机就能快速给商品建立3D模型，感兴趣的开发者们可以马上动手体验！
除了商品3D建模和展示，HMS Core电商解决方案还提供了AR交互式购物能力，可实现商品试穿功能，为消费者创造虚拟与现实融合的购物体验，相关内容会在下一期进行详细讲解，敬请期待。
了解更多详情>>
访问华为开发者联盟官网
获取开发指导文档
华为移动服务开源仓库地址：GitHub、Gitee
关注我们，第一时间了解 HMS Core 最新技术资讯~