Week 1 Low-fi AR
This week I made two low-fi AR filters with transparent sheets. The first one is inpired by the multimedia project "Adam by Eve" which tells a story of two high school students wandering into a strange world created by an one-eyed monster. This AR filter is what I imagine that world to be - occupied by one-eyed monsters and mysterious creatures. The second one is just a funny and dumb filter tht turns people into god...
![](https://static.wixstatic.com/media/9acc7a_9fa5bc43fe47484b8d9af98dc2b1b9ea~mv2.png/v1/fill/w_420,h_420,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/9acc7a_9fa5bc43fe47484b8d9af98dc2b1b9ea~mv2.png)
![](https://static.wixstatic.com/media/9acc7a_249ce3311df245b48e1516dafb1a62fa~mv2.png/v1/fill/w_425,h_425,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/9acc7a_249ce3311df245b48e1516dafb1a62fa~mv2.png)
Week 2 Face
In manga and anime, sometimes a flower sprouts out of a character's head as a manga symbol, meaning they're happy, carefree, and peaceful. So I thought it would be fun to create a dancing flower on one's head to depict happiness.
![](https://static.wixstatic.com/media/9acc7a_c9dfa710187840388a54fe971a2cfa56~mv2.png/v1/crop/x_0,y_102,w_3076,h_1870/fill/w_430,h_261,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/9acc7a_c9dfa710187840388a54fe971a2cfa56~mv2.png)
![](https://static.wixstatic.com/media/9acc7a_ea33bb89f581475cb218e4e7f468a167~mv2.png/v1/crop/x_42,y_119,w_2993,h_1882/fill/w_418,h_263,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/9acc7a_ea33bb89f581475cb218e4e7f468a167~mv2.png)
I built the flower character in blender and rigged it with two bones. The lower bone has a "Stretch to" contraint on it so that it will move with the upper bone and create a squash and stretch effect. Then I parented the mesh to the bones and tweaked the vertex weights to make the mech deform correctly. I also keyframed the dancing animation.
![](https://static.wixstatic.com/media/9acc7a_87e51bacfb4b4d54a1e061e1158c7303f000.jpg/v1/fill/w_640,h_369,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/9acc7a_87e51bacfb4b4d54a1e061e1158c7303f000.jpg)
The next step was exporting the animated mesh and importing it into lens studio. I failed several times before finally making it work. What I learned was that you need to export the amature together with the mesh to get the animation. Also there are a few export settings you need to adjust according to the official guide.
Here's the final filter! It's cute and I'm quite happy with it.
![](https://static.wixstatic.com/media/9acc7a_e1460dc217aa4c8ea5d51f1039c2586df000.jpg/v1/fill/w_296,h_640,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/9acc7a_e1460dc217aa4c8ea5d51f1039c2586df000.jpg)
Week 3 Image
[ Sorry I totally forgot the assignment prompt when I was making this image tracking filter...]
I like taking polaraid photos to capture the precoius moments in my life. Last weekend I went to BTS's concert and took a photo after the concert ended. Seeing them perform on stage again means a lot to me and I want to make this memory special. So I decided to make a AR filter with the polaraid photo I took.
First, I created some sticker-style assets in photoshop. They are elements I extracted from the concert's poster.
![](https://static.wixstatic.com/media/9acc7a_0a4efb551899402397158f3fc04827e1~mv2.png/v1/fill/w_599,h_411,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/9acc7a_0a4efb551899402397158f3fc04827e1~mv2.png)
Then I exported all the stickers as seperate pngs and imported them into After Effects. I animated the elements' sizes with the Elastic expression to create a pop-up effect. I also made them rotate in different directions and speeds.
![](https://static.wixstatic.com/media/9acc7a_598ff9da49c4451087ab8e02c381d530~mv2.png/v1/fill/w_617,h_355,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/9acc7a_598ff9da49c4451087ab8e02c381d530~mv2.png)
In lens Studio, I created a Marker Tracking object with the Polaraid photo. To place content on top of it, I added an image object and parented underneath the Marker Tracking object. Then, I exported the animation I created as png sequences and imported them into Lens as a 2d animation clip. The final step was to use the animation as texture for the image object. After everything was done, I exported the filter to my phone and it worked perfectly! I really like how this AR filter makes my memory special and I bealive this is the true power of AR.
![](https://static.wixstatic.com/media/9acc7a_6a0e4ede2c1f45749f5b2aa441cf9418f000.jpg/v1/fill/w_296,h_640,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/9acc7a_6a0e4ede2c1f45749f5b2aa441cf9418f000.jpg)
Week 4 Body
This week I made a virtual garment of metallic hands. Here's what it looks like:
![](https://static.wixstatic.com/media/9acc7a_9d0206c028dd4c73a2720d39f621e136f000.jpg/v1/fill/w_293,h_549,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/9acc7a_9d0206c028dd4c73a2720d39f621e136f000.jpg)
First, I created the model asset in Blender based on a hand mesh I downloaded from Sketchfab. The original mesh has too many vertices, so I used the Decimate modifier to reduce the faces. I positioned the hands in different directions and sizes so that the garment will look different in different angles.
![](https://static.wixstatic.com/media/9acc7a_3cd78be1a2794eb6898e5066eaeeba53~mv2.png/v1/fill/w_600,h_373,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/9acc7a_3cd78be1a2794eb6898e5066eaeeba53~mv2.png)
![](https://static.wixstatic.com/media/9acc7a_4f64a478ab1443fb9cdfa1fb5b2a31aa~mv2.png/v1/fill/w_610,h_350,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/9acc7a_4f64a478ab1443fb9cdfa1fb5b2a31aa~mv2.png)
Then I imported the 3D asset into Lens Studio and adjusted its position to fit the body. To block the hands that are supposed to be behind the body, I applied a Occuler material to the body mesh. It worked but wasn't perfect - sometimes the occuler doesn't match the real body and breaks the illusion. But over all the filter is pretty cool and I'm satisfied.
Week 5 Environment
As a jellyfish lover, I always wonder what it'd be like if jellyfish could swim in the air. This week I created a jellyfish lens which enables people to put a jellyfish in their surrounding environments.
As usual, I built the 3d model in Blender, rigged it, and created a simple animation. In Lens Studio, I utilized the Simple World template and replaced the default cloud mesh with my jellyfish. And to make the jellyfish translucent, I created a Simple PBR material and set the Blend Mode to "Screen". I also modified the TweenTransform script to make it go up and down slowly. There's only one issue - sometimes the jellyfish doesn't show up after scanning the environment. Maybe it's because the world mesh is not working correctly?
![](https://static.wixstatic.com/media/9acc7a_a07b1d0c24e647139b161af60eb9a861f000.jpg/v1/fill/w_296,h_640,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/9acc7a_a07b1d0c24e647139b161af60eb9a861f000.jpg)
![](https://static.wixstatic.com/media/9acc7a_8f1e2aa75c834b9d87fe80965d5a11dcf000.jpg/v1/fill/w_296,h_640,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/9acc7a_8f1e2aa75c834b9d87fe80965d5a11dcf000.jpg)
Final AR Menu
It's always hard for me to decide what to eat in a restaurant. I don't know what a dish is like and how it tastes by reading the menu descriptions, so I always go to Yelp to find pictures and reviews. But this process often takes a long time. I think an AR menu would be a good idea to help customers make decisions.
![](https://static.wixstatic.com/media/9acc7a_cdcde76f2d464a3ebc2876d4ed736249f000.jpg/v1/fill/w_640,h_404,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/9acc7a_cdcde76f2d464a3ebc2876d4ed736249f000.jpg)
First, I downloaded three 3d -canned dishes from Sketchfab and made a rotating animation for each of them in Blender. Then I imported the animaions and some UI elements I made into After Effects and composed the left and right part of the menu seperately. I also made an ITP restaurant menu to be the image tracker.
![](https://static.wixstatic.com/media/9acc7a_ca7bdcfd6777448fac03d81f85b0310c~mv2.png/v1/fill/w_416,h_242,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/9acc7a_ca7bdcfd6777448fac03d81f85b0310c~mv2.png)
![](https://static.wixstatic.com/media/9acc7a_cad7369dbf194cc883268e03444de031~mv2.png/v1/fill/w_199,h_242,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/9acc7a_cad7369dbf194cc883268e03444de031~mv2.png)
In Lens Studio, I created a marker tracking object with the menu image and layered the two animations on top of it. To make the reviews only appear when the user taps on the dish, I added a behaviour script which toggles the visibility of the review section when a tap event is triggered.
![](https://static.wixstatic.com/media/9acc7a_3a85a08bc6ae4325bba60e246998b92e~mv2.png/v1/fill/w_659,h_395,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/9acc7a_3a85a08bc6ae4325bba60e246998b92e~mv2.png)
![](https://static.wixstatic.com/media/9acc7a_94c3566435fe4b86aa3736c4ff9d79d9~mv2.png/v1/fill/w_143,h_143,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/9acc7a_94c3566435fe4b86aa3736c4ff9d79d9~mv2.png)