Glowing line effect on GL_LINES

Started by
8 comments, last by Foobar of Integers 18 years, 2 months ago
I'm trying to give lines in my latest GL experiment a glow effect. Basically I'm drawing simple figures on the screen using GL_LINE_LOOP, I'm trying to give it that retro look by using nothing but lines (I've been playing quite a bit of Grid Wars lately) Anyway, I've considered doing it by turning on GL's line AA and iterating out (in both directions) from the original line and decreasing the r, g, b and alpha of the new line I'm drawing to give it a glowing look. It works, but for non-horizontal or non-vertical lines, it involves more math than I think should be necessary for a simple effect, and I'm trying to keep my code as quick as possible. My other idea was using GLSL, but that sort of melts my mind every time I look at it. So, I figure there's some trick I could use from within OpenGl that will yield the same effect without having to do an unnecessary amount of calculation. The problem is I'm not very familiar with GL, and I haven't been using it for all that long. Suggestions?
"ok, pac man is an old gameand, there are faces which is eatin up shits" - da madface
Advertisement
Well, a fairly low-tech way of doing blur effects is to render to a texture that's smaller than the viewport, and then stretch that texture over the whole viewport and rely on the built in texture filtering to blur everything (or you could render to a texture that's the right size already, then shrink it to produce smaller mip-maps, and stretch one of those over the viewport; I think that may give slightly better quality, although I'm not sure)

For the glowing part, you just need to render the line bright and sharp, then overlay a blurred and dimmer line (and repeat, if you want)

Four Tricks for Fast Blurring in Software and Hardware (requires a gamasutra login; gamasutra is an excellent resource though, so it's well worth registering)

John B
The best thing about the internet is the way people with no experience or qualifications can pretend to be completely superior to other people who have no experience or qualifications.
I've done that in the past, heres of screen shot of mine useing GLSL, If you would like to know how I did it I'd be happy to explain later on, kinda busy at the moment..

I seek knowledge and to help others whom seek it
The GLSL shot is *exactly* what I'm trying to do and I'd love to see how you did it, if it's not a problem

Is it difficult?

Oh, and I appreciate the texture idea, however I'm trying to avoid using textures as much as I can. The way I see it, if I'm rendering to a texture I might as well just load up a bunch of PNGs with the effect pre-rendered, though I might try it if I can't wrap my mind around that nifty GLSL trick.
"ok, pac man is an old gameand, there are faces which is eatin up shits" - da madface
You could render a quad across the width of the line, with a 1d texture that varies from transparent to white and back again (NOTE: it's probably easier to use just one dimension of a 2d texture; 1d textures aren't well supported by libraries etc)

That would definitely give a glowing line effect, but the ends might look a bit rough (as it would have flat ends).

Perhaps it would be better to have a circular "glowing spot" 2d texture, and draw three quads in a strip, one for each end and another in the middle, with the texture coords:

In the diagram below, the line is being drawn from point A to point B.

(0,1)  (.5,1) (.5,1) (1,1)----------------------|      |      |      ||Quad1 |Quad2 |Quad3 ||      A      B      ||      |      |      ||      |      |      |----------------------(0,0)  (.5,0) (.5,0) (1,0)


Or something similar using a triangle strip.

Then the middle of the spot would be stretched along the length of the line.

No shaders should be required.

Understand?

Mark
I like the "glowing spot" method and it has the advantage of me already knowing how to do that, I may end up using that. Thanks.

For now I'm going to try and play around with GLSL, I might as well learn it.
"ok, pac man is an old gameand, there are faces which is eatin up shits" - da madface
Its kinda confuseing, and you should know GLSL before really attempting it but here it is,

1. my method is a function by itself, useing GL_QUADS instead of lines, as the acctual region of the line is more then just a small region around the lines, useing 2 points, and a constant size, I create a box around the line, and pass the real line end points that exsist in the box to the shader useing Uniforms.

I use face culling as to not render both sides of the box as well, this means you get 1 pass for all pixels on the line.

in the shader:
I compute the acctual shape coordinates useing the ftransform function, while I also calculate 4 points, 2 being the pixel positions of the two end points, and 2 more being the 2 pixel positions of the two end points plus a vector uniform for your camera, for this I used the Y axis for the ModelView matrix. lastly I compute the pixel coord for the acctual pixel we are computeing.

now you have 5 pixel coords, you just find the nearest point on the line to the pixel coord your working at, and then use scales obtained by the distance from the P-(P+UpVector) to scale the fade of alpha computed by useing the distance to the line, then lastly I raised the alpha to a power to give it a shaper appearence.

ok seems really complicated now... so you might want to look for an alternative, or you can learn GLSL and try to understand what I just said... Even though I don't, good look to you, if you need clearification on something just ask, I know im not the best at expalining things like this...


Depending on your requirements, the glow spot method mentioned by markr might work out better, the GLSL version is only requiered if you need 100% 3d lines, meaning you can look down the length of them and they appear liek glowing points, and such. for instance if you only need to look at them from a 2d perspective, then alternitive method would probobly be better, the shader can be a killer on the system, took me 3 revisions of it to get it to run at a decent frame rate.

I seek knowledge and to help others whom seek it
I'm using a fully 2D world here.

Thanks for the shader method, but that's way above my head right now; I'll try something like that once I understand GLSL a little more. For now I'm just going to use the glowing spot trick.

If anyone's interested here's a screen of my work in progress, comments are welcome.

Screenshot

It's not very obvious from the picture but the red triangle (your "spacecraft") has a pretty nice looking trail when it's moving fast. It follows the mouse. Right now I only have an OS X build of it, but Windows isn't hard.
"ok, pac man is an old gameand, there are faces which is eatin up shits" - da madface
Looks pretty nice, I thought the GLSL shader was probobly a bit over kill for what you were working on but I thought I would share anyway.

Keep up the good work.

I seek knowledge and to help others whom seek it
The next thing I'm going to work on after more eye candy is to add some collision detection and some stuff floating around to shoot at. Likely it'll never become a full game (I haven't finished a full game since last june) but it'll be something fun to play around with.
"ok, pac man is an old gameand, there are faces which is eatin up shits" - da madface

This topic is closed to new replies.

Advertisement