iOS / GLES2: How to achieve Glow Effect

Question

I have a compass style needle, free to spin.

I need it to glow when it approaches a certain orientation, say 55 degrees.

I want to have NeedleView subclass UIView, so I can manipulate (NeedleView*)needleView as if it was a UIView, just have a couple of extra methods - (void) feedAngle: (float) theta; - (void) feedGlow: (float) glow_01;

doing a bit of research, I have found that the common technique is to take a greyscale copy of the needle's image, blur it, save it as a GL texture, and then wrap it onto a quad that sits behind the actual needle's quad.

then I am a bit woolly....

I guess I set the RGBA on the corner points to be (r,g,b) of my desired glow colour, a=glowFactorForThisFrame

and then I set glBlendmode to something appropriate

and then I draw the textured quad for the blur

what I want is something where Alpha is 1 everywhere on the original needle, but it bleeds gradually to complete transparency as we move further away

...

for a start, I would like to find some code that takes care of blurring a greyscale bitmap, I would rather do this from code than in photo shop. (I realize this would take a lot of time on an actual device, so maybe I can calculate it the first time the app is run, save it to file, and subsequently just load from file)

secondly, I'm very sketchy on the precise details of what I have to do.

could someone help me in on either of these points?

Related: http://stackoverflow.com/questions/6683822/ios-applying-a-rgb-filter-to-a-greyscale-png — P i, Jul 14 '11 at 18:54

score 1 · Answer 1 · edited May 23 '17 at 10:24

1

If you use drawRect for your drawing your needle you could possible do something like this:

Is there an easy way or library available to let text glow?

edited May 23 '17 at 10:24

Community

1
1

answered Apr 26 '11 at 06:01

Steven Veltema

2,140
15
18

score 0 · Answer 2 · answered Apr 26 '11 at 06:01

0

You could create the glow around the needle's image in Photoshop. Just replace the image in the app at runtime when glow is turned on.

answered Apr 26 '11 at 06:01

Todd Hopkinson

6,803
5
32
34

I need to smoothly transition between not glowing and totally glowing. also I would rather move as much work into the code as possible, as this gives a lot of flexibility for changing UI later – P i Apr 26 '11 at 06:40
Understood. However, as for me, sometimes there's a balance to strike, where quick and dirty on the inside gets you fast and perfect results. If this happens to be the case, achieving the smooth transition is achieved by adding the glow-needle graphic with an alpha of zero over the top of the normal needle, then simply changing alpha to 100% over a timed animation. Very short and sweet. The effect will be just as good as code only. – Todd Hopkinson Apr 26 '11 at 16:54

score 0 · Accepted Answer · answered Jul 13 '11 at 18:28

I experimented with a lot of approaches here.

basically I neeed two images; one glowing and one not.

then I can draw them as CALayers on top of one another, and hijack CADisplayLink, setting

glowLayer.opacity = glowFac;
dullLayer.opacity = (1 - glowFac);

I also played with fiddling around in GL shaders, passing the glow factor as a uniform, but this is a ton of code to do basically the same thing.

NB I needed to find a graphic artist to 'glow' the image

iOS / GLES2: How to achieve Glow Effect

3 Answers3

Linked