-
-
Update: Dynamic text removed to adhere to Spark AR Policy 2.4.
-
3D Object Moon Stick
-
Submitted by Loren Rachelle Hicks
Inspiration
The inspiration for the Sailor Moon AR project came from thinking about plane tracking and what type of worlds/objects I would enjoy. Many people around the world identify with and/or enjoy the Sailor Moon series. The character of Sailor Moon is recognized as one of the most important female superheroes of all time.
Sailor Moon is also one of the most popular manga series of all time and continues to enjoy high readership worldwide. The manga has sold over 35 million copies in over fifty countries, and the franchise has generated upwards of $13 billion in worldwide merchandise sales. The English adaptations of both the manga and the anime series became the first successful shōjo title in the United States.
What it does
This is a Sailor Moon themed augmented reality effect. The effect was created using Spark AR software. Features included segmentation-the process of separating a person from their environment – and plane tracking- in which an object appears when the desired surface is detected.
The particle system was also utilized to create dynamic Moondust effects that were controlled for shape, size, speed, opacity, birth, and lifespan. Additional effects include: a high poly count 3D crescent moon wand model, plane tracking attached to a face mesh for positioning, golden directional light, as well as looped thematic audio.
How I built it
Utilizing three separate Spark AR tutorials I created the Sailor Moon AR effect. Adding and positioning lights, adding audio to your effects, and immersive floating particles.
I replaced the 3D object flashlight from the adding and positioning lights tutorial with the high poly count crescent moon wand 3D object. The model contains 4,000+ triangles and 2,000+ vertices. It is composed of multiple textual components including emission, transparency, roughness and metality layers. The 3D object file was free to use for commercial purposes from a website called Sketchfab and was created by contributor feryzapata.
Challenges I ran into
Some of the more difficult aspects of creating this effect included finding a way to create an effect with an object meant for a comic or cartoon in the real world. Finding the right balance between colorization and light intensity for directional lighting took a bit of trial and error before finding the right harmony between color vibrancy and light intensity.
Applying a texture-based material to the particle system was also difficult due to the significant transformations and scaling I needed to create the moon dust effect. Finding the right blending mode allowed the material to project on the moon dust consistently throughout its path of travel and achieve the desired effect.
Another challenging technical aspect came from compressing my file for export and eventual application across multiple devices. When the file size was too large I found compression tips online. After following all of the suggestions I still had a massive file size that refused to compress.
Only after exploring the individual components of my file did I find that it was not my texture files that needed to be compressed, which were the file types being cited in the compression tutorials, but my audio file that was in need of compression. I edited the file to contain a small refrain of the instrumentals containing the Sailor Moon chorus and was able to easily export my effect.
Accomplishments I'm proud of
I am mostly proud of how dynamic the Sailor Moon wand looks in the environment. I owe much of its success to its creator feryzapata but I feel the lighting chosen and the dimmed foreground mat controlled for opacity creates a tangible and emissive almost watercolor-like 3D object within a real environment.
What I learned
I’ve learned to seek the support of my community when rendering with unfamiliar software. When I needed creativity I sought out tutorials by the Spark AR team and reminisced with my friends about Sailor Moon. When I needed audio application assistance I sought out YouTube videos alongside Spark AR tutorials. The patch system was similar to software I had worked with in the past but was still something I challenged myself to learn due to its complexity of application.
What's next for Sailor Moon AR
The sky is the limit! I would love to find or render all of the Sailor Soldier items and add them to a UI picker. The actor could then choose their own specific item. Directional lighting in the future could correlate with the color scheme specific to the Sailor Moon item in the series.
Built With
- sparkar
Log in or sign up for Devpost to join the conversation.