Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@hamanuman(numa hama)

PLATAUEで出力したモデルをWebAR化する

Last updated at Posted at 2023-10-17

やりたいこと

  • PLATAUE SDKでUnityに出力したモデルをWebAR化する
  • マーカーを紙に印刷して、その上のモデルをWebARとして表示することで、実際の都市モデルを共有して街づくりワークショップなどに使えると思う
    (おそらくHololab様とかがやっているワークショップとかはHolo2とかのデバイスでそのようになことをやっているとおもう)
  • WebARの作成とデプロイは(zapworks)[https://zap.works/] * を使う
    • SaaSでWebARが作成できるサイト。こちらのサイト単独でもWebARが作成できるが、今回はSDKを利用してUnityからプロジェクトを作成する

参考資料

zapworksのSDK利用、デプロイはAR Fukuoka 様の下記資料を利用させていただいた
https://speakerdeck.com/takashiyoshinaga/unitytozapworksdeshi-meyouwebarkai-fa

環境

OS: Windows 11
Unity Version: 2019.4.40f1 LTS
(PALATAUE側のプロジェクトは2021.3.30f1)

手順

Unityプロジェクトの作成

  • UnityHubからプロジェクトを作成
    image.png
  • Unity 2019.4.x を選択する**
    ** 記事執筆時点でUnity 2019.4.xはUnityHubからインストールができないため、(こちら)[https://unity.com/ja/releases/editor/archive]にアクセスしてダウンロードを行う必要がある image.png
  • 3D Coreを選択して、プロジェクトを作成する
    image.png

zapworks アカウント作成とプロジェクト作成、SDKの入手

  • (zapworks)[https://zap.works/]にSignUpし、アカウントを作成する***
    *** Google/MS/SlackのアカウントでSSO可能
    image.png
  • アカウントの画面から + アイコンをクリックし、New Projekctの作成を行う
    image.png
  • UniversalARを選択する
    image.png
  • Unityを選択する
    image.png
  • こんな感じのprojectができるので、プロジェクト名を編集する(今回はARTestとした)
    image.png
  • 画面上部のInstall/Download をクリックする
    image.png
  • 表示されたgithubのURLをクリップボードにコピーする
    image.png

SDKのUnityプロジェクトへの導入

  • Unityプロジェクトの Window > Package Mnager を選択する
    image.png
  • InProject を選択後、 + をクリックし、Add package from git をクリックする
  • 先ほどコピーしたSDKのURLを入力して、add をクリックする
    image.png
  • SDKのインストールが進み、Zapperが表示されたらOK
    image.png

プロジェクトの実装

やること

  1. ARプロジェクト用にZapper Cameraを作成
  2. Markerとなる画像を取り込み、zptオブジェクトを生成してImage Tracking Target に設定する
  3. Image Tracking Targetを認識した場合、そのTargetの上に表示するオブジェクトを設定する

手順

  • Main Cameraを削除する
    image.png
  • Zapper > Camera > Rear Facing Camera を追加
    image.png
  • Zapper CameraがHierarchyに追加されていればOK
    image.png
  • Zapper > Image Tracking Target を選択
    image.png
  • Image Tracking Target がHierarchyに追加されていればOK
    image.png
  • Zapper > Editor > Open Image Trainer を選択
    image.png
  • Source Image path に画像ファイルを指定して、Startを選択する
    必要であればhttp://arfukuoka.lolipop.jp/zapworks/sample.zip を展開いただくとSample画像がある
    image.png
  • しばらく待つとZapper Image Tracking Target のTarget プロパティに先ほど取り込んだzptファイルが選択可能になるので、選択する
    image.png
    image.png
  • PLATAUEプロジェクトで生成したオブジェクトを取り込む
  • Assetで右クリックを行い、Create > Folder を押下し、PLATAUEというフォルダを作る
    image.png
    image.png
  • 新規作成したフォルダを右クリックし、Import New Asset を選択し、前回 出力したすべてのファイルを選択する
    image.png
    image.png
  • Import したすべてのオブジェクトをZapper Image Tracking Targetの子要素になるようにドラッグ&ドロップする
    image.png
  • オブジェクトがでかすぎるので、すべてのオブジェクトを選択した状態でサイズを調整する
  • 今回はRotation をY:-180、Scaleをすべて0.01とした
    image.png
  • プロジェクトはこれで完成なので、プロジェクトをCrtl+Sで保存

ビルド&デプロイ

ビルド

  • File > Settings を選択する
    image.png
  • WebGLを選択して、Switch Platform を選択する & しばらくまつ
    image.png
  • Player Settings を選択する
  • Player > Resolution and Presentation > Zapper 2019 を選択する
    image.png
  • Build を実行し、出力先を選択する
    image.png

デプロイ

  • Buildされたディレクトリ配下のすべてのファイルを選択してzip化する
    image.png
  • zap works で先ほど作成したプロジェクトのページにアクセスし、Uplpoad/Publishをクリックする
    image.png
  • 作成したzipファイルをドラッグ＆ドロップする
    image.png
  • バージョン情報を入力し、Uplpoad & Publish を選択する
    image.png

テスト

  • プロジェクト下部のQRコードをスマートフォンなどで読み込む
  • カメラ側へのアクセスを許可する
    image.png
  • マーカー画像を移すとオブジェクトが生えてくる
    image.png
2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?