Make a Water Ripple Effect BLENDER X SPARK AR (documentation)

BASIC KNOWLEDGE FOR BLENDER AND SPARK AR REQUIRED

STEP BY STEP GUIDE

Step 1:

Open up Blender

Delete the default cube, camera and light.

Add two basic planes + one basic sphere.

Subdivide one of the planes approx 70 times.

The subdivided plane goes on the bottom, the second plane on top and the sphere just somewhere next to the plane like in the pictures.

NOTE: The plane on the top is a little smaller than the bottom one.

Step 2:

Next we select the top plane and add a particle system

In the Render setting change “Render As” to “Object”.

Set the “Instance Object” to the Sphere.

If you press the Space-bar now, you should see particles coming out of the top plane.

Now we are going to change the size and amount of particles that the top plane is emitting.

You can copy the settings or play around with it.

In the picture you can see that the particles are now big ‘drops’ which will fit well for a water ripple effect (like someone is throwing small stones in calm water).

Step 3:

Next, without having anything selected, go to the Physics tap and add “Dynamic Paint”.

For the “Type” select “Brush”.

For the “Paint” select “Particle System”.

For the “Particle System” select the particle system we had just created.

Step 4:

Next, select the Bottom plane.

Again, go to the Physics tap and add a new “Dynamic Paint”.

For the “Type” select “Canvas”.

For the “Surface Type” select “Waves”.

Now you have added A Brush (the top plane with the particles) and a Canvas (the Bottom plain) that receives the particles.

If you press the space bar now on your keyboard, you should see the magic happening.

Further settings to play with are the “Smoothness” and “Timescale”.

Those are my settings:

Further Settings for the Canvas to play with

If you do not want your waves to look less like 64 bit waves, just shade the plane smooth:

Plane Shaded Flat

Plane Shaded Smooth

Step 5:

Next we are going to add materials.

First the Bottom plane.

The only external thing you will need is the Spiral.jpg image but you can find it by googling “spiral normal map”

You can use the one I am using or try a different one.

Spiral Normal Maps on the Web

The image I am using

This is the material set up for the Bottom plane:

The following image shows the material set up for the Sphere and the top Plane. We are using a basic Transparent BSDF so it will not show up in the renders.

Step 6:

One more step before we are going to render out the image sequence! We need to Bake the bottom plane!.

Select your bottom plane and go to the Physics properties. Under “Cache” Press “Bake All Dynamics”.

IMPORTANT: Save your file first! You will not be able to bake if you did not save your file yet!.

Step 7:

Next we are going to add a Camera.

Set your camera to “Orthographic” and the “Orthographic Scale” to 2 in the Camera settings.

Render Settings: resolution 1080 x1080

I will render “Frame Start” 20 to “End” 80” but this depends on your personal preference.

IMPORTANT: The more frames you will use as your final Water Ripple Effect inside Spark AR, the heavier the file will get. You can get a nice effect with just 20–30 frames!

Select a folder where you would like your image sequence to end up in.

Now we are ready to render our normal Map images

IMPORTANT: select the CYCLES RENDER ENGINE otherwise the top plane and sphere will show up in the render. The Transparent BSDF only works in Cycles.

Step 8:

MOVING ON TO SPARK AR

Now you have a folder full of Images. Those images are actually Normal Maps.

To be able to use them inside Spark AR, we first need to Compress them, otherwise the file size would be way too big for so many Normal Maps.

Go to https://tinypng.com/ and drop all your Images in there, compress them and save them (preferably in a new folder, you might want to use the uncompressed images for something else)

Note: tinypng.com is great but it does not let you compress more than 20 images at once so you have to work in batches.

Step 9:

Next, we are going to open a New Blank Spark AR Project.

Add a Animation Sequence.

Then Select the Animation sequence and select the Compressed Normal Maps as Textures.

NOTE: I ended up using frame 57–80 for my image sequence (24 frames)

Inside Spark AR. Selection of the Frames we want for the Animation Sequence.

To see how it looks, add a basic plane object with a standard material and add the Animation Sequence in the Normal Texture slot.

IMPORTANT: the file size even with the compressed image will be very big. You still need to compress the Animation sequence inside spark AR!

Those are my settings for the compression:

NOW WHAT TO DO WITH THOSE RIPPLES?

The following steps really depend on what you would like to use the Water Ripple Animation sequence for.

For the purpose of showcasing one example, I am adding it on a simple plane.

I set the Shader Type to “Physical Based”.

The Animation texture goes into the Normal Texture Slot.

I add a Environmental Texture and changed the “Blend Mode” to “Add”.

Now it looks much more like water!

The rest is up to you!

Here are some more examples of how you could use this effect!:

Image Tracking with Water Ripples and Glass Shader:

Face mask in the image by https://www.leo-official.com/
ezgif.com-gif-maker(7)

Makeup with Water Ripples:
ezgif.com-gif-maker(11)

Water Ripples on a 3D Object:
ezgif.com-gif-maker(8)

Credits

Original inspiration for this Article by Real World Reality https://www.youtube.com/c/RealWorldReality

Author Sarah Mayer @Sarah
Contributor Laszlo Arnould @laszlo

8 Likes

Awesome stuff! Thank you :slight_smile:
I think procedural one much better and low-weight, but if you not a “math” guy then this variation is top :slight_smile:

3 Likes

Wow… many thanks for this!! :pray: :pray: :pray: :pray: :pray:

2 Likes

wow really amazing! many thanks

2 Likes