Need idea to make gauge like diablo3

[GBear]

hi..

i wanna create gauge like following image

maybe it looks used shader..
but i will be slow with webgl to play on mobile

how can i make like following image with good performance..

please give me any tips..
thx.. 

[mattstyles]

It might not be so slow, you can do semi-realistic fire-like animations in javascript which will be performant, particularly over a small area, you just overlay with an image and you're done, but doing that on the shader would be better. Although I suspect you are worried about just adding more graphical work, rather than this piece in isolation being a problem.

If you're particularly worried about mobile then choose a different representation, the fire-like animation is all well and good for atmosphere but it isn't critical, its sugar, so, if you're on desktop (or even better, if you detect the device can handle it) so the glitzy animations and on lower-powered devices do not.

I don't know exactly how the gauges work but an animated gif (or at least, animated frames) would be most performant. You could place the animation behind a semi-transparent texture that is the globe and glass and maybe do something simple like control the height or the brightness of the animating frames to give an indication of how full/empty your gauge is. Colour transitions would also be an option here using a tint or another semi-transparent layer. You could even transition between different types of animating fire by using a cross-fade. It sounds fairly basic but I bet you could get it looking really nice (not as nice as a shader generated texture for sure but a whole heap less effort).

[GBear]

@mattstyles  thx.. mattstyles..

first i will create by shader .. maybe i will be used only on pc..

and mobile.. hmm.  if performance is not good.. i will be not animated gauge..^^

i will update soon  example

thx mattstyles