目次
1. このプロジェクトの概要
a.このプロジェクトでできること
2. Scaniverseのかんたんな使い方
a.Scaniverseについてと操作方法
b. Scaniverseでスキャンしたデータのエクスポート
3. Zapparの使い方
a. Zapparについてとアカウント作成
b. プロジェクトの作成と操作方法、公開まで
c. Scaniverseからのデータのインポート
4. DOORの使い方
a. DOORについてとアカウント作成
b. プロジェクトの作成と操作方法
c. 各種データのインポート
d. 360度カメラ「Theta」の活用
e. 公開
f. Meta Quest2を使ったVRワールドへの入り方
3. Zapparの使い方
a. Zapparについてとアカウント作成
Zapparはブラウザ上で簡単にARを製作することができるツールです。
2011年よりツールの提供をしており、現在では多くの企業がこのサービスを導入しています。
上の動画は実際にZapparにてWEB ARをiPadにて動かしている様子です。
このように、 アプリを入れることなく スマートフォンやタブレットでARを動かすことができます。
下のQRコードを読みこむと、動画内のARを実際に読み込むことができます。
WEBページ上で動くこの種類のARは 「WEB AR」 と呼ばれます。
まずはZapparのアカウントを作成していきます。
Zapparの提供する、Zapworks というプラットフォームを使って開発をしていきます。
アカウントの登録には
・メールアドレス
・パスワード
が必要です。
Zapworksの登録からユーザー登録をします。
GoogleアカウントやMicrosoftアカウントとの連携をせず、
自分でメールアドレスとパスワードを設定しましょう。
赤枠の中を入力してください。
連携をせず、メールアドレスとパスワードを自分で設定すること
入力が完了のち、
『Agree and Sign up』をクリックします。
クリック後、このような画面になります。
先ほど入力したメールアドレスのメールボックスを開いて、
『Verify your email』をクリックして、認証します。
プロフィールの入力にうつります。
上は例です。
名と姓を入力し、『Role』を 「I'm a student」 にします。
最後に『Continue』をクリックします。
ソフトウェアの利用状況にうつります。
なにも選択しません。
『Continue』をクリックします。
ワークスペースについて設定をしていきます。
上記のように入力をしてください。
右の『I'm experimenting』を選択します。
この画面が表示されたら、アカウントの作成は完了です。
おつかれさまでした。
次はプロジェクトの作成にうつります。
b. プロジェクトの作成と操作方法
プロジェクトを作成していきます。
『Create Project』をクリックします。
このような画面になります。
これは、「ARをどのツールを使ってつくっていきますか？」という意味です。
今回は 『Designer』を使います。
クリックするとこのような画面になります。
ここのQRコードをあらかじめPNG形式でダウンロードしておきましょう。
上のここに「プロジェクトの名前」をいれます。
今回は「test1」にします。
プロジェクト名の入力が終わったら、『Open Designer』をクリックします。
この画面は「どのデバイス用にARをつくりたいですか？」という意味です。
スマートフォンやタブレット用につくりたいので、 『Handheld devices』 を選びます。
選択後、『Start creating』を選びます。
次に選ぶのは、「プロジェクトの種類」です。
プロジェクトには下記4つの種類があり、それぞれの特徴は右の通りです。。
- × World Tracking ：マーカーを使わずにARを行える。ロストしやすい。使いません。
- ○ Image Tracking ：マーカーを使ってARを行う。ロストしにくい。
- × Face Tracking ：人の顔を認識し、CGを合成する。使いません。
- × Secreen only ：ただの画面をつくる機能です。使いません。
マーカーというのは「基準」を意味する目印のことです。
冒頭にあったARのデモの動画の中のマーカーはQRコードです。
目印(＝QRコード画像)を配置し、その画像を基準としてCGを合成し、ARを表示しています。
今回使うのは、マーカーを用いる 『Image Tracking』 方式 です。
選択後、『Start creating』をクリックします。
これでプロジェクトのセットアップは完了です。
いよいよコンテンツをつくっていきます。
これがデザインを編集する画面です。
今からの製作の流れは下記の通りです。
- マーカーを読み込みさせます。
- 表示させたいデータを読み込みさせます。
- データを配置します。
- 公開(=パブリッシュ)
順に説明していきます。
1. マーカーの読み込み
マーカー(=目印) を読み込ませます。
今回マーカーに使うのは、
「このARを立ち上げるためのQRコード」です。
このQRコードでリンクを読み取り、同時にARマーカーとしても用います。
QRコードは、ここで保存したものを使います。
マーカーの読み込みをしていきます。
画面右側の『Upload target image』をクリックします。
※Zapworks内でマーカーは「target image」という名前で扱われます。
次の画面では「そのマーカーは曲面ですか？」と聞かれます。
今回は平面なので左の 『Flat』 を選びます
そのtarget imageの設定をしていきます。
「Browse」 という青色のボタンがあります。
このボタンを押し、ここのQRコードを選択してください。
正しく読み込まれるとしたのような画面になります。
『Height』はこのままで大丈夫です。
完了したら『Confirm』をクリックします。
いまこの状態では「壁にtarget image がある」モードになっています。
机の上など用に target image を配置したい場合はマーカー(QRコード)をクリックし、
画面右のこのエリアにて『Flat』を選択します。
これで作業は完了です。
つぎはデータの読み込みに移ります。
2. 表示させたいデータの読み込み
Designerを用いたWEB ARでは下記の種類のデータを扱うことができます。
- 画像：
PNG,JPEGなど - 動画：
mp4,mov,mkvなど - 3Dデータ：
glb,gltf
3Dデータの場合、OBJやSTLなどを取り扱うことはできません。
glb, gltfに変換をしてください。
ここからはデータのアップロードをしていきます。
左側に『image』, 『video』, 『3D』とあります。
アップロードしたいデータ種類に合わせて項目を選んでください。
今回は画像と3Dモデルをアップロードしてみます。
『image』を開いたのち、『Browse media library』 をクリックします。
この画面が開きます。好きなデータをアップロードしてください。
画像が手元にない場合はこのリンクの「dummy_1.png」をダウンロードして使ってください。
アップロードが完了すると一覧の中に先ほどのデータが表示されます。
そのデータをクリックし、『Select file』をクリックするとデータを挿入することができます。
挿入が完了すると元の画面に戻ります。
これで読み込みは完了です。
3Dデータも同様に読み込ませてみましょう。
手順は image の時と変わりません。
手元にデータがなければこのリンクの「dummy_2.glb」を使ってください。
このように読み込めるはずです。
また、『Text』を使えば文字を入れることも可能です。
日本語非対応のフォントもあるため、半角英数字での入力をおすすめします。
ここから先、扱うデータを 「オブジェクト」 と呼びます。
3. データの配置
今すでにオブジェクトが配置されていると思います。
まずは操作の方法です。
下記が画面操作の方法です。
- 左クリック + マウスを動かす = 見る角度の調整
- 右クリック + マウスを動かす = 見る位置の調整
- スクロール = ズーム / ズームアウト
次はオブジェクトの配置の方法です。
オブジェクトをクリックするとこのような 赤青緑の矢印 がでてきます。
このうちのどれかをクリックでつかみマウスを動かすと、オブジェクトを移動させることができます。
これがオブジェクトの移動です。
オブジェクトの後ろにQRコードがあると思います。
これは target image として読み込ませたQRコードです。
ARを読み取るときこのQRコードはマーカーとなります。
このマーカーとオブジェクトの位置関係、サイズ関係がそのままARに反映されます。
QRコードより右にオブジェクトを配置すれば、AR上でもオブジェクトはQRコードよりも右に配置されます。
マーカーとオブジェクトの 位置関係 と サイズ関係 はここで決めてあげる
サイズや傾きなどをより詳細に設定したい場合は画面右のエリアで詳細に設定することができます。
上記がデータの配置についてです。
画像も3Dも手順はかわりません。
これでデータの配置は完了です。
Scaniverseの章にて3Dデータの書き出しを行ったと思います。
ぜひそのデータをこのARで読み込んでみてくださいね。
4. 公開（=パブリッシュ）
つくったものを公開していきましょう。
右上の『Publish』をクリックします。
しばらくするとこのように画面が変わると思います。
この表示がでればアップロードは完了です。
ここでダウンロードしたQRコードの画像を紙に大きくプリントアウトしてみてください。
スマートフォンやタブレットでそのQRコードを読み取り、権限の許可をするとARが表示できると思います。
かならず 権限を 許可 すること
ちなみに、zapparは公開後でもデータの修正が可能です。
一度パブリッシュしてしまったデータでもオブジェクトを差し替えたり、サイズを変えたりすることが可能です。
c. Scaniverseからのデータのインポート
先ほど扱った3Dデータは実はScaniverseでスキャンしたものです。
Scaniverseからデータをインポートするやり方を今から説明していきます。
XRプロジェクト【仮】_2.Scaniverseのかんたんな使い方 では
Sacaniverseでスキャンを行い、データの書き出しまで行いました。
そのデータを書き出した時のファイルの種類は glb だったはずです。
ZapworksはこのGLBを読み込むことができます。
USBメモリ、もしくはオンラインストレージなどを用いてスマートフォンからARを作成しているPCへそのglbを転送してください。
転送ののち、3DデータをZapworksに読み込ませましょう。
これで3DスキャンデータをAR表示させることができます。
以上がWEB ARのつくりかたでした。