Diablo 3 - Resource Bubbles

This article is a translation of the article by Diablo 3 - Resource Bubbles by Simon Schreibt.



There are three things in the world that I can look at forever: The fire, how others work and the resource areas in Diablo3 . I already loved Blizzard, as you might have noticed in my article on their 2.5D trees . Today we are talking about something else. Today we look deep into the crystal spheres of Diablo in search of truth.
(there are a lot of pictures inside)


')




They seem so deep. So round. Charming blend of blur and clarity. Let me describe my first thoughts on how this could be achieved (if in a nutshell: they are both wrong. I'm on a false path (woodway), as we say in Germany):

First false trail

Take a polygonal sphere, cut off half and place textures on the surface. Why is this wrong? Because I checked the “bubble” in-game grid. And you know what? This is NOT a bubble! Look at my vision (red sphere) and the real mesh from Diablo3 (green), which, by the way, contains only 218 triangles against my 960.

Second false path

I asked Neox what he thinks and he offered to take the sphere, bake it in the normal map and do everything else in the shader. It was a good idea, but I could not find a similar texture in the Diablo files. So why the hell do I waste your time on all this nonsense?
Because mikiex posted a great example that is similar to the idea of ​​Neox. I think this will be my next article . And now just look at the image and notice how great the sphere of the Earth looks. But we are not looking for easy ways.



Now let's talk about the right decision.

First hell trail - “UV scan”

I managed to pull out the bubble grid and look at its texture pattern (UV). And that's what it looks like:



UV modified (stretched at the edges and compressed in the center). Let's see what happens when we apply the checkerboard pattern on the bubble and let the UV move from left to right:



It may not look like an ideal sphere (more like a round hat), but since the edges of the bubble are mostly covered with painted reflections or this sad stone angel, it works very well in my opinion. Actually, I think she looks cool.

The second hell trail - "Geometry"

However, the movement of only one texture will not create this beautiful tandem of movement and depth. Thanks to the D3 model viewer, we can see that there is more than one plane.



You earned 666 points if you noticed that these textures contain a completely wrong color and pattern. As an experienced player in the old Diablo2, I searched for the term “mana” in files, but in the magician’s Diablo3 resources it is called Arcane Energy. Mana is used by a sorcerer.
Although it seems to me that they use a mana-bubble grid for this, since I could not find any special geometry under the arcane sphere.

Bb0x had a great question about the line, which appears when the resource is not 100% complete. This line is not bent (not susceptible to UV distortion), and he mentioned that they may use a second layer of UV sweep for this.



Fortunately for us, Julian Love told how it was done and I added it below.

Third Hell Trail - “Textures”

Textures for the resource of the sorcerer look like this:



To be honest, I can't say exactly how it all blends together. But I want to take a couple of notes (guesses):
#one
03 is the alpha channel from 02. In addition to 04, no other texture has its own alpha channel.
# 2
I seriously began to dig, how did they make the texture of the liquid rise just above the current fill level. 04 and the three other small textures are used to draw the level.



# 3
If you look frame by frame, you will see a transparent sphere and I think that 01 is used as an alpha channel for it.
I do not understand why everything else is rendered later, but it seems to me that the game handles it anyway. (I think it is about the fact that the first layer is completely overlapped by further drawing and seems to be drawn in vain. Maybe it is drawn into the buffer to be used later, but it’s first in order. The animation from the bottom shows that the first frame is completely closed by the second. Approx. per. )



You have read almost to the end of the article. Simon is too sad. to write more, because he doesn’t like that he couldn’t find more information about blending textures. He hopes that Blizzard will hire him for the position of a sad angel sitting on the left side of the bubble. Then he can collect more cool chips right from the heart of art.

Addition # 1

I had the honor to get more details about the bubbles from Julian Love :

Textures are multiplied with each other. Do not mix. From here comes the whole complexity in the movement of color. Here's how the movement of the water line is handled. [...] Here is the formula for the alpha mask line of water:

a = tex1.a * tex2.a * 4

Also, the water line is deformed by UV, but it is very difficult to notice this distortion if you look at the sphere exactly from the front. ”
Since I do not have a lot of knowledge about shader code, I asked him what if “* 4” is used to brighten the texture, since multiplication darkens it very much. His answer was:
Yes, * 4 at the end brightens it back very significantly. We do the same with color, only use * 2. The color formula is as follows:

rgb = ((tex1.rgb * text2.rgb * 2) * text3.rgb * 2)

Each texture is actually an instance of the same texture, only each stage has a different offset, speed and scale of UV.

Thanks to these holy programs: D3TexConv v0.9b & MPQ Extractor & Blender . Without them, writing this article would be impossible.
MikieX mentioned some really nice shiny balls . I can not believe that this is just a sprite with heavy magic pixel shader. How cool is that? Apex has restored a bubble and it even has a slider for manipulating the fill level! He did it on Unity and you can see it here . Check it out!