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

7.5K Views

August 02, 23

スライド概要

2023/08/02に開催したハンズオン勉強会の資料

profile-image

可視化技術や人間計測/空間計測技術を活用した問題解決に関する研究開発。 ARコンテンツ作成勉強会(tryAR)を主催。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

⾃⼰紹介 ⽒名︓吉永崇 (Takashi Yoshinaga) 仕事︓AR/VR応⽤に関するR&D。主に医療⽀援 ウェアラブル・モーションキャプチャ技術開発 Volumetric Video遠隔コミュニケーション コミュニティ︓ARコンテンツ作成勉強会を主催

3.

ARコンテンツ作成勉強会(略称:AR Fukuoka)の概要 [形式] AR/VRコンテンツの作り⽅や関連技術を主にハンズオン形式で体験。 [規模] 参加⼈数はコロナ前は約5~10名/回、現在は約10~20名/回。 [参加条件] AR/VRの開発に興味があれば初⼼者⼤歓迎。専⾨知識は不要。

4.

Twitterと勉強会ページで情報を発信しています @AR_Fukuoka Googleで「AR勉強会」で検索

5.

ハッシュタグ #AR_Fukuoka

6.

演習⽤素材のダウンロード https://github.com/TakashiYoshinaga/ARFukuoka/raw/main/ZapWorksDesigner202 30802/Samples.zip

7.

ハンズオンスタート

8.

ZapWorksにログイン (https://zap.works) Log In

9.

ZapWorksにログイン アカウント作成時に選んだ⽅法でログイン

10.

プロジェクトを作成 をクリック

11.

プロジェクトを作成 Create project

12.

プロジェクトを作成 Designerを選択 [補⾜] Designer: WebブラウザだけでARを作れる Studio: Zppar社が提供する独⾃の開発環境(Unityみたいな感じ) UniversalAR: UnityやA-Frame, Babylon.jsと⼀緒に使えるSDK

13.

プロジェクトを作成 QR code [補⾜] DeepLink(普通のURL)もあとで発⾏することが可能。 ZapcodeはZappar社独⾃のコード。読み込みには専⽤アプリを使う必要がある。

14.

ダッシュボード画⾯ QRコードができてるはず

15.

デザイナーを開く Open Designer

16.

デザイナーを開く Image Tracking [補⾜] World tracking: マーカーを使わず空間にオブジェクトを配置。現時点では微妙。 Image tracking: 画像マーカーの上にオブジェクトを配置。 Face tracking: インカメを使って顔を追跡し、オブジェクトを重ねる。

17.

(余談) サンプルも充実 Templatesからサンプル を選ぶこともできます

18.

デザイナーを開く Start creating

19.

デザイナーを開く ARで表⽰できるオブジェクトのリスト このプロジェクトや選択したオブジェクトの詳細

20.

マーカーの設定 Upload target image

21.

新機能①︓マーカーのタイプ選択 今回はFlatを選択 Next

22.

マーカー画像のアップロード (1/3) Brows

23.

マーカー画像のアップロード (2/3) marker.jpg [開く]とか[アップロード]とか

24.

マーカー画像のアップロード (3/3) アップロードに成功すると マーカー画像が表⽰される [補⾜] マーカー画像はPNGかJPEGが利⽤可能だが、PNGは透過情報があるとマーカー として正しく機能しないことがあるので要注意。(JPEG推奨︕)

25.

新機能②︓マーカーのサイズ⼊⼒ マーカー画像の実⼨サイズを⼊⼒ (デフォルトでは⾼さのサイズ)

26.

マーカー登録 Confirm

27.

マーカー登録中・・・ 処理状況

28.

マーカー登録完了 マーカーが表⽰されればOK

29.

(余談) 新機能③︓Curvedマーカー 曲⾯マーカーも選べる

30.

(余談) 新機能③︓Curvedマーカー 曲⾯に貼るマーカーの平⾯サイズ マーカーを貼る円柱の Radius: 半径 Circumference: 円周

31.

マーカーに関する解説 Project ここをクリックすると マーカー画像を変更可能 マーカーの置き⽅を指定 Upright: 壁などの垂直⾯ Flat: 机などの⽔平⾯ ※適当でも⼤丈夫

32.

3Dオブジェクトを表⽰しよう マーカーの上に表⽰するオブジェクトを配置

33.

3Dオブジェクトのアップロード 3Dをクリック

34.

3Dオブジェクトのアップロード サンプルオブジェクトが表⽰される(今回は使わない)

35.

3Dオブジェクトのアップロード Uploadボタン

36.

3Dオブジェクトのアップロード ①Samplesフォルダ ②flower.glb ③開く

37.

3Dオブジェクトのアップロード アップロードしたオブジェクトが追加される

38.

3Dオブジェクトの配置 マーカーの上にドラッグ&ドロップ

39.

3Dオブジェクトの配置 オブジェクトが登場

40.

3Dオブジェクトの配置 オブジェクト⼀覧が邪魔な場合は [3D]をクリックして閉じる

41.

マーカーとの位置関係を観察 回転︓オブジェクト以外の領域をドラッグ 拡⼤縮⼩︓マウススクロール

42.

オブジェクトの位置・サイズ・⾓度の調整 オブジェクトをクリック (軸が表⽰されるはず)

43.

オブジェクトの位置・サイズ・⾓度の調整 をクリック 各軸をドラッグで移動

44.

オブジェクトの位置・サイズ・⾓度の調整 をクリック 軸をドラッグで拡⼤縮⼩

45.

オブジェクトの位置・サイズ・⾓度の調整 をクリック 各リングをドラッグで回転

46.

オブジェクトの位置・サイズ・⾓度の調整 Transformsを開けば数値で 位置・サイズ・⾓度を指定可能

47.

動作確認 Preview

48.

動作確認 各⾃の環境で表⽰された QRをスマホで読む [補⾜] このQRコードのリンクは⼀定時間後に無効化されます

49.

動作確認

50.

新機能④︓パーティクルの追加 Applets

51.

新機能④︓パーティクルの追加 Particle

52.

新機能④︓パーティクルの追加 Particleを1つ選択 (例:Rain) Add to scene

53.

新機能④︓パーティクルの追加 Appletsを再度クリックして アプレット⼀覧を⾮表⽰

54.

新機能④︓パーティクルの追加 パーティクルが表⽰される

55.

新機能④︓パーティクルの調整 視点を操作して パーティクル発⽣源を表⽰

56.

新機能④︓パーティクルの調整 パーティクル発⽣源をクリック Particlesを開く

57.

新機能④︓パーティクルの調整 [Material] パーティクルの絵柄 [Color] パーティクルの⾊ [Intensity] パーティクルの発⽣量 [Particle Size] パーティクル⼀粒のサイズ などなど・・・ ⾊々あるので試してみよう

58.

動作確認

59.

(余談) アバター ⾃分⾃⾝をアバター化して ARで表⽰する機能もある

60.

(余談) アバター https://youtu.be/HFzoU6UqNrU

61.

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

62.

コンテンツの公開 Publish

63.

コンテンツの公開 ダッシュボードに戻る

64.

コンテンツの公開 このQRを共有すればOK DLはこちらから

65.

コンテンツの公開 QRを使わないでシェアする場合は︖

66.

コンテンツの公開 New trigger

67.

コンテンツの公開 Deep link Create

68.

コンテンツの公開 リンクができてる

69.

コンテンツの公開 クリック

70.

コンテンツの公開 これを共有すればOK

71.

コンテンツ名をつける Back to project overview

72.

コンテンツ名をつける Untitled projectの横のボタンをクリック ※カーソルを合わせるとボタンが表⽰される

73.

コンテンツ名をつける 名前の編集してエンターを押下

74.

コンテンツ⼀覧の確認 をクリック

75.

コンテンツ⼀覧の確認 今回作ったコンテンツが表⽰される

76.

コンテンツ⼀覧の確認 無料で作れる残りコンテンツ数(合計5個まで無料)

77.

コンテンツ⼀覧の確認 新規コンテンツを作る場合はこちら

78.

コンテンツ⼀覧の確認 削除する場合はこちらから Delete

79.

お疲れ様でした︕