商品3D展示來啦，HMS Core3D建模服務助力電商發展

HMSCore發表於2022-04-24
3D

傳統電商商品展示採用圖文結合的形式，文案介紹產品的相關引數，搭配精美圖片去吸引客戶眼球。但圖文商品展示由於色差、尺寸不符等原因，會讓消費者產生圖片和實物不一致的疑慮，且消費者需要消耗大量精力閱讀和比較後才能做出購買決定。

隨著網際網路電商平臺的不斷完善，短視訊逐漸成為商品展示的主流形式。通過拍短視訊的形式可以多方位展示產品，讓消費者在短時間內可以瞭解產品的引數和優勢，極大提高了消費者的購物速度。但短視訊展示的劣勢在於，展示時間短且很難和消費者進行互動。

3D技術的發展賦予了電商行業最新的商品展示方式，3D模型可以360°全方位細節展示商品，讓消費者更直觀瞭解商品，增強他們對產品的信心。消費者還能隔著螢幕與商品產生互動，通過單指拖動來實現360度檢視商品、自由放大檢視高清細節，從而提高下單機率。

然而，目前效果佳的3D建模技術因其較高的成本而使得讓廣大開發者望而卻步。

1.技術門檻高：專業人員加上深度相機等專業裝置。

2.時間成本高：專業人員手動完成模型的製作渲染和調整。完成一個簡單物體的低精度模型，工作量以小時起步，而高精度模型耗時更長。

3.耗費高：單個商品的專業建模成本高，平均價格達到上千元，複雜模型則更貴。

HMS Core的3D建模服務，助力輕鬆建模。使用者只需使用普通的RGB相機，通過拍攝物體的不同角度影像，便可實現物體的3D幾何模型和紋理的自動化生成，如在電商實物展示的場景，您可以通過此能力自動生成想展示商品模型，用於3D展示，使用者可360°隨心放大或縮小商品，檢視商品細節，為使用者提供差異化的購買體驗。

3D物體建模能力由端雲協同完成，端側負責採集RGB影像，通過環繞物體拍攝多張影像，從而獲取物體的不同角度影像，拍攝完畢後上傳至雲端實現3D物體建模。雲端建模的流程及關鍵技術包括目標檢測分割、特徵檢測與匹配、稀疏點雲端計算、稠密點雲端計算以及紋理重建等模組。

效果展示

以麵包為例，只需環繞麵包拍攝多張影像，即可得到一個逼真的麵包3D模型。那這個功能是如何實現的呢？以下是詳細的開發步驟。

開發前準備

  1. 配置整合的SDK包

在應用的build.gradle檔案中，dependencies內新增3D建模服務的SDK依賴

// 3D Modeling Kit SDK
implementation 'com.huawei.hms:modeling3d-object-reconstruct:1.0.0.300'
  1. 配置AndroidManifest.xml

開啟main資料夾中的AndroidManifest.xml檔案，可以根據場景和使用需要，配置讀取和寫入手機儲存以及相機許可權，在<application>前新增

<!-- 往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" />

開發步驟

  1. 使用雲側服務的能力，需要使用“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");
  1. 新建3D物體建模引擎並初始化，新建3D物體建模配置器。
// 新建3D物體建模引擎。
Modeling3dReconstructEngine modeling3dReconstructEngine = Modeling3dReconstructEngine.getInstance(context);
// 新建3D物體建模配置器。
Modeling3dReconstructSetting setting = new Modeling3dReconstructSetting.Factory()
    // 設定工作模式為圖片模式。
    .setReconstructMode(Modeling3dReconstructConstants.ReconstructMode.PICTURE)
    // 設定貼圖模式為普通模式或PBR模式。
    .setTextureMode(Modeling3dReconstructConstants.TextureMode.PBR)
    .create();
  1. 新建上傳監聽器回撥，用於處理拍攝的物體圖片上傳結果。
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) {
        // 上傳失敗處理。
    }
};
  1. 使用3D物體建模配置器初始化任務，並且給新建的3D物體建模引擎設定上傳監聽器，上傳採集的圖片資料。
// 使用3D物體建模配置器初始化任務（該介面需要在子執行緒中呼叫）。
Modeling3dReconstructInitResult modeling3dReconstructInitResult = modeling3dReconstructEngine.initTask(setting);
String taskId = modeling3dReconstructInitResult.getTaskId();
// 設定上傳監聽器。
modeling3dReconstructEngine.setReconstructUploadListener(uploadListener);
// 呼叫3D建模引擎的上傳介面，上傳採集的圖片資料。
modeling3dReconstructEngine.uploadFile(taskId, filePath);
  1. 查詢3D物體建模任務狀態。
// 查詢3D物體建模任務狀態需要初始化任務處理類。
Modeling3dReconstructTaskUtils modeling3dReconstructTaskUtils = Modeling3dReconstructTaskUtils.getInstance(context);
// 呼叫查詢介面獲取3D物體建模任務狀態（該介面需要在子執行緒中呼叫）。
Modeling3dReconstructQueryResult queryResult = modeling3dReconstructTaskUtils.queryTask(taskId);
// 獲取建模任務狀態。
int status = queryResult.getStatus();
  1. 新建偵聽器回撥，呼叫預覽函式，預覽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);
  1. 新建下載監聽器回撥，用於處理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) {
        // 下載失敗處理。
    }
};
  1. 新建的下載配置項並將新建的下載監聽器傳入新建的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 最新技術資訊~

相關文章