ZapWorks DesignerでノンプログラミングAR

5.4K Views

July 04, 22

スライド概要

2022年07月02日に学生コミュニティTENGINEER福岡で実施したハンズオン資料

profile-image

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

シェア

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

関連スライド

各ページのテキスト
1.

ZapWorks DesignerでノンプログラミングAR

2.

⾃⼰紹介 ⽒名︓吉永崇(Takashi Yoshinaga) 専⾨︓ARを⽤いた医療⽀援や運動計測 Volumetric Video (3Dビデオ) コミュニティ︓ARコンテンツ作成勉強会 主催

3.

ARコンテンツ作成勉強会の紹介 p 2013年5⽉に勉強会をスタート。 p ARコンテンツの作り⽅をハンズオン形式で学ぶ p ⼈数は5~10名程度の少⼈数で実施 p 参加条件はAR/VRに興味がある⼈(知識不要) p 各地で開催 (福岡、熊本、宮崎、⻑崎、⼤分、 ⿅児島、⼭⼝、広島、札幌、関東)

4.

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

5.

ハッシュタグ #TENGINEER福岡 #AR_Fukuoka

6.

演習⽤素材のダウンロード https://github.com/TakashiYoshina ga/ARFukuoka/raw/main/ZapWorksDesig ner_20220702/Samples.zip

7.

ハンズオンスタート

8.

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

9.

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

10.

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

11.

プロジェクトを作成 Create project

12.

プロジェクトを作成 Designer(beta)を選択

13.

プロジェクトを作成 QR code

14.

ダッシュボード画⾯

15.

デザイナーを開く Open Designer

16.

デザイナーを開く Image Tracking

17.

デザイナーを開く Start creating

18.

補⾜ (やらなくてOK) Template

19.

補⾜ (やらなくてOK) さまざまなテンプレートがあるので ZapWorksで何ができるか学ぶのに便利

20.

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

21.

マーカーの設定 Upload target image

22.

マーカーの設定 ①Samplesフォルダ ②marker.jpg ③アップロード

23.

マーカーの設定 しばらく待つ

24.

マーカーの設定 マーカーがー表⽰されるので、 この上でオブジェクトを配置

25.

オブジェクトの配置 3Dをクリック

26.

オブジェクトの配置 サンプルオブジェクトが表⽰される(今回は使わない)

27.

オブジェクトの配置 Browse from computer

28.

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

29.

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

30.

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

31.

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

32.

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

33.

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

34.

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

35.

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

36.

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

37.

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

38.

動作確認 Preview

39.

動作確認 これをスマホで読む

40.

動作確認 https://twitter.com/Taka_Yoshinaga/status/1538444336416 686086

41.

登場時の挙動を追加 オブジェクトをクリック

42.

登場時の挙動を追加 Transition Effects Enter

43.

登場時の挙動を追加 エフェクトを選択 (例︓Fade-In) Durationでアニメーション にかかる時間を設定 (例︓2秒)

44.

動作確認 Preview

45.

動作確認 これをスマホで読む

46.

動作確認

47.

補⾜︓その他設定 Actions タップ時の挙動を選べる

48.

コンテンツの公開 Publish

49.

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

50.

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

51.

コンテンツの公開 PCでの閲覧は︖

52.

コンテンツの公開 New trigger

53.

コンテンツの公開 Deep link Create

54.

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

55.

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

56.

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

57.

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

58.

コンテンツ名をつける Untitled projectの横のボタンをクリック

59.

コンテンツ名をつける 名前の編集

60.

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

61.

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

62.

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

63.

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

64.

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

65.

お疲れ様でした︕