Getting Started With WebAR Creation With ZapWorks Designer

1K Views

August 08, 23

スライド概要

profile-image

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

シェア

またはPlayer版

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

関連スライド

各ページのテキスト
1.

Creating WebAR Without Programming Fundamentals of ZapWorks Designer

2.

Download materials for exercises https://github.com/TakashiYoshinaga/ARFukuoka/raw/main/ZapWorksDesigner202 30802/Samples.zip

3.

Login to ZapWorks (https://zap.works) Log In

4.

Login to ZapWorks (https://zap.works) Log in using the method you chose when creating your account

5.

Create a Project Click

6.

Create a Project Create project

7.

Create a Project Select Designer [Supplemental] Designer: A web browser only Studio: Zappar's original development tool (like Unity) UniversalAR: SDK that can be used with Unity, A-Frame and Babylon.js.

8.

Create a Project QR code [Supplemental] DeepLink (normal URL) can also be issued later. Zapcode is Zappar's proprietary code. You need to use a dedicated application to read it.

9.

Dashboard QR code should be ready.

10.

Open Designer Open Designer

11.

Open Designer Image Tracking [Supplemental] World tracking: Places objects in space without markers. Image tracking: Places objects on top of image markers. Face tracking: Tracks a face using an in-camera camera and overlays an object on it.

12.

(Aside) Many samples are also provided You can choose a sample from Templates

13.

Open Designer Start creating

14.

Open Designer List of object types that can be displayed in AR Details of this project or selected object

15.

Configuring Tracking Image Upload target image

16.

Select a Type of Tracking Image Select Flat for this tutorial Next

17.

Uploading Tracking Image Brows

18.

Uploading Tracking Image marker.jpg Open

19.

Uploading Tracking Image Tracking Image will be displayed after successful upload. [Tip] PNG or JPEG can be used for the tracking image, but be aware that PNG may not function properly as a marker if there is transparency information. (JPEG is recommended!).

20.

Setting of Tracking Image Enter the actual size of the Tracking Image (height size by default)

21.

Configuring Tracking Image Confirm

22.

Configuring Tracking Image・・・ Progress

23.

Configuring Tracking Image If the marker appears, it's OK.

24.

(余談) Curvedマーカー 曲⾯マーカーも選べる

25.

(Aside) Curved markers Flat size of Image applied to curved surfaces Radius or Circumference of cylinder

26.

Explanation of Tracking Image Project Click here to change the Tracking Image Upright: Vertical surface such as a wall Flat: Horizontal surface such as a desk

27.

Display a 3D Model Place the object to be displayed on top of the Tracking Image

28.

Upload a 3D Model Click 3D

29.

Upload a 3D Model Sample object is displayed (not used this time)

30.

Upload a 3D Model Click Upload Button

31.

Upload a 3D Model ①Samples Folder ②flower.glb ③Open

32.

Upload a 3D Model Uploaded 3D model should be shown

33.

Place 3D Model Drag & Drop onto tracking image

34.

Place 3D Model 3D model is shown

35.

Place 3D Model Click [3D] to hide 3D model pane

36.

Changing the Editor's Perspective Rotation: Drag area other than the object Scaling: Mouse scrolling

37.

Adjustment of Object Position, Size, and Angle Click a 3D object

38.

Adjustment of Object Position, Size, and Angle Click Drag each axis

39.

Adjustment of Object Position, Size, and Angle Click Drag axis to change scale

40.

Adjustment of Object Position, Size, and Angle Click Drag each ring to rotate

41.

Adjustment of Object Position, Size, and Angle Open Transforms to specify position, size, and angle numerically.

42.

Preview on Smartphone Preview

43.

Preview on Smartphone Read the QR displayed in your environment with your smartphone [Supplement] This QR Code link will be disabled after a certain time

44.

Preview on Smartphone

45.

Adding Particles Applets

46.

Adding Particles Particle

47.

Adding Particles Select a Particle (ex.Rain) Add to scene

48.

Adding Particles Click Applets again to hide the applet list

49.

Adding Particles Particle will be shown

50.

Adjustment of Particle Modify the viewpoint to show the source of particles

51.

Adjustment of Particle Click the source of particle Open Particles

52.

Adjustment of Particle [Material] Picture of particles [Color] Color of particles [Intensity] Number of particles generated [Particle Size] Size of each particle And so on... There are many things to try.

53.

Preview on Smartphone

54.

(Aside) Avatar There is also a function to make yourself an avatar and display it in AR.

55.

(Aside) Avatar https://youtu.be/HFzoU6UqNrU

56.

(Aside) Avatar For more information, visit the archive of past events! https://www.youtube.com/watch?v=1acFpzbK3io

57.

Publishing a Project Publish

58.

Publishing a Project Back to dashboard

59.

Publishing a Project Share AR by usint this QR DL from here

60.

Publishing a Project How to share without using QR?

61.

URL New trigger

62.

URL Deep link Create

63.

URL Link will be generated

64.

URL Click

65.

URL This URL can be used share your AR

66.

Setting a Name of AR Project Back to project overview

67.

Setting a Name of AR Project Click on the button next to Untitled project * The button appears when you hover the cursor over it.

68.

Setting a Name of AR Project Edit the name and press enter key

69.

Check the List of Projects Click

70.

Check the List of Projects The project created this time is displayed.

71.

Check the List of Projects Number of remaining contents you can create for free (up to 5 free contents in total)

72.

Check the List of Projects Click here to create new content.

73.

Check the List of Projects Click here to delete a Project Delete

74.

That's all for now