Diablo 3 - Resource Bubbles

Original author: Simon Trümpler
  • Transfer
This article is a translation of Simon Schreibt's article “Diablo 3 - Resource Bubbles”.



There are three things in the world that I can look at forever: Fire, how others work and the realms of resources in Diablo3 . I already loved the Blizzard style, as you might have noticed in my article about their 2.5D trees . Today we are talking about something else. Today, we peer deeply into the Diablo crystal realms in search of truth.
(inside a lot of pictures)







They seem so deep. So round. A charming blend of blur and sharpness. Let me describe my first thoughts on how this could be achieved (in short: they are both wrong. I'm on a false path (woodway approx. Per.), As we say in Germany):

First false path


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



Second false path


I asked Neox what he thought and he suggested taking the sphere, baking it in the normal map and doing the rest in the shader. It was a good idea, but I could not find a similar texture in the Diablo files. So why the hell am I wasting your time on all this nonsense?
Yes, because mikiex posted a great example that is similar to Neox’s idea. I think this will be my next article . 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 solution.

First Hell Trail - UV Scan


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



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



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


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 a seasoned player in the old Diablo2, I searched for the term “mana” in the files, but in the Diablo3 resources of a sorcerer it is called Arcane Energy. Mana is used by a sorcerer.
Although it seems to me that they use a mesh from the mana bubble for this, since I could not find any special geometry under the arcane sphere.

In bb0xan excellent question arose about the line that appears when the resource is not 100% full. This line is not bent (not subject to UV distortion. Approx. Per.) And he mentioned that they probably use a second layer of UV scan for this.



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

Third Hell Trail - “Textures”


The textures for the sorcerer’s resource look like this:



To be honest, I can’t say exactly how it all mixes together. But I want to make a couple of notes (guesses):
# 1
03 is an alpha channel from 02. Apart from 04, no other texture has its own alpha channel.
# 2
I seriously started digging, how did they make the fluid texture rise just above the current fill level. 04 and the other three small textures are used to draw the level.



# 3
If you look frame by frame, you will see a transparent sphere and I think 01 is used as an alpha channel for it.
I don’t understand why everything else is rendered later, but it seems to me that the game handles this completely differently. (It seems to me that we are talking about the fact that the first layer is completely blocked by further rendering and seems to be drawn in vain. Perhaps it is drawn into the buffer to be used later, but in order exactly the first. The animation below shows that the first frame is completely closed by the second. Approx. per. )



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

Addition # 1


I was honored to get more bubble details from Julian Love :

Textures multiply with each other. Do not mix. From here comes all the 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 of the water line:

a = tex1.a * tex2.a * 4

Also, the water line is deformed using UV, but it is very difficult to notice this distortion if you look at the sphere exactly in front. ”
Since I don’t have a lot of knowledge about shader code, I asked him what if “* 4” is used to brighten the texture, since multiplication very much darkens it. His answer was:
Yes, * 4 at the end highlights him back very significantly. We do the same with color, just 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 UV scale.

Thanks to these holy programs: D3TexConv v0.9b & MPQ Extractor & Blender . Without them, writing this article would be impossible.
MikieX mentioned really nice shiny balls . I can’t believe that this is just a sprite with heavy pixel shader magic. How cool Apex restored the 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!

Also popular now: