Transform Your Garden Using Location-Based AR (VPS) in Mattercraft

Summary

In this tutorial, the speaker demonstrates how to create a location-based web AR experience using Mattercraft, Zappar's next-gen 3D web tool. The process involves scanning real-world spaces with Immersal, importing 3D objects, and adding interactivity to bring a garden back to life through AR. The tutorial covers setting up a project, designing a splash screen, adding animations, and implementing user interactions. Finally, the AR garden is tested, published, and shared via a QR code. The tutorial encourages users to share their AR creations in the Zapper XR Pioneers community, making it a hands-on and creative learning experience.

Takeaways

• 😀 Mattercraft is a 3D web tool by Zappar, designed for creating location-based AR experiences with minimal coding.
• 😀 This tutorial shows how to create an interactive AR experience, ideal for projects like virtual landscaping and city tours.
• 😀 Mattercraft integrates with Immersal, enabling precise anchoring of 3D objects in real-world spaces for immersive AR experiences.
• 😀 To get started, users must scan their physical space using the Immersal Mapper app, capturing overlapping images to create a map.
• 😀 The Immersal Developer Portal allows users to upload their scan, which then acts as an anchor in Mattercraft to align AR objects.
• 😀 Mattercraft offers an asset library with realistic models (e.g., flowers, trees) to quickly prototype and test AR environments.
• 😀 Users can download 3D models from Sketchfab and import them into Mattercraft to enhance their AR scenes with custom assets.
• 😀 Customization of the splash screen, including background images, button colors, and welcome messages, is done via the project’s HTML file.
• 😀 Animations can be added to objects in Mattercraft, such as showing or hiding 3D plants to create a dynamic, interactive user experience.
• 😀 To add interactivity, users can add HTML buttons with CSS styling and script events that trigger animations (e.g., tap to grow a plant).
• 😀 Testing the experience is easy with real-time updates that sync automatically on your phone, allowing for rapid adjustments before publishing.

Q & A

What is Mattercraft, and how is it useful for AR creators?

Mattercraft is a next-gen 3D web tool from Zappar that allows AR creators to build persistent location-based AR experiences directly from a browser with minimal code. It is particularly useful for outdoor installations, virtual landscaping, and interactive city tours.

What is the purpose of the Immersal integration in Mattercraft?

Immersal integration in Mattercraft enables precise anchoring of 3D objects in real-world spaces. This allows AR objects to be accurately positioned and maintained within the environment when viewed through an AR device.

How do you scan your real-world space using Immersal?

To scan your space with Immersal, you need to download the Immersal Mapper app on your phone, create an account, and use the manual mode if you're on the free version. Walk around your space capturing overlapping images, then save and download the map to use in Mattercraft.

What is the process of setting up a project in Mattercraft?

After signing up or logging in to Mattercraft, you create a new project and name it. You can choose from templates for various use cases. For location-based AR, you can select a template that already integrates with Immersal, simplifying the setup process.

How do you add 3D assets to your AR scene in Mattercraft?

Mattercraft offers an inbuilt asset library where you can choose 3D models like flowers, trees, and bushes. You can add them to your project by selecting 'add to project.' You can also download models from external platforms like Sketchfab and import them into your scene.

What customizations can you make to the splash screen in Mattercraft?

In Mattercraft, you can customize the splash screen by modifying the HTML file. You can change the background image, button color, text, and add a welcome message. Additionally, you can use the live preview to instantly see the changes as you make them.

How can you animate objects in Mattercraft to improve user experience?

To animate objects, you use the animation timeline to create 'show' and 'hide' states for your 3D objects. You can adjust the scale of objects and choose easing effects like 'ease in' and 'ease out' for smooth transitions. These animations help make the AR experience feel dynamic.

How can you add interactivity to your AR scene, such as a button that grows plants?

Interactivity is added by incorporating HTML elements like buttons. After styling the button with CSS, you can link actions to it, such as triggering the 'show' animation when the button is clicked. This interaction can be controlled using event listeners and state management within the animation system.

How can you hide the button after it is clicked in Mattercraft?

To hide the button after it is clicked, you create a new layer and set its visibility to 'not visible' once the button is clicked. This ensures that the user can enjoy the AR experience without distraction from the button after its function is performed.

What is the process for testing and publishing the AR experience in Mattercraft?

To test your AR experience, you can use the live preview feature to scan a QR code with your phone. Mattercraft automatically updates the experience in real-time. After testing, you can publish your project by assigning a version number, and Mattercraft will handle the deployment and hosting.