01 Introduction

This tutorial is for newbies in the shader business and not for the pros. That means, we have a brief look at the pixelshader aspect and keep everything more or less simple.
Hopefully there is soon a tutorial for the vertex part of shader programming.
Pixelshaders are much more easy to understand than Vertexshaders, so for the beginning pixelshaders should be your choice ...

01.1 Why should I use a shader?

First it's just a performance thing: shaders are fast. these small prgramms run "independently" form the rest of your patch in your graphic card. But the main reason of course is: you can do a lot of new things!

01.2 How to insert an effect in your patch

Effect nodes/shaders are programmed in (HLSL "high level shader language") but are represented within vvvv as normal nodes. The main difference between shader nodes and other nodes is, that you can look into them by right clicking on the node. A window will open that contains the shader code.

vvvv comes preloaded with some shaders that have the extension ".fx" can be found in the "effects" directory. If you create a new effect or download one from somewhere, simply place it there. After rescanning for externals (Alt+E) they will show up in the nodelist (Middleclick in a patch window), like any other node or you can simply open in patch with (Shift+Ctrl+O).

All the shaders we do in this tutorial are based on the node "template" (guess why this node is named template) ... this node is always a good starting point to write your own shaders.

Please note: For the examples in this tutorial you need a graphic card capable of using Pixelshader Version 2.0 (PS 2.0)!

01.3 The 4 parts of an effect file

Some important hints before we start programming: :

• keep the code inside the shader as short as possible eg. instead of writing if (col.r > threshold) col.r = 1,

write col.r = (col.r > threshold)

• often it's better do to something with 2 renders and two shaders eg. it's better to do blur first horizontal then over the result an vertical blur ...

But for now: Enough theory! let's start programming our first shader!
And don't forget to share all the cool new shaders you will do!

Before you start with the tutorials, you should download package of all patches & shaders used form here:
pixelshader_for_newbies_20050922.zip

02 "hello world in pink"

03 thresholding Colors

04 Difference between 2 Textures - aka good for Tracking

05 lovely Neighbours - let's do a simple Blur

06 more lovely Neighbours - Kernel Filters

07 Textur Coordinates & Textur Lookup

08 Feedback & Cellular Automata - Game of Life

links:

• john horton conway's "game of life"
• Prof. Miszalok / TFH Berlin, FB Informatik / en and de

just google for "morphologic filter" or "kernel filters" there are plenty sites

if you wanna post shader code in the tiki be aware: you have to replace < with ~lt~ and > with ~gt~

greetings MrBenefit