We recently held a STYLY Hackathon!
STYLY Hackathon is an event where members of Psychic VR Lab, the developer of STYLY, create content according to a theme within a certain time period.
The theme of this year’s event was “content that generates buzz.” The members were divided into five teams, and each team had to brainstorm how to create content that would generate a strong response. They had to produce their ideas in a short two-day period.
The underlying goal of the event was to use STYLY’s new Modifier feature, which allows users to add animation, interaction, and other effects to assets in STYLY Studio. For more information on Modifier, please see this article.
In the fourth installment of this series, we will be looking at the production process and tips from Team D, “Street Photographer,” and how they implemented the concept of each piece. We will also address their prolific ability to complete four pieces within the two-day time limit. We hope you will take note of how they implemented the concepts of each work.
Accelerate iterations with Modifier
Team D “Street Photographer,” consisted of the CEO, a web engineer, a Unity engineer, and a content creator.
Inspired by this year’s hackathon theme, “buzz,” they generated a hypothesis: “If we create AR filters that elicit empathy and fun and test them on the street, young people will talk about them and they will become buzz-worthy.” They all agreed on the policy of mass-producing AR filters and began development.
Based on this idea, a variety of AR filters were created.
AR to produce Hadouken
The first was an AR filter that produces the familiar Hadouken from the Street Fighter series.
When the user moves in time with the Hadouken effect, it appears as if the user is releasing the Hadouken.
The Hadouken filter is very simple and was created using two objects and a “move to loop” modifier.
The objects are the “BlueExplode” model provided in STYLY and an illustration of a Hadouken. The “move to loop” modifier is used to repeatedly move objects in the same direction at the same time to create the expression of the Hadoken.
Studio Screenshot
Running in Studio
AR like the world of The Matrix
The second is an AR filter that looks like the world of The Matrix.
Not only does it display a series of green numbers, but it also displays an effect that makes the screen crack by pressing a button. If the user poses with an imaginary gun at the right moment, a sci-fi action of “cracking the world itself” is possible.
Since the timing of the shot needs to be set by the user, they used PlayMaker to display an effect that looks like a bullet being shot when the button is pressed. Also, if the button is reflected on the screen, it is reflected in the video, so they placed a transparent button in the lower left corner of the screen.
The process in PlayMaker is as shown in the image below.
First, a post effect is applied to the camera with SetImageEffect.
![[Unity / PlayMaker] How to use the custom action “Set Image Effect”](https://styly.cc/wp-content/uploads/2021/01/catch-160x160.png)
At the start, a green material is used, inspired by the world of The Matrix.
When they receive a notification that the button is pressed, they use SetImageEffect to replace the post-effect with a lighter-colored material.
Next, they deactivate the plane of The Matrix pattern and display the image of the broken screen.
At that time, a “material with a glitching shader” is applied as a post-effect to the screen.
This processing sequence allows the camera image to be shaken, resulting in the effect of appearing turned off.
Finally, the shaking can be slowed by replacing the post-effect with a lighter-colored material using SetImageEffect. It is important to wait a reasonable amount of time between each process.
This AR filter does not ultimately use a modifier. However, during the production process, they experimentally created and verified a modifier.
Specifically, they created a modifier that changes the target object to a Matrix pattern for the hackathon. Using this function, they change various assets in STYLY Studio into a Matrix pattern and verify how they can express the Matrix-like world in the most comfortable way.
As a result, they discovered that changing people’s bodies into Matrix patterns and moving them around creates a cool cyber effect.
Creating a modifier that applies humanoid walking animation allows us to add a walking animation to STYLY Studio. Doing this speeds up the iteration process, as the humanoid model only needs to be uploaded to STYLY Studio to try out the motion. In addition, as shown in the image above, parameters can be manipulated in STYLY Studio, allowing for real-time adjustment to the model’s changing appearance as it is placed.
Screenshots are under development
The finished AR can be experienced as follows.
このようにご体験いただけます！
This is how it looks!#AugmentedReality #ARfilter #MixedReality pic.twitter.com/c4BlXLvRkD— STYLY (@STYLY_XR) February 16, 2022
Fire-burning AR
The third is a filter that looks like a blazing fire.
By using STYLY’s occlusion function, it is possible to express fire and smoke.
In fact, this filter is not an AR filter that specializes in generating fire and smoke.
It is created by a modifier that duplicates the target object and rotates and drops it.
The modifier is used to duplicate the torch particles.
Since the modifier is used to illustrate a behavior, they were able to replace assets in STYLY Studio and verify what would be interesting to produce in large quantities, which greatly broadened the scope of content creation.
Sky-Cracking AR
The last one is an AR filter that breaks the sky.
今年は雪降りすぎなので雪国の空をARでかち割ってみました☃️❄️☃️ pic.twitter.com/uBljSrs0wb
— jojomon (@jojomonvr) February 16, 2022
A school of fish migrates through the air, and when you look up at the sky, you see a world where space is broken and connected to the sea. This one does not use a modifier, but the quality of the work is so high that it is hard to believe that it was created in a single day.
Create a work of art and go to town!
One of the most unique features of Team D’s work was that they asked young women, especially those in Shibuya, to try out the AR filters they created.
Although the results did not generate any buzz, it is worth mentioning that the team was able to get real feedback from young women who tried the AR filters.
However, although the response to the AR filter itself was positive, the question “Would you like to use it?” was met with mixed responses. Some of the young women interviewed said they could not imagine themselves using the AR filter in any situation.
It seems that the young women they interviewed prioritized things being “cute” and “pretty.” The “empathy” and “fun” elements that the team members had envisioned beforehand did not really stick with them.
Reflections
They also gained another insight that the new Modifier feature enables content creation multiplication.
By multiplying several modifiers in STYLY Studio, they believe that new expressions will be developed, and STYLY will become more creative.
Although the event was held online, it was very enjoyable for the participants, and we would like to participate again if another event is held.
They are considering adding the modifiers they created in a future update, which is why they have presented a total of four works.
The fact that they were able to complete so many high-quality works in such a short period of time—just two days—shows the potential of the modifier functionality.
In the fifth and final installment, we will introduce the work of Team E,”Virtual Saize,” which used AR to recreate the Saizeriya. We will also share some tips from their creation. Enjoy!