[OpenGL] My quest for glowy lines

[WILL]

(Click on thumbnails below to get a full sized view of the thumbnail images shown)
I'm on a mission of sorts and that mission is glowy lines!

Here is a screenshot from a Geography wars clone that uses the effect I'm trying to get.



I think I'm close, but I'm not quite there yet. Here is a screenshot of what I've got so far...



The core of my lines need to be white-er and the glow fade out a bit more. Then I'll have the visual appeal that I'm looking for. Now that you know what I'm trying to achieve, I'll explain what I'm doing in OpenGL.

My approach is as follows...

I'm using a small 32x32 (32-bit + alpha channel) texture to represent a glowy pixel. I'm then drawing that pixel, scaled down to size, for each point on the line I am drawing. Here is my exact texture I use.




Here is my code for the function...

procedure DrawGlowLine(X1, Y1, X2, Y2: Integer; ColorR, ColorG, ColorB: GLfloat; GlowTexture: TTexture);
var
 dx, dy, sdx, sdy, x, y, px, py : Integer;
procedure DrawDot;
begin
   DrawTintedParticle(px, py, 0,
            0.8, 0.075, // scale, alpha
            0, 32, ColorR, ColorG, ColorB, GlowTexture);
   DrawTintedParticle(px, py, 0,
            0.3, 0.3, // scale, alpha
            0, 32, ColorR, ColorG, ColorB, GlowTexture);
   DrawTintedParticle(px, py, 0,
            0.125, 0.9, // scale, alpha
            0, 32, (ColorR+2)/3, (ColorG+2)/3, (ColorB+2)/3, GlowTexture);
end;
begin
   dx := X2 - X1;
   dy := Y2 - Y1;
   if (dx < 0) then sdx := -1 else sdx := 1;
   if (dy < 0) then sdy := -1 else sdy := 1;
   dx := sdx * dx + 1;
   dy := sdy * dy + 1;
   x := 0;
   y := 0;
   px := x1;
   py := y1;
   if (dx >= dy) then
   begin
     for x := 0 to dx - 1 do
     begin
        DrawDot;

        y := y + dy;
        if (y >= dx) then
        begin
          y := y - dx;
          py := py + sdy;
        end;
        px := px + sdx;
     end;
   end
   else
   begin
     for y := 0 to dy - 1 do
     begin
        DrawDot;

        x := x + dx;
        if (x >= dy) then
        begin
          x := x - dy;
          px := px + sdx;
        end;
        py := py + sdy;
     end;
   end;
end;

Not very complicated, just a line drawing function substituting the pixel for the small glow texture. I draw the texture 3 times.

1) big colored fade for that glow effect
2) for more solid coloring
3) the core where it's a bit whiter to give it that neon-type effect

Now this effect as I've represented it, is not that bad, but it has 2 main flaws.

1) It's SLOW... If I drew many things on the screen, it would slow down my game on older hardware. In fact drawing these few lines even slowed down my simple tron clone running, on-screen, in the background.

2) Resizability; if I wanted to make the lines thicker, or even draw a shape that had was thicker than a single 'pixel' wide (ie my tron/snake guys you see one screen), it might not look as decent as it does my lines because of my raw calculations for scale and alpha + color scaling. (the part where I add 2 and divide by 3 to bias the color towards white)

Any ideas on how I can capture the original effect better? I'm willing to abandon the while DrawGlowLine procedure if there is a better, easier, faster approach.

[paul_nicholls]

It is a bit hard to see the effect you want as I can't see ANY graphics in your post except for the smiley! LOL

cheers,
Paul

[User137]

An Error Has Occurred!
It seems that you are not allowed to download or view attachments on this board.

So i can't see any of your images

But from code i assume that you are drawing little dots along the line. Faster method would be drawing 3 quads. You can still use 1 texture of a circular glow where border areas are completely black and center white, and then draw middle, start and end quads. To make it even faster you can do it triangle_strip from start to end.

You can draw it twice, first along Dist/Y and second along Dist/X so from front they cross like + sign.

[WILL]

Sorry guys, thought this feature actually was working.

Well here are the images linked directly instead of uploaded...

A Grid Wars screenshot...



My attempt screenshot...



Re: User137: How would your approach look? I'd likely have different looking ends would I not? And... How would I do this with a triangle_strip? Would that not look distorted as well?

Also, what kind of texture should I be working with? I mean while I was working away with my current tiny 32x32 textures I noticed that the more translucent I had it, the easier it was to make a faded line, but then I'd lose much of the solidity I had at the center core of my line. Is there some trick to getting the 'ideal' glow texture for this?

[WILL]

Ok I think I just found a means to do the effect I'd like without too much lag. Have a look at this link guys: http://prideout.net/archive/bloom/index.php#Sneaky

The technique I'm interested in here is the "Sneaky Bloom" effect as done in the sneaky.c source. I think this may be a lot faster and cleaner than my "glowy pixel" approach.

[User137]

Any questions?

You can make greatly different looking lines by changing the texture, i just showed the idea with help of Gimp and Paint. Mid section texture S-coordinates are 0.5.

For your lines you could use a texture that has bright center and outer circle more rapidly fading into black, would look more like glow.

[paul_nicholls]

Any questions?

You can make greatly different looking lines by changing the texture, i just showed the idea with help of Gimp and Paint. Mid section texture S-coordinates are 0.5.

For your lines you could use a texture that has bright center and outer circle more rapidly fading into black, would look more like glow.

that looks nice

cheers,
Paul

[WILL]

That does look pretty good. However I believe that as much as I can go that far with it, it will still fall short on one aspect. What if I want to make a larger object glow such as a filled rectangle or elliptical? I think that once I get to that point I'd be stuck, so I'm going to try another approach now.

The below is what I'd like to do...



I realize that I'd have to draw part of my scene to a couple of buffer surfaces then combine them to the existing screen, but in the end the cost of the effect would likely be cheaper this way.

The technique is here at this link: http://prideout.net/archive/bloom/index.php#Sneaky It's in C and may use something like GLUT so I'm a but at a disadvantage. How do I perform the type of blurring in OpenGL that they are doing? I've not been able to find(via google) any easy to understand list of functions or techniques other than alluded to terms and suggestions. I know what they are saying to do, I just don't know what functions will do the trick.

[chronozphere]

Yeah.. I suggest you use shaders for this, if you want good performance. Take a look at the bloom-effect and perhaps blur.

You probably need to render your geometry multiple times, like you said. Be aware that everything will be glowing (unless you add some geometry after applying the effect).
Especially the fonts shouldn't be too shiny because that makes them difficult to read.

[User137]

In the game you referred to, all glowy squares and objects were actually just simple textures which had the glow already made with a graphics program. No real effects were used in the game itself.

Would the shader solution work if you need some objects glow and some not?