Author Topic: How to make things glow  (Read 16149 times)

Offline paulscode

  • double
  • *****
  • Posts: 863
    • View Profile
    • PaulsCode.Com
How to make things glow
« on: December 05, 2008, 04:31:01 am »
I was wondering what might be the best way to make something appear to glow (such as a lightbulb).  The idea I had would be to strategically place a few light sources right outside the surface of the object (maybe only one light source would be needed if viewing the object from just one side).  More would be needed for different shapes, such as for cylinders.

Is this a good idea for making an object glow, or is this normally done a different way that I haven't considered?

Also, how much do multiple light sources affect performance (i.e., is there a general rule of thumb for how many would be the maximum number one should use)?

Thanks in advance!

Offline EgonOlsen

  • Administrator
  • quad
  • *****
  • Posts: 12295
    • View Profile
    • http://www.jpct.net
Re: How to make things glow
« Reply #1 on: December 05, 2008, 12:51:13 pm »
Somehow like this: http://www.speedydragon.de/npc?id=29364#t=2?

In that case, use a billboarded quad with an appropriate texture (and maybe with an alpha channel) with additive blending placed in the center of the glowing object.

Offline paulscode

  • double
  • *****
  • Posts: 863
    • View Profile
    • PaulsCode.Com
Re: How to make things glow
« Reply #2 on: December 05, 2008, 01:34:26 pm »
I can definitely see how a texture with transparency could create a nice "lit fog" type of effect.  Then to make it so the glowing object lights up the things around it, I'd still need to use light source(s).  I'll just experiment a little with this to try and come up with something that looks nice.  Thanks for the link!

Offline paulscode

  • double
  • *****
  • Posts: 863
    • View Profile
    • PaulsCode.Com
Re: How to make things glow
« Reply #3 on: December 05, 2008, 11:15:54 pm »
Another question.  What is a billboard quad, and how is one set up?  Is that like four planes that intersect in the middle or something, or is it something that works like a regular billboard which is always oriented toward the camera?  The latter wouldn't work so well, I don't think, for shapes more complicated than a sphere unless the camera only moved in more or less 2 dimensions (say you wanted to look at a cylindar from somewhere near one of it's ends, for example).  I'm thinking using multiple intersecting planes would be better in a case like that.

Anyway, the whole glowing thing is a completely new concept to me, so I'm just trying to get a feel for it.  Sorry if I sound a little ignorant.  ;D

Offline EgonOlsen

  • Administrator
  • quad
  • *****
  • Posts: 12295
    • View Profile
    • http://www.jpct.net
Re: How to make things glow
« Reply #4 on: December 05, 2008, 11:29:57 pm »
A bill boarded quad are two triangles forming a quad. Because it's bill boarded, you don't need intersecting planes, because the quad always faces the camera. That combined with a texture that fades into black to the borders and additive blending may create a reasonable looking glow effect.

Offline paulscode

  • double
  • *****
  • Posts: 863
    • View Profile
    • PaulsCode.Com
Re: How to make things glow
« Reply #5 on: December 06, 2008, 12:45:47 am »
Ah, gotcha.  I will probably have to impliment my own automaticly-facing-the-camera code for situations where the object wasn't more or less the same dimensions from all viewable sides, such as in the cylindar example I mentioned (you'd only want the "glow" object to rotate toward the camera on the cylindar's length axis, not in all three dimensions).  I suppose I could just ensure that all my glowing objects are more-or-less roundish.  Or I could make them "blobby" so that I could use multiple roundish billboarded "glow balls" (I know - my terminology totally wrong here  ;))

Offline paulscode

  • double
  • *****
  • Posts: 863
    • View Profile
    • PaulsCode.Com
Re: How to make things glow
« Reply #6 on: December 06, 2008, 11:49:15 pm »
I'm having a little trouble getting transparency to work properly.  Hopefully someone can see what I am doing wrong.

Ok, so first, I created a .png image in Photoshop for the glow effect.  Here is a screen shot, showing that the image has transparency (click on it to download the actual png image):


The JavaDocs say that a texture can have an alpha channel for transparency when using OpenGL hardware or OpenGL software modes.  Does a .png image qualify, or is there another format I should use?

Next I load the texture into jPCT, specifying that there is an alpha channel:
Code: [Select]
        texturePath = "Textures/WhiteGlow.png";
        TextureManager.getInstance().addTexture( "Firefly Glow",
                            new Texture( getClass().getClassLoader().
                                         getResourceAsStream( texturePath ),
                                         true ) );

I use OpenGL software mode:
Code: [Select]
        buffer = new FrameBuffer( width, height, FrameBuffer.SAMPLINGMODE_NORMAL );
I create the glow Object3D:
Code: [Select]
        shine = new Object3D( 2 );
        float offset = 200 * scaler;
        float zoffset = 40 * scaler;
       
        shine.addTriangle( new SimpleVector( -offset, -offset, -zoffset ), 0, 0,
                           new SimpleVector( -offset, offset, -zoffset ), 0, 1,
                           new SimpleVector( offset, offset, -zoffset ), 1, 1,
                           TextureManager.getInstance().getTextureID(
                                                             "Firefly Glow" ) );
        shine.addTriangle( new SimpleVector( offset, offset, -zoffset ), 1, 1,
                           new SimpleVector( offset, -offset, -zoffset ), 1, 0,
                           new SimpleVector( -offset, -offset, -zoffset ), 0, 0,
                           TextureManager.getInstance().getTextureID(
                                                             "Firefly Glow" ) );
        shine.setBillboarding( Object3D.BILLBOARDING_ENABLED );
        shine.setTransparency( 0 );  // I tried various different values here.
        shine.setTransparencyMode( Object3D.TRANSPARENCY_MODE_ADD );
        shine.build();
        world.addObject( shine );

The texture seems to act like a normal object with transparency (i.e. it is not taking into account the .png image's transparency).  Here is an applet demonstrating the undesireable result:

http://www.paulscode.com/source/Glowing/

Am I missing a step somewhere, or do I need to use a different image format or something?

Offline EgonOlsen

  • Administrator
  • quad
  • *****
  • Posts: 12295
    • View Profile
    • http://www.jpct.net
Re: How to make things glow
« Reply #7 on: December 07, 2008, 12:03:02 am »
Are you sure that you are using the latest version of jPCT for this test case? I re-ran my own test case for alpha on the software renderer and it works just fine. Using PNG as image format is fine. I've uploaded a png which definitely works in my test case here: http://www.jpct.net/download/tmp/alpha.png
Give that a try and see if it works better.

Offline paulscode

  • double
  • *****
  • Posts: 863
    • View Profile
    • PaulsCode.Com
Re: How to make things glow
« Reply #8 on: December 07, 2008, 12:24:13 am »
OMG, you were right, I was referencing an older version of jPCT I had uploaded.  Sorry about that, it works now (see the above applet)  :-[

Offline fireside

  • double
  • *****
  • Posts: 607
    • View Profile
Re: How to make things glow
« Reply #9 on: December 07, 2008, 03:17:01 am »
Looks pretty good.  Nice model, too.
click here->Fireside 7 Games<-

Offline paulscode

  • double
  • *****
  • Posts: 863
    • View Profile
    • PaulsCode.Com
Re: How to make things glow
« Reply #10 on: December 07, 2008, 04:05:08 am »
Thanks.  I made the model initially in Sketchup, and did the fine-tuning and texturing in Max.  I still need to work on reducing the poly count, though.

Offline paulscode

  • double
  • *****
  • Posts: 863
    • View Profile
    • PaulsCode.Com
Re: How to make things glow
« Reply #11 on: December 07, 2008, 03:49:55 pm »
One thing I've noticed is that the glowing effect only looks good when looking at it from the direction of a light source.  From the other direction, it fades away.  I'm going to try adding a light source and write a billboarding behavior for it so that it is always positioned between the billboarded quad and the camera.  That should hopefully keep the "glow-ball" shining from any angle you look at it from, and it will also make it so the glowing effect actually lights up the surrounding scene.

Offline EgonOlsen

  • Administrator
  • quad
  • *****
  • Posts: 12295
    • View Profile
    • http://www.jpct.net
Re: How to make things glow
« Reply #12 on: December 07, 2008, 04:07:38 pm »
Try to disable lighting on the bill board (Object3D.setLighting(...)) and set white as an additional color, so that the actual lightsources have no influence anymore.
« Last Edit: December 07, 2008, 08:10:18 pm by EgonOlsen »

Offline paulscode

  • double
  • *****
  • Posts: 863
    • View Profile
    • PaulsCode.Com
Re: How to make things glow
« Reply #13 on: December 07, 2008, 06:50:20 pm »
Try to disable lighting on the bill board (Object3D.setLighting(...)) and set white as an additional color, so that the actual lightsources have to influence anymore.
That worked nicely, Egon, Thanks!

I also added an actual light-source to the firefly and tinkered around with colors.  I feel like I have a good understanding of how to make something glow now.  Thanks for all the help.

Here is a working example and source code, for anyone who is interested:

Demo Applet  (Source Code)
« Last Edit: December 13, 2008, 01:31:38 pm by paulscode »

Offline paulscode

  • double
  • *****
  • Posts: 863
    • View Profile
    • PaulsCode.Com
Re: How to make things glow
« Reply #14 on: December 09, 2008, 12:17:36 am »
I removed the work-around from the above applet and source code, since the billboarding bug is now fixed.  I also removed an unnecessary call to setOrigin().  I know it is only a demo applet, but I figure if anyone is going to learn from it, it should at least be written correctly ;D