Post news RSS Transparent shadows using stippling

Most modern games use a form of depth-map shadow mapping, because it's efficient on modern graphics cards, and simple to implement. However, it doesn't easily support transparent surfaces. This leads to some inappropriately harsh shadows on materials that are meant to look softer, such as leaves in trees.

Posted by on

Most modern games use a form of depth-map shadow mapping, because it's efficient on modern graphics cards, and simple to implement. However, it doesn't easily support transparent surfaces. This leads to some inappropriately harsh shadows on materials that are meant to look softer, such as leaves in trees:

Stippled shadows

Here are the shadows isolated:

Stippled shadows

To soften the shadows, I decided to approximate translucency. In practical terms, that means that shadows closer to the leaves should be fairly faint, but shadows farther away will be dark. To approximate that when rendering the depth map, I drew the leaves four times at different levels of opacity, moving away from the light source. That is, at their original position they cast a shadow at 25% opacity, at a slightly farther position they cast a shadow at 50% opacity, and so on.

Stippled shadows

To simulate transparent shadows, I used 'stippling': a method of approximating transparency by using patterns of opaque dots. This is similar to how I used to simulate levels of gray when making black and white games in Hypercard -- for example, medium gray is approximated by alternating black and white pixels in a checkerboard pattern. This is easy to achieve in a GLSL pixel shader like this:

if(int(gl_FragCoord.x+gl_FragCoord.y)%2==0){
discard;
}

This shader excerpt displays a checkerboard stippling pattern by only drawing every other pixel. It checks if the sum of the pixel coordinates is even or odd -- if it's even, the pixel is discarded (not drawn). If it's odd, it is drawn as usual. Here's a close-up of the different stippling levels in the tree shadow.

Stippled shadows

Our shadow maps are blurred and supersampled to remove aliasing artifacts, and this conveniently also smooths out these stippled shadows. Here are the new softened shadows (on the right).

Stippled shadows

Here it is with all of the shading enabled. It's a subtle difference with these trees and these lighting conditions, but every bit counts!

Stippled shadows

Here it is again from another angle:

Stippled shadows

This is another effect that took very little time to implement, and requires no extra real-time rendering resources. This is why even though it's a subtle effect, I thought it was worth showing to you! Stippled shadows also work well for adding shadows to particle effects like smoke and dust, and to transparent materials like glass or gossamer. Can you think of any other uses for this technique? (permalink)


Track us on ModDB (visit our page)

Please join us here too:
Facebook icon ModDB icon Steam icon Twitter icon YouTube icon

Comments
chris_sloany
chris_sloany

Yes, looks much better! glad you guys are paying to the minor attentions, that later lead up to the big things.

Reply Good karma Bad karma+1 vote
Nebcake
Nebcake

Wow it keeps looking better and better.

Reply Good karma Bad karma+1 vote
Woolybear777
Woolybear777

That looks AWESOME!

Reply Good karma Bad karma+1 vote
Thefrog101
Thefrog101

Wow amazing!

Wonder how it would look on snow or rain?
(just a thought)

Reply Good karma Bad karma+1 vote
PringleX
PringleX

I'm glad you guys put a crap load of work into your engine. Are we going to get any word on how it will utilize multi GPU setups?

Reply Good karma Bad karma+1 vote
feillyne Staff
feillyne

BTW, what will you name your engine?

Reply Good karma+1 vote
Elementalist
Elementalist

Says at top that it's called Phoenix Engine. :)

Reply Good karma Bad karma+1 vote
Elementalist
Elementalist

Looks great. Though, I wouldn't agree it's that subtle an effect. However, that's when it's side-by-side. It would be interesting if there was an option between the methods in the graphical options, as it seems when actually playing the game you wouldn't notice much difference without a comparison.

That would be a random option to add I imagine though, and would only serve to confuse users.

Awesome work, great articles.

Reply Good karma Bad karma+1 vote
Joe_Shmoe
Joe_Shmoe

well it definately makes a difference, well thought of too, shadowing for most transparencies like smoke and dust particles as well as water and glass is pretty much as good as its use will get... I think lol but good thinking =] 2 thumbs up again for you guys

Reply Good karma Bad karma+1 vote
Bird_of_Prey
Bird_of_Prey

Interesting solution. Looks good. It's subtle touches like these that can really add up and make a game look great.

Reply Good karma Bad karma+1 vote
Dra6o0n
Dra6o0n

I think you need to make a very close up comparison, because when hiding in grass and bushes, you need to be able to faintly see right?

In real life, because of the way plants are like, being inside a bush or tall grass allows you to see a bit whats on the other side. Of course it also depends on how thick it is from a certain distance or angle.

Reply Good karma Bad karma+1 vote
sbnewsom
sbnewsom

Well having a big object like yourself inside a bush tends to create a lot of shadows. :P

Reply Good karma Bad karma+1 vote
Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.