Advanced Interactive Design - Task 1 / Interactive AR Application
31/8/2023 - 5/10/2023 (Week 1 - Week 6)
Anna Chin Siaw Fong / 0354370
Advanced Interactive Design /
Bachelor of Design (Honours) in Creative Media / Taylor's University
Task
1 / Interactive AR Application
INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/1RrMvIjHOKH0_8PZSNGACQR2r6WvXuHcu/preview"
width="640" height="480" allow="autoplay"></iframe>
Task 1 - Interactive AR Application
For this task, we were to develop an AR application with AR interactivity that
will fit the Brand Experience of the product we have chosen and will be
carried forward to the Final interactive website project. Before starting
Task 1, I brainstormed for ideas on what kind of filter I wanted to do and
also the website. I came up with 3 ideas and proposed it to Mr. Razif.
Fig 1.0 Instagram Filter Proposal
After presenting the proposal to Mr. Razif, we went with idea #1 which is the
New Jeans lightstick filter. Before creating the filter, I went to do some
research on how to creating an instagram filter. I downloaded Meta Spark
Studio and explore the app for a bit. I made a simple 3D lightstick and tested
it out on Meta Spark Studio before creating the actual filter as I wanted to
find out how things work in Meta Spark Studio.
Fig 1.1 Filter test
Fig 1.2 3D lighstick reference
I imported the reference into Blender and began modeling my 3D lightstick.
It was a learning curve for me as I never 3D modelled before. I created my
model in 6 colours (white, blue, pink, yellow, green and purple).
Fig 1.3 Model structuring
Fig 1.4 Smoothened Model
Fig 1.5 White lightstick with glow
After creating the model in Blender, I imported it into Meta Spark
Studio and started creating the filter. I added a hand tracker for my
filter. When there is a present of a hand, the lightstick will appear. I
also created a UI picker so that users can pick the colours of the
lightstick when using the filter. I imported my images to Meta Spark
Studio to use for the UI picker as well.
Fig 1.6 Filter hand tracking
Fig 1.7 Patch editor
Fig 1.8 UI picker images
I also added a glow effect using a PNG picture as Meta Spark Studio did
not support the glow effect that I created in Blender. I had to create a
new material and add the PNG as the texture. Then, I created a null object
and used the material on the plane to create the glow effect for the
lightstick.
Fig 1.9 Glow effect PNG
Fig 1.10 Glow material
Fig 1.11 Making glow effect for lightstick
Before uploading my filter, I tested out the filter using the "test on
device" option in Meta Spark Studio.
Fig 1.12 Testing filter
After testing, I uploading it at Meta Spark Hub. I added the demo video and
also an icon for my filter. I used Adobe Photoshop to create the icon
for my filter.
Fig 1.13 Creating icon
Fig 1.14 Uploading filter
Fig 2.0 Filter preview (Front Camera)
Fig 2.1 Filter preview (Back Camera)
Link to New Jeans Lightstick Filter: https://www.instagram.com/ar/851273716371215/
FEEDBACK
- Research on how to make the filter
- Try to find learn how to use blender to 3D model the lightstick
REFLECTION
Creating an Instagram filter was a challenging task for me. I had no prior
knowledge of how to create an Instagram filter nor do i know how to 3D model.
I had to learn new softwares in order to create an Instragram filter and to 3D
model. It was not the smoothess learning process as I had to follow tutorials
and learn it myself. I also faced difficulties when uploading my filter which
I could not solve for the longest time. I had to trial and error to fix the
problem. Despite all the difficulties and challenges that I faced, I am glad
that I was able to overcome them. It was a gratifying experience. Not only did
I acquire new skills in 3D modeling and filter creation, but I also gained a
profound sense of accomplishment.
Comments
Post a Comment