ノンプログラミングで作るWebAR -ZapWorks Designerの基本と新機能
10.2K Views
August 02, 23
スライド概要
2023/08/02に開催したハンズオン勉強会の資料
可視化技術や人間計測/空間計測技術を活用した問題解決に関する研究開発。 ARコンテンツ作成勉強会(tryAR)を主催。
関連スライド
各ページのテキスト
ノンプログラミングで作るWebAR ZapWorks Designerの基本と新機能
⾃⼰紹介 ⽒名︓吉永崇 (Takashi Yoshinaga) 仕事︓AR/VR応⽤に関するR&D。主に医療⽀援 ウェアラブル・モーションキャプチャ技術開発 Volumetric Video遠隔コミュニケーション コミュニティ︓ARコンテンツ作成勉強会を主催
ARコンテンツ作成勉強会(略称:AR Fukuoka)の概要 [形式] AR/VRコンテンツの作り⽅や関連技術を主にハンズオン形式で体験。 [規模] 参加⼈数はコロナ前は約5~10名/回、現在は約10~20名/回。 [参加条件] AR/VRの開発に興味があれば初⼼者⼤歓迎。専⾨知識は不要。
Twitterと勉強会ページで情報を発信しています @AR_Fukuoka Googleで「AR勉強会」で検索
ハッシュタグ #AR_Fukuoka
演習⽤素材のダウンロード https://github.com/TakashiYoshinaga/ARFukuoka/raw/main/ZapWorksDesigner202 30802/Samples.zip
ハンズオンスタート
ZapWorksにログイン (https://zap.works) Log In
ZapWorksにログイン アカウント作成時に選んだ⽅法でログイン
プロジェクトを作成 をクリック
プロジェクトを作成 Create project
プロジェクトを作成 Designerを選択 [補⾜] Designer: WebブラウザだけでARを作れる Studio: Zppar社が提供する独⾃の開発環境(Unityみたいな感じ) UniversalAR: UnityやA-Frame, Babylon.jsと⼀緒に使えるSDK
プロジェクトを作成 QR code [補⾜] DeepLink(普通のURL)もあとで発⾏することが可能。 ZapcodeはZappar社独⾃のコード。読み込みには専⽤アプリを使う必要がある。
ダッシュボード画⾯ QRコードができてるはず
デザイナーを開く Open Designer
デザイナーを開く Image Tracking [補⾜] World tracking: マーカーを使わず空間にオブジェクトを配置。現時点では微妙。 Image tracking: 画像マーカーの上にオブジェクトを配置。 Face tracking: インカメを使って顔を追跡し、オブジェクトを重ねる。
(余談) サンプルも充実 Templatesからサンプル を選ぶこともできます
デザイナーを開く Start creating
デザイナーを開く ARで表⽰できるオブジェクトのリスト このプロジェクトや選択したオブジェクトの詳細
マーカーの設定 Upload target image
新機能①︓マーカーのタイプ選択 今回はFlatを選択 Next
マーカー画像のアップロード (1/3) Brows
マーカー画像のアップロード (2/3) marker.jpg [開く]とか[アップロード]とか
マーカー画像のアップロード (3/3) アップロードに成功すると マーカー画像が表⽰される [補⾜] マーカー画像はPNGかJPEGが利⽤可能だが、PNGは透過情報があるとマーカー として正しく機能しないことがあるので要注意。(JPEG推奨︕)
新機能②︓マーカーのサイズ⼊⼒ マーカー画像の実⼨サイズを⼊⼒ (デフォルトでは⾼さのサイズ)
マーカー登録 Confirm
マーカー登録中・・・ 処理状況
マーカー登録完了 マーカーが表⽰されればOK
(余談) 新機能③︓Curvedマーカー 曲⾯マーカーも選べる
(余談) 新機能③︓Curvedマーカー 曲⾯に貼るマーカーの平⾯サイズ マーカーを貼る円柱の Radius: 半径 Circumference: 円周
マーカーに関する解説 Project ここをクリックすると マーカー画像を変更可能 マーカーの置き⽅を指定 Upright: 壁などの垂直⾯ Flat: 机などの⽔平⾯ ※適当でも⼤丈夫
3Dオブジェクトを表⽰しよう マーカーの上に表⽰するオブジェクトを配置
3Dオブジェクトのアップロード 3Dをクリック
3Dオブジェクトのアップロード サンプルオブジェクトが表⽰される(今回は使わない)
3Dオブジェクトのアップロード Uploadボタン
3Dオブジェクトのアップロード ①Samplesフォルダ ②flower.glb ③開く
3Dオブジェクトのアップロード アップロードしたオブジェクトが追加される
3Dオブジェクトの配置 マーカーの上にドラッグ&ドロップ
3Dオブジェクトの配置 オブジェクトが登場
3Dオブジェクトの配置 オブジェクト⼀覧が邪魔な場合は [3D]をクリックして閉じる
マーカーとの位置関係を観察 回転︓オブジェクト以外の領域をドラッグ 拡⼤縮⼩︓マウススクロール
オブジェクトの位置・サイズ・⾓度の調整 オブジェクトをクリック (軸が表⽰されるはず)
オブジェクトの位置・サイズ・⾓度の調整 をクリック 各軸をドラッグで移動
オブジェクトの位置・サイズ・⾓度の調整 をクリック 軸をドラッグで拡⼤縮⼩
オブジェクトの位置・サイズ・⾓度の調整 をクリック 各リングをドラッグで回転
オブジェクトの位置・サイズ・⾓度の調整 Transformsを開けば数値で 位置・サイズ・⾓度を指定可能
動作確認 Preview
動作確認 各⾃の環境で表⽰された QRをスマホで読む [補⾜] このQRコードのリンクは⼀定時間後に無効化されます
動作確認
新機能④︓パーティクルの追加 Applets
新機能④︓パーティクルの追加 Particle
新機能④︓パーティクルの追加 Particleを1つ選択 (例:Rain) Add to scene
新機能④︓パーティクルの追加 Appletsを再度クリックして アプレット⼀覧を⾮表⽰
新機能④︓パーティクルの追加 パーティクルが表⽰される
新機能④︓パーティクルの調整 視点を操作して パーティクル発⽣源を表⽰
新機能④︓パーティクルの調整 パーティクル発⽣源をクリック Particlesを開く
新機能④︓パーティクルの調整 [Material] パーティクルの絵柄 [Color] パーティクルの⾊ [Intensity] パーティクルの発⽣量 [Particle Size] パーティクル⼀粒のサイズ などなど・・・ ⾊々あるので試してみよう
動作確認
(余談) アバター ⾃分⾃⾝をアバター化して ARで表⽰する機能もある
(余談) アバター https://youtu.be/HFzoU6UqNrU
(余談)アバター︓詳しくは過去のイベントのアーカイブで︕ https://www.youtube.com/watch?v=1acFpzbK3io
コンテンツの公開 Publish
コンテンツの公開 ダッシュボードに戻る
コンテンツの公開 このQRを共有すればOK DLはこちらから
コンテンツの公開 QRを使わないでシェアする場合は︖
コンテンツの公開 New trigger
コンテンツの公開 Deep link Create
コンテンツの公開 リンクができてる
コンテンツの公開 クリック
コンテンツの公開 これを共有すればOK
コンテンツ名をつける Back to project overview
コンテンツ名をつける Untitled projectの横のボタンをクリック ※カーソルを合わせるとボタンが表⽰される
コンテンツ名をつける 名前の編集してエンターを押下
コンテンツ⼀覧の確認 をクリック
コンテンツ⼀覧の確認 今回作ったコンテンツが表⽰される
コンテンツ⼀覧の確認 無料で作れる残りコンテンツ数(合計5個まで無料)
コンテンツ⼀覧の確認 新規コンテンツを作る場合はこちら
コンテンツ⼀覧の確認 削除する場合はこちらから Delete
お疲れ様でした︕