Welcome Guest [Log In] [Register]
We hope you enjoy your visit.


You're currently viewing the Ultimate 3D Community as a guest. This means that you can only read posts, but can not create posts or topics by yourself. To be able to post you need to register. Then you can participate in the community active and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.

Join our community!

If you are already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
Flashlight Example; need one
Topic Started: Jun 17 2013, 01:55 AM (1,651 Views)
Rockin
Member Avatar
Turkey
[ *  *  * ]
Hello everyone.
I just need an example about Flashlight. I did try whatever i can but i haven't get any good result yet. So asking you the best way i guess.

I'm trying to do something like this
http://www.visualwalkthroughs.com/halflife2/episodeone/lowlife/6.jpg
If you can make an example about that or at least teach me how i can, that would be so good !
thanks everyone anyway..
Edited by Rockin, Jun 17 2013, 01:56 AM.
Luftwaffe Ground Forces
Offline Profile Quote Post Goto Top
 
Gandalf20000
Member Avatar
Geek
[ *  *  *  *  *  * ]
That's a somewhat tricky one to pull off. One way is to use the projective texture shader from the Tech Demo. Unfortunately, the real master with projective textures is Skarik, who isn't on much.

The plus side is that your lighting will almost certainly be per-pixel. The downside is that it's very tricky to use and requires you reimplement any shader effect to also allow projective lightmapping. Using a projective lighting/shadow mapping shader, project the flashlight texture onto the scene. In the shader, use traditional lighting methods (multiply the dot product of the surface normal and the light direction by the light color, or the texture in this case) to calculate lighting for the flashlight and for the scene. Add them together, then multiply the final lighting by the texture and color of the model. It's a pain, especially fiddling with the projection matrix to get the projective texture coordinates.

If you want to try it this way, some research on shadow mapping might be helpful.

The alternative is easier, but it's not as pretty. It is similar to deferred shading (which U3D users can cheat somewhat), and it requires two passes and a post screen shader:

  • Render the scene to a separate camera. This should contain the scene with just the lighting.
  • Render the scene to a separate camera again. This should contain the scene with just the textures.
  • The post screen shader should take both scene renders and a flashlight texture. Add the flashlight texture to the lighting pass, then multiply the texture pass by the lighting pass. Voila, you have a cheap flashlight.

There are numerous disadvantages to trying this, though:

  • Shaders of any kind become a pain, especially accurate reflections.
  • Alpha blending can often become an issue.
  • It doesn't look as good as a light mapped approach would.


EDIT: I could try to make you an example, but I quit GM a while ago. I was never good at understanding the projective texturing, anyway.
Offline Profile Quote Post Goto Top
 
Monty
Member Avatar
Forum Leader
[ *  *  *  *  * ]
The easiest way by far:

1. Put a simple point light at the camera position to be your flashlight light source.
2. Make a flashlight overlay 2D texture. The color should be all black, but the alpha should have a transparent circle in the center.
3. Use DrawTex or whatever it's called to overlay it on top of the screen.

There you have it. No shaders at all. You could even make the DrawTex bigger than the screen and animate it so that the flashlight lags behind the camera a little for a realistic effect. I can't think of any drawbacks at the moment...

Edit: Found one. Your gun will have to be drawn on with DrawTex as well. This may mean drawing simply a 2D gun image or it may mean creating a separate render pass with a gun.
Edited by Monty, Jun 17 2013, 03:31 AM.
Offline Profile Quote Post Goto Top
 
Gandalf20000
Member Avatar
Geek
[ *  *  *  *  *  * ]
Monty
Jun 17 2013, 03:27 AM
The easiest way by far:

1. Put a simple point light at the camera position to be your flashlight light source.
2. Make a flashlight overlay 2D texture. The color should be all black, but the alpha should have a transparent circle in the center.
3. Use DrawTex or whatever it's called to overlay it on top of the screen.

There you have it. No shaders at all. You could even make the DrawTex bigger than the screen and animate it so that the flashlight lags behind the camera a little for a realistic effect. I can't think of any drawbacks at the moment...

Edit: Found one. Your gun will have to be drawn on with DrawTex as well. This may mean drawing simply a 2D gun image or it may mean creating a separate render pass with a gun.
I don't know if that would work as well as one would hope, considering I tried something like it once. Wouldn't the flashlight texture just obstruct the scene? I don't think you can change blend modes on screen textures without using a post screen shader, can you?

Here's another idea that would use a (simple) post screen shader, but it requires that the area is completely dark to be good.

1. Use a point light in a completely dark room.
2. Using a post screen shader, multiply the screen by the flashlight texture.

Post screen shaders are really easy to program compared to some other shaders.

I'm rusty, but I think the shader would end up looking like this (please correct me if I'm wrong, since I haven't done ASM shader language in a while):
Code:
 

//Vertex shader
vs.1.1

mov oPos, v0
mov oT0, v7
mov oT1, v8

Code:
 

//Pixel shader
ps.1.4

//Get the scene
texld r0, t0
//Get the flashlight texture
texld r1, t1

//Multiply them together
mul r0, r0, r1


Of course, then you could always tweak this to use a pseudo-deferred shading method to combine this with other lighting... :whistle:
Offline Profile Quote Post Goto Top
 
Monty
Member Avatar
Forum Leader
[ *  *  *  *  * ]
Hmmm maybe I'm thinking wrong but isn't there no difference between
a. multiplying by a grayscale map and
b. overlaying a black, pseudo-transparent texture?

Those pixel shaders look good to me. And you are of course quite right about the deferred lighting. If you go for this approach and if Gandalf's shaders don't work, use the shaders from this: http://s9.zetaboards.com/Ultimate3D_community/topic/7322033/1/. This is a deferred lighting example which does exactly what we're talking about.

Anyways do one of these two and then we'll figure out the gun.
Offline Profile Quote Post Goto Top
 
Gandalf20000
Member Avatar
Geek
[ *  *  *  *  *  * ]
Monty
Jun 17 2013, 05:26 AM
Hmmm maybe I'm thinking wrong but isn't there no difference between
a. multiplying by a grayscale map and
b. overlaying a black, pseudo-transparent texture?

Those pixel shaders look good to me. And you are of course quite right about the deferred lighting. If you go for this approach and if Gandalf's shaders don't work, use the shaders from this: http://s9.zetaboards.com/Ultimate3D_community/topic/7322033/1/. This is a deferred lighting example which does exactly what we're talking about.

Anyways do one of these two and then we'll figure out the gun.
a. A pure white leaves the scene untouched. A pure black is black. Everything in between darkens the scene gradually. Assuming the default scene is everything at 100% light, this creates a lighting effect.
b. Overlaying a simple alpha texture will use the following formula to get the final color: color=as * src + (1-as) * dest = as * (src - dest) + dest
This formula just composites an alpha texture on top of another. Using black as transparency requires additive or subtractive blending.
Offline Profile Quote Post Goto Top
 
Rockin
Member Avatar
Turkey
[ *  *  * ]
Hello,
thanks for you. I understood Monthy's way but it would be a problem when you turn yourself to a corner of a wall(or an object)
I am total noob and Gandalf's way is too hard for me(But i think it's the only way)
example : http://www.visualwalkthroughs.com/halflife2/episodeone/lowlife/57.jpg

I just stuck at this problem :)
An example would so great. I made models, maps.. everything. I need just something to finish it up.
Credits goes you.
Edited by Rockin, Jun 17 2013, 05:52 PM.
Luftwaffe Ground Forces
Offline Profile Quote Post Goto Top
 
Gandalf20000
Member Avatar
Geek
[ *  *  *  *  *  * ]
I'd help you out, but like I said, I no longer have GM. I'll try to be descriptive enough that even if you don't have enough experience yet to understand what to do, hopefully somebody else will:
For projective texture mapping, start by jacking the projection texture from the Tech Demo. I believe this is the one used in the portal room that allows you to see the other side. It will require some modifications. From here on there are two routes.
The "easy" route:
Use the flashlight's position and perspective to project the flashlight texture onto the model. Calculate lighting data as if it was a point light. Multiply the point light information by the flashlight texture. Add to the rest of the lighting data (you might be able to squeeze out one or two lights after this, but including any more than this will require deferred shading or a static lightmap), then multiply the lighting data by the color map. You can also implement bump mapping in the process.
The hard route:
Do complete shadow mapping (which I won't explain, because there are plenty of instructions online, and it's highly impractical), then all of the above.

The "easy" route should just require modifying the projection shader to include the light projection matrix (you shouldn't need a full camera or a separate pass), lighting information for any other lights, lighting calculations, and making sure the texture being passed to the shader for projection is the flashlight texture, not a separate scene render.

EDIT: Monty, this is your cue. You've made nifty examples before. Now do it again. :P
Edited by Gandalf20000, Jun 17 2013, 08:46 PM.
Offline Profile Quote Post Goto Top
 
Monty
Member Avatar
Forum Leader
[ *  *  *  *  * ]
I am all Mac and XCode now unfortunately. As you can see by my thinking that overlaying black and multiplying are the same thing, my pixel shader knowledge is quite rusty :P .

I think Rockin should go the deferred shading route though. If I understand it correctly, he would otherwise have to apply a custom shader to all of the lighted objects in his game, which would be a pain.
Offline Profile Quote Post Goto Top
 
Gandalf20000
Member Avatar
Geek
[ *  *  *  *  *  * ]
Monty
Jun 17 2013, 09:51 PM
I am all Mac and XCode now unfortunately. As you can see by my thinking that overlaying black and multiplying are the same thing, my pixel shader knowledge is quite rusty :P .

I think Rockin should go the deferred shading route though. If I understand it correctly, he would otherwise have to apply a custom shader to all of the lighted objects in his game, which would be a pain.
You turned to the dark side? Shame on you. :(

I guess I'm your alter ego in this case; I'm busy with Java (shudders) and Android right now.
Offline Profile Quote Post Goto Top
 
Dr. Best
Member Avatar
Administrator
[ *  *  *  *  *  * ]
Monty
Jun 17 2013, 09:51 PM
by my thinking that overlaying black and multiplying are the same thing
It is the same thing.

x*(1-alpha)+0*alpha=x*(1-alpha)
Offline Profile Quote Post Goto Top
 
Monty
Member Avatar
Forum Leader
[ *  *  *  *  * ]
@Gandalf nah it's not really that bad because I'm still doing almost everything in C++. Actually, in the past couple days I've been doing more PHP than anything else.

Ah so with what Doctor Best has so kindly pointed out, it seems like the drawTex method looks like it should work.

Now the question is: Does U3D's renderToTexture function (or whatever it's called) render alpha to the texture too? I can't remember. If it does, then doing the gun is all set because it can be overlaid also with DrawTex just like the spot light texture is.

Am I making sense here?
Edited by Monty, Jun 17 2013, 11:25 PM.
Offline Profile Quote Post Goto Top
 
Gandalf20000
Member Avatar
Geek
[ *  *  *  *  *  * ]
Monty
Jun 17 2013, 11:25 PM
@Gandalf nah it's not really that bad because I'm still doing almost everything in C++. Actually, in the past couple days I've been doing more PHP than anything else.

Ah so with what Doctor Best has so kindly pointed out, it seems like the drawTex method looks like it should work.

Now the question is: Does U3D's renderToTexture function (or whatever it's called) render alpha to the texture too? I can't remember. If it does, then doing the gun is all set because it can be overlaid also with DrawTex just like the spot light texture is.

Am I making sense here?
I think Dr. Best's point was that overlaying black is the same as multiplying by black: it creates black. Believe me, I've tried using an alpha texture in DrawTex() before to create a flashlight, and it didn't go over well. It requires multiplicative blending on all RGB channels and ignoring the alpha channel, which, if I am correct, is not possible with DrawTex().

I could be wrong, but if you don't draw anything to a particular spot (meaning no sky sphere or sky cube), I'm pretty sure the render texture is transparent in that spot. You may need to cheat to get U3D to stop clearing the backbuffer or something, but I don't really remember. I know I saw the situation a few times.
Offline Profile Quote Post Goto Top
 
Monty
Member Avatar
Forum Leader
[ *  *  *  *  * ]
Gandalf20000
Jun 18 2013, 12:31 AM
I think Dr. Best's point was that overlaying black is the same as multiplying by black: it creates black. Believe me, I've tried using an alpha texture in DrawTex() before to create a flashlight, and it didn't go over well. It requires multiplicative blending on all RGB channels and ignoring the alpha channel, which, if I am correct, is not possible with DrawTex().
Maybe the color wasn't all black? Because when I look at his screenshot I see a multiplication lighting effect with a 2D texture like this:

http://www.mediafire.com/view/bf5xfeaoq85bnt1/light.png

And I'm pretty sure an overlay can substitute for multiplication. Think about it: overlaying a pixel of (0, 0, 0, 0.5) yields a color that is exactly between the current color and black, because the black color is lerp'ed on with at a position of 50% between the two colors. Multiplying by 0.5 yields a color that is also halfway between the current color and black, because it is half the value.

So if he overlayed a texture like this:

http://www.mediafire.com/view/9g0tjyvnw10wsxm/lightOverlay.png (Might have to save that and view that with a background to see the alpha)

It would have the same effect.

You may be right though about it looking very fake. Might as well try it since it is so easy though.
Edited by Monty, Jun 18 2013, 02:04 AM.
Offline Profile Quote Post Goto Top
 
Gandalf20000
Member Avatar
Geek
[ *  *  *  *  *  * ]
The problem with that is it works for black, but it doesn't work for all colors.

Here's a quick example:
We'll take the color (.3,.5,.3,.5) and overlay it against (.6,.4,.3,1). That would result in .5(.3-.6,.5-.4,.3-.3)+(.6,.4,.3)=(-.15,.05,0)+(.6,.4,.3)=(.45,.45,.3), which should be a yellow-tinted grey color.
If we do component-wise multiplication, it becomes (.3*.6,.5*.4,.3*.3,.5*1)=(.18,.20,.09,.5). If we ignore the alpha value, that is still (.18,.20,.09), which is a much darker yellow-tinted grey.

By the way, my internet filter is going bananas, so I can't view the pictures.

EDIT: Here we go:
Multiply

Overlay, white is transparent


As you can see, where the image is filled with black they're the same, and where the multiplied image is white and the overlaid image is transparent they are the same. Everything in between is different. The multiplied image looks like a bluish-green-tinted spotlight and the overlaid image looks like, well, an overlay.
Attached to this post:
Attachments: multiply.png (95.21 KB)
Attachments: overlay.png (80.85 KB)
Edited by Gandalf20000, Jun 18 2013, 04:12 AM.
Offline Profile Quote Post Goto Top
 
DealsFor.me - The best sales, coupons, and discounts for you
Go to Next Page
« Previous Topic · Tutorials and examples · Next Topic »
Add Reply