1. 程式人生 > 實用技巧 >如何用華為Scene Kit 8步實現AR放置應用

如何用華為Scene Kit 8步實現AR放置應用

前言

AR放置類APP已經廣泛應用於各行各業中,如家居行業使用者可以用AR體驗傢俱擺放效果;在零售行業消費者可以用AR提前試穿鞋服;在教育行業學生可以利用AR探索物體的虛擬3D模型,瞭解各種物體的內部構造。

那麼如何才能快速開發一款AR放置APP呢?整合HUAWEI Scene Kit, 只需要8步就能實現。ARView是Scene Kit 中面向AR的場景化API,通過整合AR Engine的平面檢測能力,結合圖形引擎服務自身渲染引擎的圖形能力,為開發者提供了在一般AR場景中載入、渲染3D素材的能力。

ARView功能簡介

  1. AR場景中載入、渲染3D素材。

  2. 可開關的平面輔助選取功能,螢幕中支援顯示一個白色平面點陣的方式,輔助選取平面。

  3. 在平面放置素材後,可點選選取該素材物體。當物體處於紅色被選取狀態後,可進行移動、縮放、旋轉。

AR放置應用開發

在使用ARView之前需要在Android工程中整合Scene Kit SDK,操作可以參見整合Scene Kit SDK

ARView繼承自Android GLSurfaceView,並重寫了相關生命週期方法,方便開發者呼叫。總共只需要8步即可實現完整的ARView應用。

Step1. 建立一個ARViewActivity,使其繼承自Activity。新增一個Button按鈕用於載入素材

public class ARViewActivity extends Activity {
    private ARView mARView;
    private Button mButton;
    private boolean isLoadResource = false;
}

Step2. 將ARView新增到Layout佈局中

<com.huawei.hms.scene.sdk.ARView
    android:id="@+id/ar_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</com.huawei.hms.scene.sdk.ARView>

【說明】ARView為保證效果暫不支援轉屏與分屏操作,需要在Android Manifest檔案中進行配置:

android:screenOrientation="portrait"
android:resizeableActivity="false"

Step3. 重寫onCreate方法,並獲取ARView

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_ar_view);
    mARView = findViewById(R.id.ar_view);
    mButton = findViewById(R.id.button);
}

Step4. 可在onCreate方法中使用一個Switch按鈕控制輔助顯示平面是否開啟。

Switch mSwitch = findViewById(R.id.show_plane_view);
mSwitch.setChecked(true);
mSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        mARView.enablePlaneDisplay(isChecked);
    }
});

【說明】Switch按鈕使用前請在Layout中新增。

<Switch
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/show_plane_view"
    android:layout_alignParentTop="true"
    android:layout_marginTop="15dp"
    android:layout_alignParentEnd="true"
    android:layout_marginEnd ="15dp"
    android:layout_gravity="end"
    android:text="@string/show_plane"
    android:theme="@style/AppTheme"
    tools:ignore="RelativeOverlap" />

Step5. 增加按鈕回撥方法。首次點選按鈕載入素材,再次點選按鈕清除素材。

public void onBtnClearResourceClicked(View view) {
    if (!isLoadResource) {
        mARView.loadAsset("ARView/scene.gltf");
        isLoadResource = true;
        mButton.setText(R.string.btn_text_clear_resource);
    } else {
        mARView.clearResource();
        mARView.loadAsset("");
        isLoadResource = false;
        mButton.setText(R.string.btn_text_load);
    }
}

【說明】onBtnSceneKitDemoClicked方法需在Button的佈局屬性onClick中註冊。

Step6. 重寫onPause方法,並呼叫ARView的onPause方法。

**@Override
protected void onPause() {
    super.onPause();
    mARView.onPause();
}**

Step7. 重寫onResume方法,並呼叫ARView的onResume方法。

@Override
protected void onResume() {
    super.onResume();
    mARView.onResume();
}

Step8. 重寫onDestroy方法,並呼叫ARView的destroy方法。

@Override
protected void onDestroy() {
    super.onDestroy();
    mARView.destroy();
}

Step9. 載入完素材後,可通過setInitialPose設定3D素材初始的縮放係數與旋轉角度。【可選】

float[] scale = new float[] { 0.1f, 0.1f, 0.1f };
float[] rotation = new float[] { 0.707f, 0.0f, -0.707f, 0.0f };
mARView.setInitialPose(scale, rotation);

效果展示

按照以上8個步驟呼叫HUAWEI Scene Kit ARView介面,我們即可實現一個簡單的AR放置應用。

如果你對實現方式感興趣,可以檢視Github原始碼:https://github.com/HMS-Core/hms-scene-demo

基於Scene Kit ARView的能力不僅僅可以用來開發AR放置應用,還可以幫助開發者實現很多有趣的功能, 例如:AR遊戲、虛擬展廳、AR導航等。

欲瞭解更多詳情,請參閱:

華為Scene Kit官網:https://developer.huawei.com/consumer/cn/hms/huawei-scenekit/

獲取開發指導文件:https://developer.huawei.com/consumer/cn/doc/development/HMSCore-Guides/dev-process-0000001054326746

參與開發者討論請到Reddit社群:https://www.reddit.com/r/HMSCore/

下載demo和示例程式碼請到Github:https://github.com/HMS-Core/hms-scene-demo

解決整合問題請到Stack Overflow:https://stackoverflow.com/questions/tagged/huawei-mobile-services?tab=Newest


原文連結:https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202382479977390326&fid=18
作者:胡椒