ノンプログラミングで作るWebAR -ZapWorks Designerの基本と新機能

ノンプログラミングで作る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

• https://github.com/TakashiYoshinaga/AR-Fukuoka/raw/main/ZapWorksDesigner20230802/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://youtu.be/HFzoU6UqNrU

(余談)アバター︓詳しくは過去のイベントのアーカイブで︕ https://www.youtube.com/watch?v=1acFpzbK3io

• 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

お疲れ様でした︕