I'm making a (non-isometric) side scrolling 2D game and I want each fragment that I draw to cast a small drop shadow when it is near another object. What sort of algorithms are used in fragment shaders to cast shadows in 2D games?

  • 2
    \$\begingroup\$ Could you clarify what exactly you want to do? What do you mean when you say that every fragment should cast a small drop shadow? \$\endgroup\$
    – TravisG
    Jun 18 '11 at 8:32

you need to provide much better information to get a very useful answer, you are vague. (what does near mean in 2d? that doesn'f fit with how shadows work at all...)

the lazy, easy solution is to not use shaders at all - draw everything twice, a first pass with flat colour offset down and to the left/right - this is the drop shadow, then render everything normally over the top. you can combine this with a blur (using a shader if you must) in between the two passes for a bit of polish, and unless you are on a mobile platform or pushing lots of triangles the expense should be fine.

if you have depth to your scene (you really need to clarify this, it is easily the most important point) then you might want to use depth testing to not cast shadows onto "nothing". If that is not quite enough then maybe vary brightness and blur depending on the depth of the existing scene fragments vs. the current object fragments being drawn. varying shadows based on depth is fairly complicated, and you typically need to resolve and sample a render target to do this, as well as writing some vertex + fragment program - in which case you might as well just use shadow mapping (which is well researched and documented - you should Google that if you decide it is appropriate)


It really depends on how your game graphics are set up and how you want this effect to work. In 2d "shadows" aren't really uniquely defined so you need to decide what sort of behaviour you want from them.

If you're looking for something like drop-shadows in Photoshop then you first need the relative depths of objects to be defined somehow, either individually or in bins (i.e foreground, middle, background).

To actually cast a drop-shadow a simple method would be to render all onscreen shadow-casting objects to a texture w/ a simple shader that outputs opaque black (for solid pixels) or transparent/0-alpha (for empty pixels); then use this "shadow buffer" w/ multiply blending on the shadow-receiving objects -- you can offset the shadow buffer to make the drop-shadow fall e.g to the left and down.

If you want objects to both cast and receive shadows (i.e object-by-object shadows instead of layer-by-layer) you could try a similar approach where you iterate over all objects from front to back, rendering the object w/ the current shadow-buffer applied and then adding the object to the shadow buffer. This would involve a lot of texture binding/unbinding though (assuming you have hundreds of objects) so I'm not sure if it's a good solution.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .