next »

[TobiasW]

Hello, everyone!

I am not a newbie when it comes to programming, but all these fancy graphical stuff is fairly new to me. I am always left in amazement when I see fancy Shoot'em ups, stuff like Geometry Wars, or Osmos for example - it's just beautiful, and I sadly don't even know how to make stuff glow.

So I guess the topics I should look into are shaders and particles? What about other effects, like dynamic light, lightning, fog, glowing and stuff I forgot to include here because I don't even know their names, what are they composed of?

What do you use? And can you recommend any tutorials? Books? Anything else I should read into or engage in to become better with this stuff?

Cheers,
Tobias

[imaginationac]

Particle generation is fairly easy way to do "fancy graphical stuff" without having to get into shader programming.

Most particle systems I've seen and used have two major components: an emitter and a particle type. The emitter is the source where particles are generated. Particle type are definitions of how a individual particle behaves and looks.

In creating an emitter, you can define the rate at which particles are created, life-span of particles, directionality (omni, stream, etc.). In defining particle types, you can either use on the fly drawing methods (make it a square with a 1 directional ramp) or use sprites.

If you're comfortable using Game Maker, I'd experiement using it's particle systems.

Fog/smoke: I've seen this done with a particle system, using only one sprite fairly well.

I can only theorize on the rest, having never implemented any thing with those, though realtime shadow systems are obviously tied to dynamic light (there's a tutorial on shadows in the Tutorials forum). Glowing could mean any number of things.

As for shaders, someone else is going to have to fill you in there. I only have a vague definition as to what shaders are in my head

Oh, messing around with transparency/alpha levels can get you cool effects. Those are probably the easiest to do.

[oahda]

Hah. I was just about to post a little screenshot of my particle system in the happy programmer room.
I haven't used any tutorials or anything. I just programmed an interface I liked, and then implemented the stuff. It's really not that hard. Particles don't have to be extremely advanced to look good (at least I like the look of my system at the moment). This is it:

[Saint]

Well.. The first step to creating crazy real-time stuff would be to learn GPU programming (shaders, that is) ... Modern APIs are moving away from fixed-function pipelines, and even if you are sticking to the older models it is always good to know how it fits together. Of course, you can do a lot of funky stuff without shaders so it is by no means a necessity, but if you are just looking to improve on general effects programming it is a good tool to have.

First of all, learn the basics. I used the Orange Book and Lighthouse3D to teach myself the basics, although I don't know what would be the best way to do it today. For HLSL, the DirectX SDK contains tons of useful demos, some of which are really basic, and for GLSL I suppose the Lighthouse3D tutorials would still do. It doesn't matter much as you only need it to teach you how to do setup.
http://www.lighthouse3d.com/opengl/glsl/

For advanced light simulations, your best bet is to look at research papers and simply learn how the physics work. If you can wrap your head around that, the code will work itself out. If the physics of different lighting models are what you're after, I'll see if I can dig out a few good books.

For common effects (DoF, blur, SSAO etc) you can consult the AMD and NVidia developer pages, they have demos showcasing some cool effects. Again, the DirectX SDK has some great demos.
http://developer.nvidia.com/page/directx.html
http://developer.nvidia.com/page/opengl.html
http://developer.amd.com/samples/Pages/default.aspx

Getting into specific effects, usually you will want to have experimented enough to figure out your own methods of achieving the effect you want - if for nothing else since you understand enough to be able to tweak them the way you want. If there is a specific effect you want to create, I find the "Game Programming Gems" and "GPU Gems" series of books to have some interesting examples, but other than that your best bet is to google the effect and hope someone has shared a method of doing it... Scouring research papers and presentations from conferences can also prove fruitful.

Hope it helped.

[Rob Lach]

Check out the Nvidia SDK
http://developer.nvidia.com/object/sdk_home

it has a bunch of examples of effects and some general good practices.

[bart_the_13th]

For flash games, there is somthin called pixelbender that can do shader stuff for flashgames.
Newestversion of flixel(it's awrapper for AS3) also support post processing effect to do some crazy stuff :D
Here's an example: http://flixel.org/flxbloom/

For 3D games, looks like there is a never ending list of special effect but generally those fx devided into two major categories, Material shaders and Post-processing shaders(I dont know about deffered shader, maybe it's the combination of both)

About particle, is there any algorithm to create a 'beam' type particle? I went through google only to find accelerated particle gun things(what it has to do with 3D games?)

[drChengele]

I agree with imaginationac - not all effects are accomplished by shaders (or, indeed, particles).

If you wish to work with the graphical fancy-shmancy stuff you will eventually need to learn a bit or two about shaders, yes. However, shaders are not the be-all end-all of "special effects".
b
"Glow effect", which seems to interest you, can be achieved without shaders or layers. You can get great glow effects by utilizing the charms of additive blending. Of course, "additive blending" may be considered a relic of fixed function pipelines, as indeed shaders can implement custom blending models and many more things. But for purposes of getting into special effect mindset, you might want to start small.

For example, the following screenshots are all very glowy and I guarantee that NONE OF THEM USE SHADERS.

[zacaj]

You can do a glow effect similar to bloom, draw your glowing stuff on a low res texture, then stretch it(so everything is blurry), and draw it over your screen with alpha blending

[Hima]

Like drChengele said, additive blending and particle effect should be enough to make your game pretty. You should try that first before spending time on shaders.

[drChengele]

Here's a quick tutorial on how to achieve a decent glow effect for sprites without using shaders. It requires that your rendering engine supports render states or blending states. OpenGL, DirectX, SFML (and I think SDL) all support render states.

The method is to draw a sprite normally, and then draw a special sprite glow texture over the sprite.

To create this glow texture follow these steps:

First, take the texture of the sprite you wish to surround in glow. Open it in GIMP. Save it as a copy, say instead of sprite.bmp save it as sprite_glow.bmp.

Fill all the opaque portions of the sprite with white, and all the transparent portions with black. *

_{*Since most sprites have a "mask" color, this should be easy. First make sure your primary color in GIMP is white, and your "background color" is black. Just select all the transparent parts using the magic wand tool, and then press Ctrl-, to fill with back color. Then hit Ctrl-I to invert the selection and press Ctrl-. to fill the "inside" of the sprite with fore color. If you have a sprite with a variable per-pixel alpha, this will not work, but then the glow method described in here would probably not work all too well either.}

You should now have a white sprite silhouette on a black background.

Select the entire image (Ctrl-A). In the main menu go to Filters->Edge Detection->Difference of Gaussians.

When you get the dialogue, select Invert, Normalize, Preview on, and experiment with border values until you are satisfied with the glow. Radius 1 should be 0, and Radius 2 should be anywhere between 2.0 to 15.0, depending on how large you want your glow.

Voila! You now have your glow sprite. Now all that's left is to use it in-game to get the glow effect.

In-game, when ever you render the regular sprite, you ALSO render the glow sprite over it, with the exact same parameters (location, scaling, etc.) except the glow sprite's blending method must be set to additive blending.

The very, very beautiful thing about this method is the following: you can customize the glow in brightness and color by adjusting its alpha and color modulations when rendering it. Change the color and you can have red, green, blue, or yellow glow. Higher alphas gives better glow. Changing alpha dynamically can create a wobbly or pulsating glow.

Full alpha glow too weak for you? Draw the glow texture TWICE. Due to the way additive blending works, and the gradient of Difference of Gaussians, this will act like increasing the "intensity" of the glow.

A caveat for advanced users: if you intend to render a lot of sprites with the glow effect on, you should probably bunch your "base" sprites in a single layer, and their "glow texture" draws in another, to avoid the overhead of constant changing of render states.

Using these glows can also grant you additional benefits. You could also perform a "color to alpha" transformation on a texture in-game (which exceeds the scope of this tutorial) and render them with black color modulation to get a "black glow" around the sprites you wish, which is a very cool effect.

Hope this is helpful.

[TobiasW]

First of, thanks for all the replies! TIGForums, as helpful as always...

Particle generation is fairly easy way to do "fancy graphical stuff" without having to get into shader programming.

[..several examples..]

Thought so! So, particle systems will it be. I'm not into Game Maker, but I guess there are lots of tools for previewing particle effects floating around in the net.

Oh, messing around with transparency/alpha levels can get you cool effects. Those are probably the easiest to do.

Heh yes, I've done this before by just messing around. Can lead to pretty nice results indeed!





@Skomakar'n:
Looks nice indeed!

First of all, learn the basics. I used the Orange Book and Lighthouse3D to teach myself the basics, although I don't know what would be the best way to do it today. For HLSL, the DirectX SDK contains tons of useful demos, some of which are really basic, and for GLSL I suppose the Lighthouse3D tutorials would still do. It doesn't matter much as you only need it to teach you how to do setup.
http://www.lighthouse3d.com/opengl/glsl/

The Orange Book looks pretty solid for shaders. Though, since I am pretty new to 3D too, I thought about buying a book about general OpenGL first - I currently have my eye on the OpenGL SuperBible(url]. Concerning LightHouse - the website talks about "reading the OpenGL 2.0 and GLSL official specs". Was there much change between 2.0 and 3.x concerning shaders?

If the physics of different lighting models are what you're after, I'll see if I can dig out a few good books.

Not yet, maybe later - so much other stuff in this thread to try out first. Thanks for the offer!

For common effects (DoF, blur, SSAO etc) you can consult the AMD and NVidia developer pages, they have demos showcasing some cool effects. Again, the DirectX SDK has some great demos.
http://developer.nvidia.com/page/directx.html
http://developer.nvidia.com/page/opengl.html
http://developer.amd.com/samples/Pages/default.aspx

Wow, these look really nice. Thanks!

The GPU Gems you mention seem to be especially useful - since part 1 is online available, I could look into it right away

Scouring research papers and presentations from conferences can also prove fruitful.

Yeah... so far it's really hard for me to understand most theoretical presentations. That's one of the reasons I decided to work harder on understanding all the stuff which I dismissed before as "too difficult". I hope "practice makes perfect" also applies here, because that's what I will do a lot now.

Check out the Nvidia SDK
http://developer.nvidia.com/object/sdk_home

it has a bunch of examples of effects and some general good practices.

Will do. Though I'm not sure how much it will help me, having an ATI Radeon - well, I guess not all of their effects will be Nvidia-only.

For flash games, there is somthin called pixelbender that can do shader stuff for flashgames.

Pixelbender looks crazy indeed! But it isn't hardware accelerated as of now, is it?

About particle, is there any algorithm to create a 'beam' type particle? I went through google only to find accelerated particle gun things(what it has to do with 3D games?)

What do you mean?

You can do a glow effect similar to bloom, draw your glowing stuff on a low res texture, then stretch it(so everything is blurry), and draw it over your screen with alpha blending

Sounds pretty straightforward, thanks for the idea! I will try it out later.





@drChengele:
Wow, thanks for the great tutorial! I really didn't anticipate that!

When you get the dialogue, select Invert, Normalize, Preview on, and experiment with border values until you are satisfied with the glow. Radius 1 should be 0, and Radius 2 should be anywhere between 2.0 to 15.0, depending on how large you want your glow.

The smaller Radius 2 is, the bigger the glow, do I interpret the result right? Because the black part gets bigger with bigger radius, and therefore the white part smaller - which makes the glow effect smaller in the middle?

And afterwards I have to fill the outside areas with black, so it doesn't impact on the outside of my sprite?
Silhouette before:

Silhouette after:

(Or am I using the Difference of Gaussians wrong?)

Anyway, after filling with black it glows kind of nice, if not a little too much when I use no alpha (I'm currently trying it out in Photoshop). Although I have a per-pixel alpha values on my source sprite, luckily only for the edges. Would there be another method for inner glow which can deal with per-pixel alpha values too?

[Saint]

The Orange Book looks pretty solid for shaders. Though, since I am pretty new to 3D too, I thought about buying a book about general OpenGL first - I currently have my eye on the OpenGL SuperBible(url]. Concerning LightHouse - the website talks about "reading the OpenGL 2.0 and GLSL official specs". Was there much change between 2.0 and 3.x concerning shaders?

Quite a lot actually. Well... Sort of. The entire OpenGL SDK is getting slimmed down, fixed-function support is deprecated and shader syntax is changed to represent that... Although you can still use the old syntax unless you specifically ask for GLSL version 1.4 (which is done with a preprocessor command in the shader). If you're interested, there are some good overviews of what is changed over at the OpenGL homepage.

I personally learned most of my GL from tutorials and try to keep myself updated by skimming through the changes in the spec, I prefer not to spend money on GPU programming books that only describe the API as the subject changes so quickly. On the other hand, if you find a book to be a better reference for basic stuff such as manipulating geometry in 3D space, then you should probably go with that - just expect to use it as such and not as an up-to-date reference about SDK features.

As for GLSL, last I checked the language is looking more and more like CG/HLSL so again - any book probably contains a lot of deprecated information. But that is all just some semantics tacked onto a system that is almost exactly the same across SDKs. As long as you understand that system you don't have to worry that much about changes to the syntax - you can use any version of any shading language to learn it, even the assembly-like low-level shading languages.

Hope that makes sense, it's quite late and I sadly do not have time to get into details right now =/

[Rob Lach]

Will do. Though I'm not sure how much it will help me, having an ATI Radeon - well, I guess not all of their effects will be Nvidia-only.

Technically everything they do should be able to be done on both. They release these as best practices and optimizations for nvidia gpus.

[drChengele]

Wow, thanks for the great tutorial! I really didn't anticipate that!

When you get the dialogue, select Invert, Normalize, Preview on, and experiment with border values until you are satisfied with the glow. Radius 1 should be 0, and Radius 2 should be anywhere between 2.0 to 15.0, depending on how large you want your glow.

The smaller Radius 2 is, the bigger the glow, do I interpret the result right? Because the black part gets bigger with bigger radius, and therefore the white part smaller - which makes the glow effect smaller in the middle?

And afterwards I have to fill the outside areas with black, so it doesn't impact on the outside of my sprite?
Silhouette before:

Silhouette after:

(Or am I using the Difference of Gaussians wrong?)

Anyway, after filling with black it glows kind of nice, if not a little too much when I use no alpha (I'm currently trying it out in Photoshop). Although I have a per-pixel alpha values on my source sprite, luckily only for the edges. Would there be another method for inner glow which can deal with per-pixel alpha values too?

I am sorry, it appears I made a mistake in my tutorial. You got the silhouette correctly - however, the sprite you have after processing it with Difference of Gaussians seems to have made the gradient go inward instead of outward. I wanted to provide you with an "outward glow" method. I think you need to increase Radius 1 for that and keep Radius 2 to zero, after all.

I also recommend you to enlarge your sprite's black edges to accomodate the outward glow. If you do so, I recommend you do it for the base sprite as well because they should be the same size.

The higher the number you type in a radius, the larger the glow. It is the number of pixels that the DoG will look for. So if you want to have an outer glow of up to 16 pixels, you need to set Radius to 16.0 (and also you need to ensure your sprite's opaque portions are at least 16 pixels away from texture edges).

I didn't want to get too much into details, but you can indeed have this work with per-pixel alpha. The silhouette texture actually needs to correspond to the alpha channel, it's that simple. So what is fully opaque should be white in the silhouette, what is fully transparent in the sprite, should be black, and all the degrees in between. Due to the way Difference of Gaussians works, you might need to manually correct some values, but you will see for yourself.

Unfortunately I have no GIMP at this machine at this moment, but I promise to put up some graphic tutorials in several days.

As for your shader related questions, I can only tell you that when I wanted to learn HLSL (DirectX counterpart to GLSL) I found appallingly little structured tutorials on the internet. If you hit a snag, ask away here and we'll try to help as best we can.

I might as well make my own tutorial on that, too, some day (when I feel my grasp is sufficient for the task).

[bart_the_13th]

Todo an outward glow in GIMP, based from your picture, I'll say selecting the black part then do any blur filter(I prefer the motion blur>zoom blur>blur outward) will work nicely
BTW,in GIMP, there's a nice feature in the filter menu(i think it's in the filters>artistic) called "softglow". It will give you good bloom effect in only a couple of mouse clicks.

[drChengele]

Just wanted to say I finally got around to making some actual screenshots and posting the tutorial proper in tutorials section: http://forums.tigsource.com/index.php?topic=14768.0

Hope it's of some use.