Getting Started With WebAR Creation With ZapWorks Designer

Creating WebAR Without Programming Fundamentals of ZapWorks Designer

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

• https://github.com/TakashiYoshinaga/AR-Fukuoka/raw/main/ZapWorksDesigner20230802/Samples.zip

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

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

Create a Project Click

Create a Project Create project

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.

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.

Dashboard QR code should be ready.

Open Designer Open Designer

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.

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

Open Designer Start creating

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

Configuring Tracking Image Upload target image

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

Uploading Tracking Image Brows

Uploading Tracking Image marker.jpg Open

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!).

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

Configuring Tracking Image Confirm

Configuring Tracking Image・・・ Progress

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

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

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

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

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

Upload a 3D Model Click 3D

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

Upload a 3D Model Click Upload Button

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

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

Place 3D Model Drag & Drop onto tracking image

Place 3D Model 3D model is shown

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

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

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

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

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

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

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

Preview on Smartphone Preview

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

Preview on Smartphone

Adding Particles Applets

Adding Particles Particle

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

Adding Particles Click Applets again to hide the applet list

Adding Particles Particle will be shown

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

Adjustment of Particle Click the source of particle Open Particles

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.

Preview on Smartphone

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

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

• https://youtu.be/HFzoU6UqNrU

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

• https://www.youtube.com/watch?v=1acFpzbK3io

Publishing a Project Publish

Publishing a Project Back to dashboard

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

Publishing a Project How to share without using QR?

URL New trigger

URL Deep link Create

URL Link will be generated

URL Click

URL This URL can be used share your AR

Setting a Name of AR Project Back to project overview

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

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

Check the List of Projects Click

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

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

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

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

That's all for now