I’m creating a magic orb for my 3D game, and I’ve been experimenting different effects to try to get to what I’ve imagined it to be. I found two great references, but I’m not sure how to replicate the effects.
The first one is this item in WoW (you can see the 3D model in the link).
- The external glow looks like a static texture on a billboard, but the billboard is always in front of the sphere and it clips with the rest of the model. I suppose it’s a plane billboard that gets projected in the direction of the camera with shader.
- The orb itself looks like a static texture on a sphere mesh.
- The yellow lines that keep rising to the top look like something that could be easily done either in a shader processing a noise or simply an animated texture (may come with the static texture on the mesh).
- Finally, there are some yellow glowing spots inside the sphere, and these are what are confusing me the most. They don’t seem to be on the sphere surface or inside the sphere. Their positions and rotations seem to exactly match the position and rotation of the external glowing billboard. Because these seem to match perfectly, I would assume it uses the same billboard system, but mapped to only have opacity on the glowing spots when the camera is looking at the item at certain angles (this being calculated in a shader). But if they used the same billboard system, they would risk getting in front of the handle details, so I think it may only be a billboard that gets render priority over the sphere and the sphere only.
I think I could replicate it doing what I said, but this seems way too complicated, so I can only assume I’m missing something here.
The second one is this weapon in FFXIV. I increased the FOV so I could see better how it works, so the video doesn’t show the weapon itself very well, but it does show what I want to know very well.
Both in the orb on the top of the staff and on the model of the staff itself, you can see blue / magenta glow on the borders of the weapon (blue on the orb, magenta on the staff). It looks like they’re simply animated textures pasted on top of the model’s mesh, and you can even see it is horizontally symmetric (the front part textures are the same as the back part textures, and they meet at the top). What really interests me is the fact that this glow texture will only show on borders of the model relative to the camera. So in the case of the orb, you’ll only see this glow as a circle that encompasses the projection of the orb from your current point of view, and the center will be completely transparent.
To try to replicate this, I’ve created a shader that calculates the dot product between the distance of the vertex to the camera and the normal of the vertex. If the dot product is low, I’m looking at a “border” relative to the camera, so I use high alpha for lower transparency to show the glow. If the dot product is high, I’m looking at a “center”, so I use low alpha for higher transparency. It worked perfectly for a perfect sphere, but not so much for other forms, since I get too little space with low dot product for parts that curve too drastically, resulting in little to no area with the glow effect and too low space with high dot product for parts that curve slowly, resulting in too much surface area with glow effects. I could do a few numerical tweaks to reduce this problem, but I don’t know how much I can prevent it.
Granted, I think I can see this effect too on the video I’ve posted, especially at 00:06~00:07, but I feel like my results are significantly worse than that (because of the issues above). So, because of how non-simple this logic is (it was only like 6 lines of shader, but I can’t help but think it could be easier) and because of the fact that I couldn’t achieve results as good, I suspect my solution is not right.
Could anyone give me some guidance as to how to replicate these?
Thank you so much!