Simonschreibt.

I didn’t embed the video directly to avoid any tracking from Google and complications with the DSGVO.

I really like the design of Tyrael in the Diablo games and I LOVE the design and animation of his wings:

Not only in the great cutscene but also directly in Diablo II it was possible to admire them:

 Source: gamepedia.com

Left and right wings are not mirrored! Both wings are stored in single files each containing 60 frames for the animation. If you own the game you can use Dr. Tester to see the animation by yourself.

When Blizzard announced Diablo III I was very very very interested how they would realize those wings in a 3D engine. Let’s look at how it turned out:

Wow…this looks amazing!

But how is it done? Sure, they could use an animated texture and map it to a plane but that would cost a lot texture memory. Using skinned geometry (like I did below as example) might be a possibility but would cost many bones.

However it’s made: there are several problems to solve:

• The starting point of the wing must be fixed
• You need a nice wavy movement
• The wing should get thinner towards the tip

I looked at their assets and to be honest at first I had no idea how they made such beautiful wings out of these “simple” textures:

Source: Diablo III

Important: I’m just assuming here and I don’t really know if my thoughts are correct!

OK, it’s easy to understand that you get a nice wavy movement by using a sine wave texture and moving it along a plane. BUT the starting point moves up and down and as I just mentioned: we need a fixed point:

By looking at the in-game geometry I could see the trick: They deformed the plane so that the up-down-movement gets reduced on one side. Adding some subdivisions avoids that the texture stretches in a weird way like you can see on the left:

This is good enough because the area where the wings connect is pretty big and allows at least a bit movement. This avoids that the wings look disconnected when the sine curve is at its minimum/maximum:

By the way: The additional subdivisions let you add more deformation which can result in better and more interesting looking curve movement (faster/stretched at the beginning, slower/compressed at the end):

Instead of deforming the geometry you could modify its UVs in the same matter but for better presenting what’s going on I decided to deform the plane directly.

Now we need to get rid of the opaque blue areas and here the texture’s alpha channel comes into play:

Source: Diablo III

Applying this gives us a nice animated wing “string”. It’s interesting to see that these plasma-like “fringes” seem to have a bit of life already:

The only problem is that you can see the hard cut on the right side of the plane where the wave texture ends very abrupt (the left side isn’t a problem because there it connects to the angel’s armor which hides the harsh cut).

But this problem can be solved by using a second texture as mask (see below). Another idea is to use vertex color as transparency mask but of course a texture mask gives more control with details.

Source: Diablo III

To the right you can see how the applied mask improves the wing experience. Very interesting: the transparency in addition with the slightly squashed geometry makes the end of the wing look thinner which was one of the three mentioned problem zones!

Now we can duplicate the plane several times to make the wings look like in the Diablo game. And to get some variation we can offset the UVs of the planes a bit:

But as you can see this produces several problems. We’ll talk about some solutions below:

One problem is that the texture tiles/wraps and therefore “starts again” when the UV shell is reaching over the 0-1 border.

Source: Diablo III

This can be solved by setting the texture tiling mode to : Clamp.

Clamping basically means that the border values of the texture are repeated forever instead of the whole texture (like it happens when you tile/wrap it):

Source: Diablo III

To avoid the last problem with the harsh cut at the right side (see above) you can stretch your UVs so that it aligns with the mask again:

Another solution I really like is using one UV set for the wave texture and another one just for the mask (without any offsets in the UV shells). I don’t know if they did this in the game because I couldn’t find such a 2nd UV set in the assets.

Source: Diablo III

By using a 2nd UV set you don’t get any problem which we talked about above but clamping the mask texture might come in handy anyway even if the UV shells don’t overlap the 0-1-area some pixel bleeding might happen:

However you solved the problems, if you now don’t use boring planes like in my examples but pimp it up a bit then you end up with a beautiful geometry like this which is used in the game:

The curved surfaces add volume and even if it looks a bit complicated you should remember that it’s “just” made of subdivided and deformed planes:

As you can see there are some planes without subdivisions which actually do suffer from some “weird” texture stretching (like explained at the beginning of the article) but this gets very well hidden by all that other movement going on.
And these planes seem to use a different texture for the masking (I named it “Mask 2”). But I might be wrong here.

If you’re interested in seeing the UVs, here you go:

Source: Diablo III

If we apply our material to this wonderful geometry (and push the intensity a bit) it looks really similar to what you can see in-game:

Do you remember the “Pattern” texture (mentioned at the beginning of the article)?

Source: Diablo III

I wasn’t sure how it’s used in the material but luos_83 suggested it could be multiplied with the mask texture which looks very reasonable:

This adds a nice additional detail to the whole effect:

Here’s my final material. But as I said: It’s only an assumption!

Again I’m totally in love with how Blizzards artist combine several “simple” steps to create something stunning. Only one thing I don’t like that much: When the characters move, the wings follow immediatelly without secondary motion:

Not a major issue but got handled later – in a different BLizzard game: Heroes of the Storm improved the wings in that regard:

You can admire the dynamic wings in the menu as well as directly in the game:

The textures look similar to what was used in Diablo III but in addition to the wave texture they actually transform the geometry!

Source: Heroes of the Storm

Here you can see the wings in the main menu:

And here you can see how the geometry gets transformed:

In my eyes these wings are a great example how game development works: We constantly have to overcome problems which look intimidating at first but can be beaten by using several small and creative solutions.

Thanks for reading and I hope you like what saw. Have a nice day! :)

Update 1

How awesome is that? Jill Harrington, the creator of the wings for Diablo III, said hello and revealed some more details for us:

Bloom Amount

“The second, darker mask texture is to modulate the bloom amount. Without it, the wings were still too bright at the tips. It also tints the bloom a bit.”

Fill Planes

“Those little planes that aren’t subdivided are just there to fill in the wing base a bit without adding too many polys. The not-so-great texture artifacts don’t show in the whole wing, I think!”

Secondary Motion

“There actually is a small amount of secondary motion in the wings on NPC angels. They have a rig with a handful of joints controlled by limited ragdoll. When they were created, we couldn’t set a gravity that wasn’t either “up” or “down”, so stronger physics would have basically made droopy broken wings and killed the illusion.”

Overdraw

Of course the amount of overdraw with all those layered planes with soft alpha makes me wince, but they never caused a performance hit so they got to stay that way!

Thanks a lot Jill for sharing all those information with us! :)

Update 2

Zeratu took some time to write a post about giving a wing-mesh dynamic secondary motion in Unity! He even shares his project files. Awesome! Thank you so much!

Link to the Article.
Link to the Project Files. (he also linked to them at the bottom of his article!)

Update 3

Okami mentioned in the comments that he made these cool wings for Grim Dawn! :) <3

Update 4

Kmitt91 has re-created this effect in Godot. Even better, he also provides a Tutorial – super cool! Thank you so much for taking the time! I’m sure the Godot-Community will l❤ve it!

Source: How to make Stylized Wings in Godot 3.2