www.jpct.net

jPCT - a 3d engine for Java => Support => Topic started by: paulscode on December 05, 2008, 04:31:01 am

Title: How to make things glow
Post by: paulscode 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!
Title: Re: How to make things glow
Post by: EgonOlsen on December 05, 2008, 12:51:13 pm
Somehow like this: http://www.speedydragon.de/npc?id=29364#t=2 (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.
Title: Re: How to make things glow
Post by: paulscode 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!
Title: Re: How to make things glow
Post by: paulscode 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
Title: Re: How to make things glow
Post by: EgonOlsen 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.
Title: Re: How to make things glow
Post by: paulscode 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  ;))
Title: Re: How to make things glow
Post by: paulscode 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):
(http://www.paulscode.com/images/tmp/GlowWindow.jpg) (http://www.paulscode.com/images/tmp/WhiteGlow.png)

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/ (http://www.paulscode.com/source/Glowing/)

Am I missing a step somewhere, or do I need to use a different image format or something?
Title: Re: How to make things glow
Post by: EgonOlsen 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 (http://www.jpct.net/download/tmp/alpha.png)
Give that a try and see if it works better.
Title: Re: How to make things glow
Post by: paulscode 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)  :-[
Title: Re: How to make things glow
Post by: fireside on December 07, 2008, 03:17:01 am
Looks pretty good.  Nice model, too.
Title: Re: How to make things glow
Post by: paulscode 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.
Title: Re: How to make things glow
Post by: paulscode 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.
Title: Re: How to make things glow
Post by: EgonOlsen 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.
Title: Re: How to make things glow
Post by: paulscode 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 (http://www.paulscode.com/source/Glowing/FireflyViewer/)  (Source Code (http://www.paulscode.com/source/Glowing/FireflyViewer/FireflyViewerSource.zip))
Title: Re: How to make things glow
Post by: paulscode 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
Title: Re: How to make things glow
Post by: fireside on December 09, 2008, 06:24:50 pm
Very cool.  It looks better than the first, although the first looked pretty good also.  I thought.  I saved the source in case I get far enough to actually worry about special effects.  The main one I want to learn is the particle system but I'm kind of stuck right now with getting my path finding to work in real world coordinates. 
Title: Re: How to make things glow
Post by: EgonOlsen on December 09, 2008, 07:56:22 pm
I'm kind of stuck right now with getting my path finding to work in real world coordinates. 
This is quite of topic but maybe you don't have to use real world coordinates. I'm used to use a grid representation of the world instead. That makes things easier to handle IMHO. Paradroidz as well as Robombs are/were all grid based with some interpolation in world coordinates on top.
Title: Re: How to make things glow
Post by: fireside on December 10, 2008, 12:45:09 am
Yeah, that's pretty much what I'm doing, I think.  I'm just having trouble with the interpolation.  It's getting closer.  It worked for just clicking and moving the full distance, but now I'm trying to get the dragon to follow the grid points and it only works half the time for some reason.  That's normal for me.  Eventually I'll figure out what I did wrong.
Title: Re: How to make things glow
Post by: raft on August 18, 2010, 05:45:34 am
nice work paul :) can i use your glow texture in my game ?
Title: Re: How to make things glow
Post by: paulscode on August 18, 2010, 11:23:15 am
can i use your glow texture in my game ?
Sure thing.
Title: Re: How to make things glow
Post by: zammbi on August 18, 2010, 08:36:39 pm
Any idea why its doing this?
(http://www.imageupload.org/thumb.php?id=E8EF_4C6C27CB) (http://www.imageupload.org/share.php?id=E8EF_4C6C27CB)

Its basically the same code/images but just in my engine. Does the same thing in hardware mode too.
Title: Re: How to make things glow
Post by: paulscode on August 18, 2010, 10:08:55 pm
I've seen that before, but its been a while since I worked on this, so I don't remember what the cause was.  It seems like you have transparency, but the alpha channel isn't coming through correctly.  Sorry I can't be any more helpful than that, though.
Title: Re: How to make things glow
Post by: EgonOlsen on August 18, 2010, 10:10:47 pm
To make jPCT use a texture's alpha channel, you have to use one of the Texture(...., <boolean>) constructors with <boolean> set to true. Maybe that is what's missing?
Title: Re: How to make things glow
Post by: raft on August 19, 2010, 05:15:16 am
can i use your glow texture in my game ?
Sure thing.
cool, thanks ;D
Title: Re: How to make things glow
Post by: zammbi on August 19, 2010, 07:32:23 am
Sweet got it working and its looking great.