Tag Archives: Bubbles

Hey, I'm Simon and I'm making a game!! :)
Support me: BUY & Demo on Steam

There are 3 things in the world I could look at forever: Fire, other People working and the Diablo 3 resource bubbles. I already fell in love with Blizzards art style like you maybe noticed in my article about their 2.5D trees. But today we’ll have a deeeep look at Diablos crystal balls and search for the truth.

Source: Diablo 3

They look so deep. So round. A delicious mix of blur and sharpness. Let me state my initial thought how this could be achieved (long story short: they’re both wrong. I’m on the woodway like we say Germany):

Woodway 1st
Take a polysphere, cut it half and pull some textures over the surface. Why is it wrong? Because i checked the ingame wireframe of the “bubble”. Guess what? It’s not a bubble! Here you can see my approach (red sphere) and the Diablo 3 mesh (green) which btw. contains only 218 tris instead of my 960.

Woodway 2nd
I asked Neox and he suggested to take a sphere, bake it into a normal map and do the rest with a shader. This is a good idea but i couldn’t find such a texture in the Diablo files. So why the hull do i waste your time with this nonsense?
Because mikiex posted a great example which is similar to Neox’ idea. I think this will be my next article. For now, just look at the image and see how great the world is wrapping around the sphere. But it’s not the way the devil went.

So let’s talk about the right way.

Hellway 1nd “UV Layout”
I was able to extract the “bubble” mesh and had a look at the UVs. And here’s how they look like:
The UVs are modified (stretched at the border, compressed in the center). Let’s watch what happens when we drop a checker pattern on the bubble and let the UVs move from left to right:
It maybe doesn’t look like a perfect sphere (more like a round hat) but since the border areas of the bubble are mostly covered by painted reflections or this sad stone angel, it works very well in my eyes. In fact, i think it looks awesome.

Source: Diablo 3


Hellway 2nd “Geometry”
But moving only one texture wouldn’t create this beautiful mix of motion & depth. Thanks to the D3 model viewer we can see that there’s not only one plane.
666 points for you, if you noticed that these textures contain the totally wrong color & pattern. As an old Diablo 2 player i searched for “Mana” in the files but in Diablo 3 the stuff of the Wizard is called: Arcane Energy. Mana is used by the Witch Doctor.
But i think they re-use the Mana-Bubble-Mesh since i can’t find any special geometry for the arcane sphere.

bb0x had i great question about the line which appears when your resources aren’t 100% full. This line isn’t bent and he mentioned that they maybe used a 2nd UV layout for this.

Lucky for us that Julian Love mentioned how it was done here.


Hellway 3rd “Textures”
The textures for the wizard resources look like this:

Source: Diablo 3

To be honest, i can’t say how exactly these are blended together. But i want to make some notes:

03 is the alpha channel of 02. Except for 04 none of the other textures does have an alpha channel.

I really dig how they let the fluid texture reach a bit above the actual filling level. 04 and the 3 other small textures are used for the level line.

Source: Diablo 3

If you look at it drawcall by drawcall you see a transparent sphere and i think 01 is used as alpha for it. I don’t get why the other stuff is rendered later, but i guess this isn’t how the game handles it.

Source: Diablo 3

You reached 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 the texture blending. He hopes that Blizzard hires him as a sad angel sitting on the left side of the bubble. Then he could gather more awesome stuff directly from the art heart.

Thanks to these holy programs: D3TexConv v0.9b & MPQ Extractor & Blender. Without i wouldn’t have been able to make this article.

Update 1
I had the honor to receive more details about the bubbles from Julian Love:

“The textures are all being multiplied together. Not blended. This is where all the color motion complexity comes from. It’s also how the motion of the water line is handled. […] Here is the formula for the water line alpha mask:

a = tex1.a * tex2.a * 4

Also, the water line is being deformed by the UVs, but you can’t easily see that distortion when you look at sphere straight on…”

Because i have not much knowledge about shader code, i asked him if the “* 4” is for brighten up the textures since multiply darkens them pretty much. His reply:

Yes, the *4 at the end brightens it back up significantly. We do the same thing with the color as well, only using *2. The color formula is

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

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

Update 2
MikieX mentioned a really nice link about shiny balls. Can’t believe that this is just a sprite with heavy pixel shader magic.
Update 3
How awesome is that? Apex re-coded the bubble and it even contains a slider to manipulate the fill level! It’s made with Unity and can be seen here. Check it out!
Update 4
mourelask re-coded the bubble too: It’s also made with Unity and can be seen here. And if you wanna know every detail about how he did it, read his new blog post!
Update 5
Another re-made bubble! This time it’s coming from Utamaru56 and can be downloaded here.

Update 7
Whoop-whoop! Another bubble incoming! This time it’s from Alice Hinton-Jones and looks very cool. Also, there are details about the making of this effect in her twitter-post.

Update 8
I did a small test and thought it might be a nice addition for this article. Like discussed above, for Diablo 3 the bubble was made by modifying the UVs which keeps the majority of the “deformation” in the center of the circular shape. But if you want to let it look more like a “real” sphere, you can modify the geometry instead of the UVs and the result you can see below:

Update 9
I got fantastic responses to Update 8 on Twitter which I need to share with you.

1. Turns out, Zerin Labs presented the trick (from Update 8) a long time ago and even with a full explanation how to create the geometry from scratch:

Source: Zerin Labs

2. Ben Golus showed how to use a pixel shader to deform the UVs and use only a single quad to get the same effect. And he even shared the shader code for those how want to try it out!

Source: Ben Golus on Twitter

3. We got another example, this time from Bruno Afonseca, how to make the same effect in a shader and we got a nice Unreal Material Graph! Super cool! :)

Source: Bruno Afonseca on Twitter

Update 10
Even more cool updates for you.

We got a nice earthy planet from Stelios:

Pete sent a good example for this technique besides planets and magical orb-spheres. Also, there is a nice discussion on his Twitter-thread with words like “equirectangular projection” … need to check the dictionary! :D

Source: Ball by Pete

Klemen shows some planets too :) Nice composition!

Update 11
Thanks to Tuatara for sharing their way of bulging UVs!

Source: Tuatara Tweet