informa
4 MIN READ
Featured Blog

When Noise Shouldn't Be Noisy

With computer graphics, often we get a bit too oriented toward simulation of reality, when what we're really after is just "what looks good." Using a pattern instead of noise is illogical, but in the quest for "what looks good", it's still a handy trick.

(there's a video at the end, if you're the sort to cut to the chase)

Typically when we implement noise in graphics, we're doing it to hide some too-accurate border or pattern, and we think "well, we'll smutz things up a bit" - and we reach for perlin noise, or maybe a gaussian blur, or whatever.

Stop!  Stop right there!

Take a second to think about what you're actually simulating, and whether one of those general noises or blurs is really the best option.  I'll grant you that it's often the best choice for photorealism, since what you're covering for is a lack of accuracy (though even then - stop and think), but for non-photorealism (NPR)?  All blurring communicates is a blurry line, is that really what you want?  Especially if your style is defined by hard-edges, you don't necessarily want to blur that aliased edge, all you really want is to break the pattern up so that it looks appealing rather than aliased.  NPR demands a defter touch.  Thus, enter one possible solution: recursive texture sampling.

The idea is simple.  Take your UV coordinates at some given point on a triangle, however they might be generated (more on that in a sec), and sample some interesting texture.  Now take that pixel's RG (or GB, or RB, or BA, or whatever coordinates make sense given your application and texture), and sample that same texture again using the RG as your UV.  That's pretty much it, on a basic level... but you'll need to get a bit fancier for good results.

First thing you might want to do is experiment with clamping those coordinates.  You can of course just wrap them and get decent results, but depending on the frequency domain of your texture, that may be a bad idea, and you might be better off thinking of the coordinates as clamped/scaled offsets from the original UV.  Next thing, well, ok, great, so now your texture is warped.  That's handy for edges, I guess, and maybe for texture generation, but let's kick it up a notch.

I most recently used this to create a water plane effect (which you can see in the below-linked video).  Water has layers, and I figure we've already got these intermediate colors sampled as we drill down recursively, so the first thing I did was to retain each step's resultant color values.  The other important bit is animation, which you get by starting with animated UVs. Now take the result RG channels, add a second independent offset vector (Vec(RG) + Vec), then use the resultant coordinates sample again.  Then take THAT RG, add a third independent offset, and sample one more time.  I scaled each successive offset (1.0, 0.75 and 0.5) as well, to give a sense of increasing depth for each layer.  Then take the 3 color values you have (1 unwarped / just a UV animated surface, your first recursion, and your second recursion), blend them with 0.3333 weight apiece, and render.  You probably also want to "swish" each layer animation back and forth, and you especially want to make sure the animations take place along different directions - the trick here is to separate the vectors enough that you don't get horribly noticeable tiling.  It's difficult but possible, and also depends on your texture, but the key here is just to experiment.

If all you're wanting to do is break up an edge, a shadow for instance, consider that the surface you're casting on can itself be used as the seed for this technique - and if you happen to be rendering deferred, odds are good you've even already got that color sampled.  Use that color as your noise instead of a more costly calc, and you might like the results. Want lava instead of water?  Change up your texture to something with a different overall color shape, and you'll affect the flow, or change up which layers you use or discard/just recurse through, and you'll change its sense of depth and movement.  In any case, one of the many surface effects you can get in this possibility space is what we ended up with, distortion water:

http://www.youtube.com/watch?v=1rvoeZKTfoY

(the video isn't the greatest, but you get the idea - and note that there is no lighting applied to this, no normal mapping, nothing, that highlight'y shiny effect is purely the result of the warp)

[see more from Megan Fox at her primary site, Glass Bottom Games]

Latest Jobs

Xbox Game Studios

Redmond, Washington
10.5.22
Technical Lighting Artist

Innogames

Hamburg, Germany
10.5.22
Game Designer - Elvenar

Six Foot

Houston, TX
10.3.22
Six Foot Director, Player Relations

Hometopia Inc.

Remote
10.7.22
Lead Engineer
More Jobs   

CONNECT WITH US

Explore the
Subscribe to
Follow us

Game Developer Job Board

Game Developer Newsletter

@gamedevdotcom

Explore the

Game Developer Job Board

Browse open positions across the game industry or recruit new talent for your studio

Browse
Subscribe to

Game Developer Newsletter

Get daily Game Developer top stories every morning straight into your inbox

Subscribe
Follow us

@gamedevdotcom

Follow us @gamedevdotcom to stay up-to-date with the latest news & insider information about events & more