Piece of Ocean

Spark AR project view
Spark AR project view

GITHUB Link

https://github.com/arfected/sparkar-hackathon

Inspiration

We recently ventured into the magical world of texture distortion. The power of starting with just one image and ending up with an animation just through distortion is really great. Especially with just 4MB of file size available, this is a really usefull trick for making more dynamic effects.

In order to learn more about the technique, we decided to devote our Spark AR Hackathon project fully towards texture distortion.

What it does

This Instagram World filter takes a surface and places a distorted image of that surface on top. It creates the illusion of transforming the surface in front of you into an ocean. There's even a dolphin that splashes around and creates drops on the screen!

How I built it

1) - Animations The first step was creating the right animations for this project. To make the distortion patches work properly, these had to be animated black-and-white textures. This project consists of two different animations: one for the surface and one for the screen.

2) - Patches There's a bunch of different things arranged in the patch editor, the most important of which are the distortion and the (3D) animations. These make the effect so much more dynamic and make the illusion of water possible.

3) - 3D model and animations To further build on the theme of water and ocean, we had to add a dolphin! This dolphin has two animations: swimming and jumping. The texture animations of the distortion are all lined up with the jumping and swimming of the dolphin. So when the dolphin splashes back into the water, you'll see that in the distortion as well.

Challenges I ran into

Texture distortion is really interesting but super complex. The hardest part of getting this idea to work is taking the texture of the camera and figuring out how to extract the part of the image that is considered the surface.

Accomplishments that I'm proud of

The amount of realism of the distortion is definitely an accomplishment. Also making the animations of the dolphin line up with the animations of the distortion ended up looking awesome!

What I learned

The team learned a lot about texture distortion and working with UVs. Also, due to the unfortunate developments of the coronavirus, we learned to work together as a strong team while working from home. As the first time (and hopefully only) time for a team going through something like this, it has been amazing to see how well we stick together.

What's next for Piece of Ocean

Squashing bugs and adding more complexity. The next big step is working with SDF shapes to create the texture distortion, to make this effect really, REALLY, lightweight.