Sign in to follow this  
seiko4169

Sprite Creative thinking

Recommended Posts

Hi all, I'm after some suggestions for tackling a number of visual effects using only point sprites and a home grown sprite particle/render engine built on the XNA framework. 1) Easy one to start with, Steam/heat haze. Sounds fairly easy however my attempt of multiple sprites alpha blended so far have resulted in it being too dense and smoke like. I already have several preprogrammed smoke effects that are based on alpha fades and renderscale increase etc however I can't seem to show a sprite red hot and emitting steam/heat haze. I've changed the colour channels of the main sprite to simulate the object being red hot however I want to add a heat/haze. At the moment it appears the sprite is emitting smoke as opposed to steam and I'm not sure how to add a blur or shimmer effect to emulate a heat haze? 2) Moving on from the blur effect, Glass, I thought at the offset this would actually be quite easy using alpha fades but I'm struggling. In short I want to overlay a number of sprites to give the same/similar effect as Windows Aero? i.e I can see the background sprites beneath the blur effect sprite but any items behind the blur sprite should be as the name suggests, blurred. Although many of these effects can be based on shaders or prebaked textures I'm hoping some one can suggest a solution using simple sprite overlays etc irrespective of sprite quantity. As such, idea's and approaches most appreciated. Seiko

Share this post


Link to post
Share on other sites
For heat haze, you will need to use render target textures. Create a texture the size of your heat haze effect (let's say 64x64), make sure to specify usage as render target.

On each frame, before you draw your main scene, first draw a subset of your scene into that texture - the part of the scene that's supposed to be overlayed by the haze. You can find details on how to do render to texture in the docs easily.

After that's done, you use that render target as a texture when drawing your heat haze effect. At this point, you have two choices:

1) use pixel shader to offset the texture coordinates of your sprite quad, per pixel, based on an animated normal map, or a noise function

2) use vertex shader to offset the texture coordinates of your sprite quad, per vertex, based on pre-calculated animation or a noise function. The sprite quad would have to be subdivided two or three times for best results

3) Same as #2, but lock/modify/unlock vertex buffer, doing the animation on CPU instead of GPU. This will be OK if you don't have too many heat haze sprites, and if you don't want to use shaders for some reason.

Share this post


Link to post
Share on other sites
Quote:
Original post by ValMan
For heat haze, you will need to use render target textures. Create a texture the size of your heat haze effect (let's say 64x64), make sure to specify usage as render target.

On each frame, before you draw your main scene, first draw a subset of your scene into that texture - the part of the scene that's supposed to be overlayed by the haze. You can find details on how to do render to texture in the docs easily.

After that's done, you use that render target as a texture when drawing your heat haze effect. At this point, you have two choices:

1) use pixel shader to offset the texture coordinates of your sprite quad, per pixel, based on an animated normal map, or a noise function

2) use vertex shader to offset the texture coordinates of your sprite quad, per vertex, based on pre-calculated animation or a noise function. The sprite quad would have to be subdivided two or three times for best results

3) Same as #2, but lock/modify/unlock vertex buffer, doing the animation on CPU instead of GPU. This will be OK if you don't have too many heat haze sprites, and if you don't want to use shaders for some reason.


Thanks ValMan,

Yes, I'd considered these approaches but as mentioned in my request, I really wanted to simulate the effect by overlaying sprites and/or manipulating the sprite properties. Although your techniques above aren't particualry difficult I want to use the particle engine as opposed to change render states etc.

I think the sprite texture modification may work, along with a few overlays etc but I'm struggling to understand what the final image should look like for a heat haze. Again, note this isn't supposed to be a super realistic one, just a simple simulated one using multiple sprite overlays.

:)



Share this post


Link to post
Share on other sites
Both heat haze and the glass effect really require you to know what's "behind" a sprite before you render it. Hence the need to sample from a render target. I don't know of any way of doing it without one that will produce passable results.

Share this post


Link to post
Share on other sites
Quote:
Original post by MJP
Both heat haze and the glass effect really require you to know what's "behind" a sprite before you render it. Hence the need to sample from a render target. I don't know of any way of doing it without one that will produce passable results.


Thanks, can you elaborate a little on why you need to know whats behind the sprite? I thought a heat haze over the sprite would need to blur sections of the sprite, not allow the background to come through?

Share this post


Link to post
Share on other sites
Quote:
Original post by seiko4169

Thanks, can you elaborate a little on why you need to know whats behind the sprite? I thought a heat haze over the sprite would need to blur sections of the sprite, not allow the background to come through?


Hmm I think I misunderstood what you wanted to do here. I thought you wanted something that when you'd render it, it would produce a heat haze on top of what was already rendered there. Something like what you see on the monster's mouth here in this screenshot.

However if you want to render a sprite and you just want that specific sprite rendered with a heat haze effect, then you wouldn't need to sample a render target. You would just need the shader to offset the texture coordinates by some factor that varies with time. Blur is also doable, you just need to take a bunch of texture samples and average them rather than just sampling once.

Share this post


Link to post
Share on other sites
Quote:
Original post by MJP
Quote:
Original post by seiko4169

Thanks, can you elaborate a little on why you need to know whats behind the sprite? I thought a heat haze over the sprite would need to blur sections of the sprite, not allow the background to come through?


Hmm I think I misunderstood what you wanted to do here. I thought you wanted something that when you'd render it, it would produce a heat haze on top of what was already rendered there. Something like what you see on the monster's mouth here in this screenshot.

However if you want to render a sprite and you just want that specific sprite rendered with a heat haze effect, then you wouldn't need to sample a render target. You would just need the shader to offset the texture coordinates by some factor that varies with time. Blur is also doable, you just need to take a bunch of texture samples and average them rather than just sampling once.


Thanks, although I'm not sure if it's possible to use shaders with point sprites I guess I can accomplish something similar by simply changing the texture corodinates each frame?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this