1
\$\begingroup\$

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

\$\endgroup\$
3
  • \$\begingroup\$ What do you know about within OpenGL ES, do you know about Shaders? \$\endgroup\$
    – vallentin
    Nov 6, 2013 at 0:59
  • \$\begingroup\$ @Vallentin yes, i have read OpenGL ES 2 for Android: A Quick-Start Guide and now im in the middle of OpenGL ES 2.0 Programming Guide \$\endgroup\$ Nov 6, 2013 at 8:06
  • \$\begingroup\$ Cool webpage you have btw. \$\endgroup\$
    – Herp
    Mar 4, 2014 at 11:02

3 Answers 3

2
\$\begingroup\$

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.

\$\endgroup\$
1
  • \$\begingroup\$ If you only want a single glowy thing, in 2d space (like menus, as in the featured video clip), I think that this way is much better. \$\endgroup\$
    – Herp
    Mar 4, 2014 at 12:24
1
\$\begingroup\$

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.

\$\endgroup\$
-3
\$\begingroup\$

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.

\$\endgroup\$
1
  • 3
    \$\begingroup\$ This answer doesn't actually say anything useful about how to accomplish the desired effect. \$\endgroup\$ Mar 4, 2014 at 0:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .