18
\$\begingroup\$

What are some good examples of procedural or screen-space pixel shader effects? No code is necessary; I'm just looking for inspiration.

In particular, I'm looking for effects that are not dependent on geometry or the rest of the scene (so they would look okay rendered alone on a quad) and are not based on image processing (they don't require a "base image," though they can incorporate textures). Multi-pass or single-pass is fine. Screenshots or videos would be ideal, but ideas work too.

Here are a few examples of what I'm looking for (all from the RenderMonkey samples): alt text http://public.blu.livefilestore.com/y1pXcNg_0EPZVzwu1T84a4Yek373x8062rhrNCA7UcftTjCkeiY-5uAuJiBYY29x2E53p5MO-uMA8FmEquvxsPCkA/effect1.jpg?psid=1alt text http://public.blu.livefilestore.com/y1p_5Lx7BdjFyFRBkbcc0WakAT7Q-99fVcFOxmTXBbG4VtoFzC0UfAj51eSnE7ZOD84EYL2Y51HhMS2nWsohhn1mQ/effect2.jpg?psid=1 alt text http://public.blu.livefilestore.com/y1p_5Lx7BdjFyE3KhYtHe-Cdg7XuXcJ9Ou-GKzED-kZnzACyB5ypA6NSCfsYfuKa0h3ztoDRwwq9qBddX2OfG0fhg/effect3.jpg?psid=1alt text http://nv3wrg.blu.livefilestore.com/y1p1iHFwf-wytDo8HlTJca8RfckA-iTKgvLiJm0t9iz3S35YgeEnt99NMjKDgotxa3Bv90wAhOYLabzx2Sd3LoEH2Hs76WR1vFM/effect5.jpg?psid=1

I'm aware of this question; I'm not asking for a source of actual shader implementations but instead for some inspirational ideas -- and the ones at the NVIDIA Shader Library mostly require a scene or are image processing effects.

\$\endgroup\$
2
  • \$\begingroup\$ Can you actually do things like that procedurally, without a base? This is certainly new and interesting to me. \$\endgroup\$ Commented Aug 10, 2010 at 13:45
  • \$\begingroup\$ @The Communist Duck - All these examples come from RenderMonkey, so you can see how they're done. The "base" is typically a noise image (the first three use a volumetric noise while the fourth is a fluid dynamics simulation that spawns fluid on the velocity and density textures where the user clicks and simulates (across 23 passes...) from there. It's also possible to go completely procedural (ie a pattern), but the GPU is limited in it's generation of random numbers, so noise images generated offline are typically better. \$\endgroup\$ Commented Aug 13, 2010 at 22:37

7 Answers 7

29
+100
\$\begingroup\$

Interior mapping is a pretty awesome effect. It takes a boring flat quad and makes it look like a building with interiors, all entirely within the pixel shader. It's semi-procedural in that some of the assets are hand-crafted, but the shader places them procedurally.

alt text

\$\endgroup\$
6
  • 1
    \$\begingroup\$ Sweet... bacon... Jesus that's awesome. \$\endgroup\$ Commented Aug 15, 2010 at 8:11
  • \$\begingroup\$ Definately have to incorporate that into my next app ;) \$\endgroup\$
    – Rushyo
    Commented Aug 16, 2010 at 6:46
  • \$\begingroup\$ Wow, If I can put that in Cube 2 engine, I would be able to remake my portfolio demo, make it faster, AND prettier (it EATS your processor with manually modelled buildings around the building that you actually play inside) \$\endgroup\$
    – speeder
    Commented Aug 17, 2010 at 6:11
  • \$\begingroup\$ Awarding the bounty to this one, but thanks to everyone else who provided suggestions! \$\endgroup\$ Commented Aug 19, 2010 at 20:58
  • \$\begingroup\$ The pdf-link is down. May you ensure its existence, please? \$\endgroup\$
    – Michael
    Commented Jan 16, 2012 at 16:12
7
\$\begingroup\$

For great inspiration don't forget to checkout the oldskool demo effects. Things like plasma, fire, copperbars, warps, lenses, rotozoomers come to mind.

Of course it would require some porting on your end, but thats a challenge i guess.

Here's a nice resource with some effects and the sourcefiles: http://www.oldskool.org/demos/explained/demo_graphics.html

\$\endgroup\$
1
  • \$\begingroup\$ Totally forgot about the demoscene. The 18-bit color one, in particular, might make a sweet image processing effect. I also totally forgot about fractals -- I've seen an HLSL mandlebrot; I wonder what others could be made into shaders. \$\endgroup\$ Commented Aug 15, 2010 at 8:10
6
\$\begingroup\$

Check out Facewound. In particular look at the examples in the shader tutorial.

\$\endgroup\$
1
  • 1
    \$\begingroup\$ That's pretty awesome, but they mostly seem like image processing effects \$\endgroup\$ Commented Aug 9, 2010 at 4:03
3
\$\begingroup\$

ShaderToy is a WebGL shader renderer which shows different shaders in your browser. It has many examples, and you can edit the examples and compile them on the fly! I've spent hours playing with it :)

You will need WebGL running in your browser, though. Chrome is probably your best bet at the moment.

\$\endgroup\$
2
\$\begingroup\$

There is a great set of shader examples here

Some great stuff you can build on and draw inspiration from.

\$\endgroup\$
1
  • \$\begingroup\$ That's a pretty sweet site! Most seem like ye olde lighting/refraction/etc, but some of those materials look cool \$\endgroup\$ Commented Aug 16, 2010 at 5:18
1
\$\begingroup\$

Also have a look at software like Mental Mill. It allows node based shader programming with math operations. Add a bunch of random waves and images and see what comes out the other end. Can often find out far more from the process than images i find ("hey this looks like lightning swarms").

\$\endgroup\$
2
  • \$\begingroup\$ Yup! I'm actually asking this b/c I'm working on a similar (open-source) tool (though slightly different audience) \$\endgroup\$ Commented Aug 16, 2010 at 5:14
  • \$\begingroup\$ Cool, the technique is usually referred to as "splicing" , and "abstract shader tree" type technology. There are also things like mapzoneeditor.com which have great reference. \$\endgroup\$ Commented Aug 16, 2010 at 8:43
1
\$\begingroup\$

If you have a copy of the original Unreal, you can go through the texture packs in the editor and see all the neat effects. They're similar to the examples you posted in the original question.

\$\endgroup\$

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