Recreating Dig Trail Effect From Ori

Hey everyone, so I’m trying to recreate an effect as close as possible to the following trail from Ori and the Will of the Wisps and I find it quite difficult:
ori_digging

I’m using Unity, my best attempt uses a Trail Renderer with a custom sprite I made in Photopshop:
my_best_attempt.gif
Here is the sprite I used:

This looks like I’m almost there but I can’t figure out how to keep the trail sprite from following the trail head as it moves away. According to this other post it sounds like something similar can be achieved by offsetting the UV’s based on distance travelled but I don’t quite understand how to do that.

I’m new to VFX so any pointer in the right direction would be extremly useful, do you guys think this effect uses a Particle System? A Trail Renderer? A Line Renderer? Any combinaison of the above with a custom Shader?

Thanks!

Edit: directly embeded all images instead of linking to external.

1 Like

There are 2 main aspects of this effect.

The first, as you noticed, is the keep the trail’s texture from “moving”. As that thread you linked to discusses, this is harder than it sounds and Unity’s trail renderer actively works against you in achieving it. The only real solution is to not use Unity’s trail renderer at all. There aren’t even any assets on the store that I’m aware of that are able to do this properly. I’ve ended up hand writing my own every time I need this, even excellent assets like Ara Trails doesn’t have this option. This is obviously a big issue, but it is what it is.

The second part is the trail mesh is a constant width, and the texture being used is a gradient height map that doesn’t tapper. Instead the trail is fading out the alpha and that alpha is driving a cutoff edge on the height map. It’s a carefully controlled dissolve shader. Something like this:

2 Likes

Thanks for taking the time to answer,

  1. Your first point makes sense, I’ll try to dive into this and write my own Trail Renderer as soon as I get the time, would you advise me to start from the Line Renderer or from scratch?

  2. I don’t quite understand what you mean with the second point? As I understand it, this second point is related to the end of the trail and how it is disapearing, right? Seems to me like reducing the width of the trail + fading out the alpha color is sufficient, isn’t it?

  3. An other question came to me, do you think the sprite I linked is enough to reproduce this effect or do I need a sprite that tiles perfectly when repeated back to back? If I manage to implement 1) I don’t quite see how this can work if the texture doesn’t perfectly repeat, is that correct?

As a side note, I wanted to thank you @bgolus because I keep stumbling upon your answers on the unity forums about Shaders and VFX and it’s been an incredible help. By answering to all those posts you’ve helped countless Unity developers and you absolutely deserve to be thanked for!

The problem is you need absolute control over the UVs, and you need them to be stable once a point in the trail has been emitted. Both Unity’s trail and line renderer suffer from the same problem that the UVs are recalculated every time the points change, and not always in ways you can easily guess. This means you can’t use the line renderer either, since the UVs may shift / warp when you add and remove points in ways you can’t counter. So yes, you have to do it fully from scratch, keeping your own list of points and generating your own mesh.

You could reduce the width of the trail and fade it out, but that won’t produce the same effect as what Ori is doing.

Here are some quick photoshop mockup examples.
Trail size & alpha would look like this:
image
That’s using a trail texture that looks like this:
image
I’m warping the texture down to a point, similar to what shrinking a trail would do, and them multiplying by a gradient.

A constant size trail and using a “dissolve” style shader would look like this:
image
That’s using a trail texture that looks like this:
image
It’s produced by taking the texture above, and using a linear precise inner glow in Photoshop, and then subtracting a gradient from it and increasing the contrast.

As you can see, the two are very different, with the dissolve style shader looking more like a tunnel that’s filling in vs one that’s shrinking and fading out.

Nope, needs to be a repeating texture like what I posted above.

5 Likes

Thank you very much for this extremely detailed answer. I’ll work on it using your hints and hopefully I’ll come back here later to post a complete solution.