Android : glowing/pulsing line/triangle

Question

I would like to create a simple Android app using Opengl ES 2.0 that is showing a simple shape (like line or triangle) that is glowing and pulsing like Nexus X logo in this video : http://youtu.be/jBKVAfZUFqI?t=59s

What should I look for?

So far I googled around for glowing effects and found techniques like "bloom" or "additive blending". Are they relevant here? how I would implement pulsing glow with them?

Any links to relevant works very appreciated Thanks!

P.S - I am very familiar with Android SDK; just started with OpenGL ES

Answer 1

Another cheaper solution would be to fake glowing by using static semi-transparent glow textures instead of creating the glowing effect through post process shaders.

You would then need to animate their transparency (and/or size) in order to achieve a pulsing effect similar to the Nexus logo.

An advantage to this approach is that you can use your favorite image editor to control the appearance of the glow and achieve a unique artistic look.

Answer 2

This is how people usually do it:

Create a framebuffer 1

Render your triangle, and all glowy things to this framebuffer 1, but also things that should occlude the glowers. Make sure depth testing is on.

Create another framebuffer 2 and bind this framebuffer 2. Now take framebuffers 1 texture and do a post processing effect on it, what you probably want to do is a gaussian blur.

Bind framebuffer 0 (the one that actually draws to the screen) Draw framebuffer 1s texture as a full screen quad Turn on blending, make the blending equation additive Draw framebuffer 2s texture as a full screen quad

You can achieve the pulsing in two way, either you can make the triangle less opaque when rendering to framebuffer 1, or you can modulate the resulting fragments from the gaussian blur step with some coefficient. Of course, the level of opaqueness and the color modulation would have to depend on some period of time, eg.

final static long pulseTimePeriod = 3000;
private long pulseTime = 0;

public void update(long delta) {
    pulseTime += delta;
    while (pulseTime > pulseTimePeriod )
        pulseTime -= pulseTimePeriod;

    float ratio = pulseTime / Float.valueOf(pulseTimePeriod);
    float val   = Math.cos(ratio * 3.14 * 2)*0.5+0.5;
    float coefficient = Math.pow(val, 2.0); //power makes it more pulsey
}

These two methods would look different from each other.

Answer 3

I have started with OpenGL ES 2.0. a few weeks ago. It really was hard!

If you just want to finish the work I would suggest to visit Android dev's web page on OpenGL and use the sample to draw the triangle.

Then for the effects I would look for a shader which implements them(Google it). I've done a search and looks like a pretty complicated thing, but maybe there's a easy way to work it out. Anyhow, when you get the shader just change it for the one the sample is using(You'll have to understand the basics of shaders).

That would be the quick way out. If you really want to understand what's going on use "Opengl Es 2 for Android: A Quick-Start Guide". It really explains everything clearly and step by step, it is the best I've found so far.