Primer: Shaders

http://notes.underscorediscovery.com/shaders-a-primer/

by hughsk • 12 years ago

189 35 12 years ago

notes.underscorediscovery.com

Part of the confusion is the confusing terminology. "Shader" is a bad name. How do you "shade" a vertex? That implies color, when in fact vertex "shading" is really about deforming the position of vertices. It has nothing to do with color!

"Vertex program" is a better term.

That brings us to "pixel shader." That's actually a good name in order for beginners to learn the concept, but it's imprecise. OpenGL insists on calling it a "fragment program" because with certain forms of antialiasing, there are multiple "fragments" per pixel. "Program" is also a better name than "shader" because there are things you can do per-pixel other than change the color. For example you could change the depth written to the Z-buffer, or you could cause the pixel to be skipped based on some criteria, like whether the texture color is pink.

Anyway, it's just a tiny program that executes either per-vertex or per-pixel. For example you could write a vertex program which moves each vertex in a sinewave pattern based on time. Or you could write a fragment program to change the color of each pixel from red to green and back based on time.

Then there are more advanced/recent concepts like a "geometry program," which lets you generate triangles based on vertices or edges.

Sometimes I wonder if it's overly complicated, or if the problem domain is just complicated. It took me years as a kid to finally grok this, but once I learned it, it turned out to be very simple. Honestly it wasn't until I got up enough courage to sit down with the OpenGL specs and read through them that everything clicked. They're dry reading but not difficult.

pyalot2• 12 years ago

The reason it's not called vertex program is because the pipeline is defined in terms of stages (vertex -> tessellation control -> tessellation evaluation -> geometry -> rasterizer -> fragment). Together they are a program. When talking about this structure the choice that OpenGL made is:

"A shader program consists of a vertex shader (VS), tessellation control shader (TS control), tessellation evaluation shader (TS eval), geometry shader (GS) and fragment shader (FS)."

You could instead say this, but it would be confusing:

A shader program consists of a vertex program, tessellation control program, tessellation evaluation program, geometry program and fragment program.

And it would even get more confusing if you drop the first shader:

"A program consists of a vertex program, tessellation control program, tessellation evaluation program, geometry program and fragment program."

So for the sake of it being easy to talk about, a (shader) program is the whole thing, whenever somebody talks about a "program" it's the whole assemblage. And when somebody talks about a shader, it means one of the programs tied to a stage.

sillysaurus38• 12 years ago

Yeah, this has the side effect of making it almost impossible for newcomers to have any clue what the heck is going on until they have several months of (painful) experience trying to figure out each piece.

It doesn't have to be this complicated. Humans just made it that way. I'm just trying to make sure everyone understands that there's nothing mysterious or even especially interesting about these terms. It's complicated like an internal combustion engine is complicated, not like math.

stormbrew• 12 years ago

I don't personally see why this is so confusing. I think that if you're writing shaders you can probably understand that 'program' is a somewhat recursive term. A program is made up of other programs (a function or a module is a program as well).

But even then, you could call them functions (which is practically a synonym for program in a sense, and also obviously recursive, in that functions call other functions).

Either would at least be less obviously 'wrong' in the sense GP meant it.

But I also think "kernel" is a stupid term for GPGPU programs, and definitely increases the barrier to learning what isn't really all that complicated of a thing (at least not at the intro level).

jakobe• 12 years ago

Shader is a good name, because it implies what one of the main purposes of the code is: to apply lighting (shading) to the stuff.

How do you shade a vertex? Read about Gouraud shading. The idea is to do the expensive lighting calculation only at the vertices, and interpolate in-between. The "vertex shader" would calculate the shading at the vertices.

Obviously, you can use a vertex shader to do things other than shading, but "shader" is just a name, not a definition of all things this program can do.

0x0• 12 years ago

I found the name confusing the first time I encountered it. At first, I assumed it only had something to do with applying fancy lighting effects. Only after studying things further did it become obvious that a shader is responsible for doing 3d->2d projection and pixel filling - and you need them even if you only want to draw solid color shapes!

ANTSANTS2• 12 years ago

Traditionally, lighting was calculated per vertex, not per pixel, and the results of those calculations were simply interpolated across the surface of the triangle. A "shader" is not the most general term they could have used for a GPU program, but you very well can "shade" a vertex.

Edit: Is this seriously being downvoted? "How do you "shade" a vertex? That implies color, when in fact vertex "shading" is really about deforming the position of vertices. It has nothing to do with color!" is factually inaccurate because you can, and many games do, calculate color and lighting information per-vertex.

sillysaurus38• 12 years ago

Actually, the per-vertex color is passed into the pixel shader, which then decides what to do with it. The vertex shader itself has nothing to do with color except calculating an initial value and passing it to the pixel shader. The pixel shader can be set up to interpret that value as anything. It could make it a grayscale color, it could invert it, it could use only one of the four channels, etc.

There used to be no pixel shaders, which is why vertex shaders had to be used to do shading. That was circa 2004 though. EDIT: This paragraph is incorrect, see comment below.

Also, the whole idea of "color" in a vertex shader is mistaken. There is only one color: the RGB that ultimately shows up on the screen. Until then, there are values which are passed from the main application source code to the vertex / pixel shaders, which then decide what to do with those values. Sometimes the pixel shader interprets them as a color, but they're really just floating point numbers. That may seem like a silly distinction, but again, if your mental model is incorrect as a newcomer then you're going to have a hard time.

lingoberry• 12 years ago

I just want to say that you're correct, I've had this problem as well. As a non-native speaker for some reason it also didn't occur to me that the "shade" in shader has anything to do with color. It's just one of those things you can misunderstand. The way you explain it is much easier to understand.

I think all the people defending the term are all quite invested in the area already, so it's obvious to them.

wcarss• 12 years ago

"Anyway, it's just a tiny program that executes either per-vertex or per-pixel."

Thank you. I have never understood the concept of a <thing>-shader; I just knew they were useful and somehow caused neat effects. Even having pasted some shader code into a program once (for a barrel distortion for my rift), I never thought much about them, likely because of the opacity of the name. Just ... magic.

Your description has just made the entire concept click. I'm now actually interested in learning about them, because it's such a simple, sensible idea. Thanks.

side-note: I wish the world had more one-sentence intuitive sum-ups of jargon-laden concepts, even if they are a little 'leaky' as abstractions. Just to give people disconnected from the topic a place to start thinking about it.

sillysaurus38• 12 years ago

You're welcome! Please let me know if you have any other questions. I'll do my best to help. :)

Jemaclus• 12 years ago

As someone who is not well-versed in graphics or graphics programming, this was a very well-explained primer. I very thoroughly enjoyed it, and learned something in the process!

greggman• 12 years ago

self promotion: Here's some more.

http://greggman.github.io/webgl-fundamentals/

In particular

http://greggman.github.io/webgl-fundamentals/webgl/lessons/w...

ceautery2• 12 years ago

Hey, I found these when I was untangling WebGL, and found them pretty useful. Thanks for making them.

drifkin• 12 years ago

I was just going over these the other day. Thank you!

Skoofoo• 12 years ago

Have been going through those to learn how to build out the rendering for my game framework. Awesome stuff! Your tutorials have saved me a lot of grokking time.

neals• 12 years ago

To me, the thing with shaders always is: I need them at some stage in a project. I have used them before, but too long ago to remember, so I need to look up most it. I work with it a for a few weeks. That part of the project is done and I move on.

A year later, a new project comes along. It requires shaders. I don't remember how to use then and have to look it up again...

Repeat.

fotcorn• 12 years ago

What shader languages are used in cross-platform games? PS3 uses Cg, PS4 PSSL, Xbox & Windows use HLSL and OpenGL on Mac/Linux/Smartphones/Tablets use GLSL. Are there converters from one to the other language? How do big engines like Unreal oder CryEngine handle this?

subb• 12 years ago

Either have an abstraction layer (another language or a user interface) or a translator.

shmerl• 12 years ago

Windows has GLSL as well.

ceautery2• 12 years ago

Nice, thanks a lot. Great animations.

"Shader" was a term I was confused about at first when I was learning WebGL. In fact, in the WebGL world, it seems like one is expected to come from an OpenGL background and be familiar with whatever popular 3rd party libraries are en vogue. I never found a thorough guide that didn't presume one of those two things, so I built one:

https://curtisautery.appspot.com/5898536285634560

(Sorry, also jumping on the self-promotion bandwagon.)

fescue• 12 years ago

This guide has helped me unbend my mind about shaders: http://pixelshaders.com/

svantana• 12 years ago

While I appreciate the effort, I think this primer is lacking what most other shader tutorials also lack: any information on how to actually do something useful. Shaders are used because they are faster than the cpu. So why isn't everything done with shaders? Because of limitations. So what are those? Most GPU tutorials only include examples of the form

FragColor = <some algebraic expression containing x & y>

That's nice, but hardly useful. To do anything of worth, I would need data from the CPU. How do I do that? What are the most common bottlenecks? What are some ways around the limitation of working with one fragment at a time? Those are the sort of questions I would like to see answered in a primer. A sort of "GPU introduction for competent CPU devs" - any recommendations?

mattdesl2• 12 years ago

Bottlenecks and multi-sample output are complex subjects, and also uncommon for a beginner to deal with.

Nevertheless, gonna just pimp my own tutorials since they also cover practical implentations, like blurs for desktop and mobile, normal mapping for 2D games, vignettes, etc. https://github.com/mattdesl/lwjgl-basics/wiki/Shaders

mattdesl2• 12 years ago

Nice intro. Shaders definitely seem a lot more elusive than they really are.

Also gonna jump on the bandwagon with my own tutorials, using Java/LibGDX and mostly focusing on 2D applications.

https://github.com/mattdesl/lwjgl-basics/wiki/Shaders

Primer: Shaders

Related Stories