Table of Contents

WeChat ミニプログラム Mega プラグイン sample project をすばやく実行する

この記事では、WeChat ミニプログラム Mega プラグインの sample project をすばやく実行する方法を紹介します。以下を学びます。

  • sample project の development environment を構築し設定する。
  • sample の一部機能を実行する: Mega cloud localization を使用する。
  • マッピング結果のマスクファイルを表示する。

始める前に

ミニプログラム主体が enterprise entity であることを確認

重要

Mega mini program プラグインは enterprise entity の WeChat mini program のみをサポートします。 individual entity タイプの mini program は Mega mini program プラグインを使用できません。

mini program backend の Settings > Basic Information > Entity Information が enterprise legal person または individual industrial and commercial household と表示されていることを確認してください。

Mega 機能は mini program プラグイン形式で提供されるため、host environment として enterprise entity の WeChat mini program が必要です。

提供している sample project を実行するだけの場合でも、developer tool で debug と preview を行うには 自分の WeChat mini program AppID を設定する必要があります。

sample project をダウンロード

  1. development tool ダウンロードページに移動します。

  2. EasyAR Privacy Policy を確認した後、download をクリックします。

    Download Sample

  3. ダウンロード完了後、.zip パッケージをローカルで解凍します。

sample project を設定

  1. WeChat Mini Program Developer Tools にログインします。

  2. WeChat Mini Program Developer Tools を使用してサンプルプロジェクトをインポートします。

    • Developer Tools を開いた後、import ボタンをクリックし、ローカルで展開したディレクトリを選択します。

    Developer Tools をインポート

    ローカルディレクトリを選択

    • AppID が Mega ライセンス申請時に入力した AppID と一致していることを確認し、開発モードを Mini Program に設定して Create をクリックします。
    注記

    AppID が一致しないとライセンス検証に失敗します

    Developer Tools インポートオプション

  3. Mega ライセンスとクラウドサービスを設定

    miniprogram/components/sample-data/easyar-settings.ts を開き、準備手順のライセンスとサービス情報に従って該当フィールドを入力します。

    • Mega ライセンス
    /** 您的小程序 Mega 许可证 */
export const EasyARLicenseKey: string = "";
    Mega WeChat Mini Program ライセンスの取得方法

    EasyAR Developer Center で Mega WeChat Mini Program を選択します。

    ライセンス一覧

    使用する Mega WeChat Mini Program ライセンス が一覧に存在する必要があります。利用可能なライセンスがない場合は、現在のアカウントが Mega ローカライゼーションデータベース作成に使用したアカウントと同じか確認してください。

    Mini Program 名をクリックすると、その Mega ライセンスを取得できます。右側の Copy をクリックし、easyar-settings.ts に EasyARLicenseKey の値として貼り付け、関連付けられた AppID が自分の WeChat Mini Program AppID と完全に一致することを確認します。

    ライセンス詳細


    • クラウドサービス API Key および Seceret
    /** 您的云服务 API Key 及 Seceret */
export const EasyARAPIKey: string = "";
export const EasyARAPISecret: string = "";
    クラウドサービス API Key および Seceret の取得方法

    EasyAR Developer Center で Cloud Service API KEY を選択します。

    以前にクラウドサービス API Key と Seceret を作成済みの場合は、右側の Copy を順にクリックし、easyar-settings.ts に EasyARAPIKey と EasyARAPISecret の値として貼り付けます。

    クラウドサービス API KEY

    まだクラウドサービス API Key と Seceret を作成していない場合は、次の方法で作成します。

    EasyAR Developer Center で Cloud Service API KEY > Create API KEY を選択します。

    API KEY を作成

    API KEY 作成詳細

    アプリケーション名を入力し、使用するクラウドサービス Mega Block および/または Mega Landmark を選択して Confirm をクリックします。


    • クラウドサービス ServerAddress および AppID：
    /** 您的 Mega 云定位库的 ServerAddress 及 AppID */
export const MegaTrackerServerAddress: string = "";
export const MegaTrackerAppID: string = "";
    Mega クラウドローカライゼーションデータベースの ServerAddress と AppID の取得方法

    EasyAR Developer Center で Block Cloud Localization を選択し、その後自分の Mega クラウドローカライゼーションサービスグループ を選択します。

    クラウドローカライゼーションサービスグループを選択

    自分の Mega クラウドローカライゼーションデータベースを選択します。

    クラウドローカライゼーションデータベースを選択

    クラウドローカライゼーション情報を取得

    Key をクリックし、下部でクラウドローカライゼーションデータベースの AppID と Server Address を順に取得します。右側の Copy をクリックし、easyar-settings.ts に MegaTrackerAppID と MegaTrackerServerAddress の値として貼り付けます。

  4. マッピング結果のマスクファイルで素早く検証する

    Mask file download からマッピング結果の glb マスクファイルをダウンロードし、実空間の 3D 白モデルを表示して、annotation を作成せずに位置合わせを確認できます。

    注記

    この方法は mapping version 9.6 以降のマッピング結果にのみ適用されます。

    cloud localization database でテストする Block を見つけ、その行の Action 列で Mask file download をクリックします。実行時はこの Block に対応するシーンでテストしてください。

    マスクファイルダウンロード入口

    ポップアップで Low precision を選択し、対応する Download ボタンをクリックして、スマートフォン側の読み込みとレンダリング負荷を減らします。

    マスクファイルをダウンロード

    ダウンロードした glb ファイルを Mini Program プロジェクトの assets ディレクトリ、サンプルでは miniprogram/assets/ に置き、元の position、rotation、scale を維持します。

    sample project にはマスクファイルの読み込み、表示、解放のロジックが含まれています。例えば occlusion_mesh_sd.glb を miniprogram/assets/ に置き、sampleAssets.occlusionMesh.src にプロジェクトルートからの相対パスを入力します。

    src: "assets/occlusion_mesh_sd.glb",

    sampleAssets.occlusionMesh の assetId、type、options は変更しません。sample 実行後、ページで Mask file スイッチをオンにするとモデルを確認できます。

実機で sample を実行

  1. Mini Program developer tool 上部バーの real-device preview ボタンをクリックし、QR code をスキャンして開発用のスマートフォンに読み込みます。

    注意

    developer tool 上で AR 機能を持つ xr-frame コンポーネントを直接シミュレーション実行することはできません。 Simulated run

    QR code loading

    注記

    WeChat Developer Tools で sample project を初めて実行するとき、plugin permission をまだ取得していない場合、通常は plugin が未承認であることを示すポップアップが表示されます。WeChat Developer Tools から自動承認するか、plugin access processを参照してください。

  2. EasyAR Mega Samples をクリックして sample project の AR scene に入ります。

    Sample entry

    注記

    sample project の AR scene に入れない場合、現在の device が WeChat の視覚アルゴリズムコンポーネント VisionKit をサポートしていない可能性があります。詳細は device restrictions を参照してください。

  3. 画面に表示される EasyAR Session is initializing は、WeChat plane detection が初期化中であることを示します。

    ヒント

    十分な明るさの環境でテストし、広い単色の壁や単色の床を避けてください。

    地面または他の plane に向けて、一定速度で左右に振ると、この処理を速めることができます。

    Initialization

  4. 初期化が完了したら、スマートフォンを縦にして、カメラが通常の現実画面を捉えるようにします。Localization が成功すると、Debug 情報に Found が表示され、右下のステータスインジケーターが白から緑に変わります。

    Localization

  5. occlusion 効果を確認する

    前述のマスクファイル表示設定が完了し、モデルが読み込まれて対応する Block に正常に定位されると、カメラ画像上に 3D 白モデルが重ねて表示されます。

    dense occlusion

次のステップ

関連トピック