M I C R O · C H A L L E N G E · I I I

June Bascaran · Josephine Bourghardt · Sami Piercy

C O N C E P T

As part of an experience in June, we will be creating an interactive installation to show the concept of Future Cravings. Future Cravings is a methodology for climate action, using multi-sensory formats to ideate differently around climate issues. It is based on the original problem solving forum: the dinner table (or the fire pit depending on how far back you go) where the dinner experience combines visuals, sounds, storytelling and alternative materials prompting critical conversation.

The installation will be an interactive experience to illustrate visuals, sounds and artefacts within act of conversation and storytelling in a sensory experience to communicate the concept. To further visualise and communicate past and future dinner experiences posters will accompany the installation. To add an extra layer of communication we will create a series of interactive posters, using AR and 3D visuals to show the experience virtually. In doing so we can make our 2D posters engaging and playful.

P R O P O S A L

2D posters that become interactive with the use of AR.

B R A I N S T O R M I N G & I D E A S

Dinner table with tableware moving around, as a different way of showing how the table could be set and with what during one of these concept dinners.
2D poster with information that moves playfully when looking at it through the camera.
Linking 2D poster to websites and Instagram.

S Y S T E M - D I A G R A M

P R O C E S S

First, we researched programs to work with AR and animation that could be easily opened with a phone by scanning an image or QR code. We started with A Frame because it is opensource and has webAR applications.

There was difficulty in placing our 3D model into the code, and we wanted ways to manipulate animation as well. We switched to using Blippar and Meta Spark Studio programs to be able to import our 3D models and animate them.

To create the model, we started out by creating a simple model of a dinner table with the tableware that was used in our first dinner. We wanted it to be simple and playful, and not too realistic. The model was built in Rhino, exported to Sketchfab in OBJ format, and imported into Blippar.

S T E P · 1 · T E S T I N G - A R - A P P L I C A T I O N S

First, we tried using A Frame, and followed code that allowed you to scan from a Hiro image. This worked for the first part of the code which shows a cube in AR, but when trying to import our own 3D models into the code it wouldn't connect and show them.

https://aframe.io/ https://medium.com/arjs/augmented-reality-in-10-lines-of-html-4e193ea9fdbf

As we are new to working with AR and animation overall and with limited time constrictions we started looking at other platforms intuitive to beginners. We started experimenting with Blippar.

Blippar is an online platform where you can build your own augmented reality experiences for the web. It is free, intuitive for beginners and requires no code. It has a library of free 3D models, it's free to create, publish and share – with unlimited views.

When using Blippar you need to accept terms and are redirected to Blippars webpage before viewing an image. We had wished to use a platform where images are shown directly when scanning a code, but in this case we still chose to use Blippar due to being user friendly for beginners as we wanted to during this experience practice animation and understand how to use AR.

https://www.blippar.com/

S T E P · 2 · 3 D - M O D E L

The 3D model we used was created in Rhino - a dinner table with tableware in different forms to in this case illustrate how a dinner setting could look at a Future Cravings concept dinner, here with the topic of the sea. The file is exported as an OBJ which can be imported to Blender for animations as well as uploaded to SketchFab to be used directly in Blippar.

This is the 3D model animated directly in Blippar, which we uploaded to SketchFab. We were able to play around with creating a background scene, lighting, and directional movements. We then did a version of the table animated in blender.

This can be tested out here with the QR code:

S T E P · 3 · A N I M A T I O N - I N - B L E N D E R

The goal is to create an interaction with a 2D poster that plays with forms and shapes of the tableware that are shown in a poster. Meanwhile we also wanted to learn and practice using Blender for animation where this was a great opportunity to do this.

After importing the 3D file in OBJ format into Blender this tutorial (https://www.youtube.com/watch?v=CBJp82tlR3M) was followed to learn the basics of animation and to move objects in a scene.

Different actions of rotation, location and scale were added to the different objects on the table.

S T E P · 4 · B L E N D E R - T O - B L I P P A R

The animation is then rendered into a video that can be uploaded directly to Blippar.

To make an AR video in Blippar you create a profile, start a project, choose a qr code image, where you can choose your own or let Blippar generate one for you. When in your new project you press the plus button to upload a file and choose your video file. Drag it to the scene and scale it to desired size.

To preview press Preview Project at the top right where you will be prompted to go through the steps of scanning the codes before seeing the project in AR.

When happy with how it looks publish the project. The QR codes can then be placed where you want people to interact with them to view the AR experience directly with their phones.

Example posters - This can be used on printed posters. With the QR code to access Blippars webpage and the AR code as an image. The animation starts as the image making it move when looking at it through your phone.

S T E P · 5 · A N I M A T I O N - I N - M E T A S P A R K S - S T U D I O

Meta Spark Studio is a software platform designed for the creation and development of immersive virtual reality (VR) and augmented reality (AR) experiences. It is intuitive and user-friendly program that offers a wide range of tutorials for learning purposes. Also, it offers a variety of tools and features that helps to easily create what you have in mind.

By following some tutorials on how to use the program en ended creating cool animations en AR by using image tracker. Initially, with objects, after with 3D Model Tableware.

After creating the animation, was able to create an instagram filter. This can be seen here: https://www.instagram.com/ar/259930709740588/?ch=NDhmZTNkNWE2NTJiODE2MmRiMjk2OTZlNDg1YTI0YmI%3D

Other explorations:

F U R T H E R - E X P L O R A T I O N S

The next step would be to make the table or moving objects be directly imported into AR. This way we can have free floating animated objects. Below the plant was built in Blender and coral was imported from SketchFab. Both were animated in blender and were able to be directly imported into Blippar as a .glb file. Only the scaling was able to be transferred, but not the rest of the animation.

Coral SketchFab: https://sketchfab.com/3d-models/coral-c26e47859f0945d69a4e2944ee80b995

Tutorial for plant: https://www.youtube.com/watch?v=Z1QG1FOvPk8&ab_channel=PolygonRunway

C O N T R I B U T I O N S

We have worked together and collaboratively, sharing our knowledge and ideas. But our skills have been reflected in some moments of the project.

Sami - Background in Industrial Design: Skills in having a more technical product vision and knowledge in the use of 2D modeling tools and laser cut.

June - Background in Industrial Design Engineering: Skills in having a more technical product vision and knowledge in the use of Arduino and electronics.

Josephine - Background in Product-furniture design. 3D and 2D modeling skills, production and project vision.