My First Shader

No, wait! You, too, can do this! Then show everyone your shader code and feel like a bad-ass. Or, better yet, get a GLSL shader code tattoo.

Shaders, snippets of code for processing pixels and 3D points on your 3D card’s GPU, are cool — that much you may know. You may even know that you can use shaders — designed for 3D applications — to perform powerful video-processing tricks, as well, at high speeds, even on a relatively lowly laptop. How to actually build your own — that may be elusive. So, at long last, Cycling ’74 has published a great, beginner-friendly (even for non-programmers) tutorial on building your own shaders:

Your First Shader

The author is Andrew Benson, who is my hero as far as coming up with great Jitter examples. (Every time I’m looking for some model for a technique I have in mind, I keep stumbling on his sample patches in the Jitter folder and still more in his By the second page, you’re already building your own custom, glitchy visual filters. Great stuff.

Now, of course, this tutorial isn’t limited to users of Max/MSP/Jitter, but Max is really an ideal environment for testing shaders. (It can even work well as a prototype environment before going elsewhere.) This code will work in Processing, though, and I could see using a combination of those two tools (still working on my own workflow there).

We’ll be practicing our shader chops, because there’s definitely a need for more information like this. This sentence says it all: “If you want to learn more, I highly recommend poking around the “jitter-shaders” folder and grabbing the official GLSL specification(PDF) or the GLSL Orange Book.” Good advice, and the example Jitter shaders included with the program will already do a lot of what you’d like need. But, as fair warning, the Orange Book and other official OpenGL documentation can make your head hurt, fast. (There’s a reason “… for Dummies” isn’t on the end of the title.) I still recommend picking up a copy, but there’s definitely a need for at least intermediate documentation. Being something of a dummy myself, I may be able to help.

  • http://vjanomolee.mulitply.com VJ Anomolee

    Awesome!
    Only half way through the tutorial and I already feel like a bad-ass.
    Thanks Peter!

  • http://toxi.co.uk/ toxi

    Hey Peter, you might also want to check this website for more GLSL & Cg goodness for Processing:
    http://shaders.computaciongrafica.com/

  • http://createdigitalmusic.com Peter Kirn

    Thanks, toxi! That's an excellent resource.

    Interesting to see the mention of GPUPU. I'm still interested in GPU-bound motion tracking and music synthesis, among other things … at least in limited applications. Of course, that gets well beyond the "make something glitchy happen" level. :)

  • Pingback: themississippistate.info » Blog Archive »

  • http://www.sparkav.co.uk toby *spark

    thanks for the link, it was the spur to jump the to-do list and make that thing i've been wanting to make for ages….
    http://web.mac.com/tobyspark/iWeb/tobyzstuff/toby

    toby

  • http://www.sparkav.co.uk toby spark

    thanks for the link, it was the spur to jump down the to-do list and tackle making that kernel i need for my vdmx setup. write the image kernel in quartz composer (complete with error checking!) then publish the inputs, send the output to a billboard, and load into vdmx. in vdmx see your image inputs turn to video layer selections and floats into sliders. pretty damn cool integration on osx nowadays.

    toby

  • http://www.sparkav.co.uk toby spark

    thanks for the link, it was the spur to jump down the to-do list and tackle making that kernel i need for my vdmx setup. write the image kernel in quartz composer (complete with error checking!) then publish the inputs, send the output to a billboard, and load into vdmx. in vdmx see your image inputs turn to video layer selections and floats into sliders. pretty damn cool integration on osx nowadays.

  • http://abstrakt.vade.info/ vade

    Another great resource I found when starting out writing shaders for Jitter was : Photobooth Demystified. I ported some of those examples to jitter jxs shaders for rectangular textures and based my own code on most of the things in there. Very cool stuff.

  • http://createdigitalmusic.com Peter Kirn

    @Toby: Yeah, lovely, right? Jitter can also do image kernel stuff. So I keep QC, Jitter, and VDMX all handy.

    @vade: Nice set of tutorials there. Of course, they don't deconstruct some of the fancier Photobooth / Core Image plug fx. ;)

  • toby *spark

    …sorry for the multiple posting, wierdness with safari. now a week later, it shows me the gazillion reposts. oops!