Hacker News new | past | comments | ask | show | jobs | submit login
The Book of Shaders (patriciogonzalezvivo.com)
229 points by ingve on March 17, 2015 | hide | past | favorite | 40 comments

A very small piece of advice which I don't see mentioned here: OpenGL works in linear RGB (which is very convenient), while your monitor displays sRGB (which gives you better colour resolution due to how eyes work). This means that outputting the result of OpenGL directly on your screen is wrong (a lot dimmer than it should be). Use this little fragment in all your shaders to convert the final output to sRGB:

    vec3 srgb(vec3 rgb) {
        vec3 mask = vec3(greaterThan(rgb, vec3(0.0031308)));
        return mix(rgb * 12.92,
                   pow(rgb, vec3(1.0 / 2.4)) * 1.055 - 0.055,
Edit: Here's a very good example of the difference https://imgur.com/a/g6qNI

Edit 2: And of course when you load textures you must tell OpenGL they're in sRGB colourspace (most probably they are, if you created them on a normal monitor), so it will do the reverse transformation when reading from the texture. All this trouble could have been avoided if monitors were 30bit linear RGB colourspace to begin with, but that's history now. C'est la vie.

So you're saying that in my shaders, as long as I have GL_FRAMEBUFFER_SRGB enabled, this conversion takes place automatically? Am I understanding the docs right?

I'm asking because I'm a mobile game developer using Unity3d, and we have a fair amount of custom shaders, and I've never heard about this sRGB vs RGB colorspace thing before so I want to investigate. There's not much on google for GL_FRAMEBUFFER_SRGB + Unity3d. Maybe it's handled automatically or it's not even possible with openGL ES 2.0.

The implicit conversion only happens when the internal format of the destination buffer is GL_SRGB8 or GL_SRGB8_ALPHA8

Here's a bunch of shader code and examples for different tone-mapping operators. I really like the Hejl/Burgess-Dawson one as a simple Linear -> sRGRB-ish output function.


What I read so far is great, but I noticed this gem about preprocessor directives:

    All the macro comands begin with a hashtag (#). 
Do we really call every hash character a hashtag now?! :)

Welcome to the rolling wave of civilization. Did we really used to call the number sign a "hash character"?

UK & Ireland: Yes, and still do, although it's apparently a corruption of "hatch" (as in cross-hatch).


Vaguely related:

From The Devil's Dictionary (1881-1906) [devil]:

    HASH, x.  There is no definition for this word -- 
    nobody knows what hash is.

Better than calling it the pound symbol. It was always a source of minor confusion, as people used it rarely and had all sorts of different names for it.

No matter what I do, this is what my students call it. hashtag include iostream

You mean the octothorpe character? [1] That symbol seems to go by a lot of names!

[1] https://en.wikipedia.org/wiki/Number_sign

It's a "sharp", hence why #! is often called a "shebang". Tho' I call ! a "pling".

The sharp sign (♯) [1] is actually a different symbol than the number sign (#) [2].

[1] https://en.wikipedia.org/wiki/Sharp_%28music%29

[2] https://en.wikipedia.org/wiki/Number_sign

In Australia (or maybe it was just me?!) we called it "hash" not "sharp"... so #! was "hashbang". The beauty of this system is that #| is "hashpipe", so it _must_ be correct.

Toby Schachman made a similar attempt at writing an interactive book about shader programming, but sadly it hasn't been updated in a long time.


Hopefully this site won't meet the same fate!

I think it was because Toby Schachman couldn't think of good exercises on more advanced topics. I would guess this struggle influenced his later work - Shadershop:


(Check it out, it's super cool.)

This is awesome! As someone who just spent a ton of time navigating a patchwork of information about GLSL, this looks like an oasis :) (I can't seem to access all the chapters though, I guess its a work in progress).

This looks great. Is there a way to easily take it offline so I can read it on my Kindle? Also...

> If you are reading this book in a browser the previous block of code is interactive. That means you can click and change any part of the code you want to explore.

Now that's pretty damn cool!

For those who don't want to install texlive, pandoc and glslViewer, here is PDF: https://www.dropbox.com/s/uc6g1pkrswjrvhj/TheBookofShaders-P...

Well that's handy, thanks!

Note to user letmeinletmein: https://news.ycombinator.com/item?id=8872776

Kindle or on iPad Safari? I don't know about people in your vicinity but kids in my area are off Kindle completely. This is anecdotal evidence obviously.

The experience of reading books with lifeless text/images sounds like a retrogressive proposition to me. I think e-books will have to move up the tool chain, enter browser with alternative reading experiences.

I don't know about the kids near you but I gave my iPad away, and you can claw my Kindle from my cold, dead hands.

This really needs an email list for updates as more content is added. And maybe a Patreon account as well :D

> This really needs an email list for updates as more content is added. And maybe a Patreon account as well :D

or you know,support simple Atom syndication ...

In the meantime you can watch the github repo and get notified of updates.

good idea!

Finally. 50 Shaders of Grey.

I can only encourage the author to continue. It's a really enjoyable way to learn things. I like how he challenges my in a tutorial.

Although I haven't tried it, here is an NPM package for learning shaders: https://www.npmjs.com/package/shader-school

Great work, it's apparent a lot of thought went into the presentation and teachings.

I'm guessing there are lots of developers out there who don't realize that shaders are quite accessible for simple tasks even without much of a math or graphics background and/or that power is now available is most web browsers.

Thanks for this!

Edit: great illustrations, too!

This is pretty cool. I'll read this. Thanks!

What an incredibly beautiful piece of design. I can't remember the last time I was so inspired by careful use of typesetting and white space.


Um... what? How does this in any way relate to 50 Shades, except for the word 'shade' being contained in 'shaders'? There doesn't even appear to be a reference to it in any of the text.

Put down the pitchforks.

What an incredibly beautiful piece of design. I can't remember the last time I was so inspired by careful use of typesetting and white space.

This would be great material for a GitBook: https://www.gitbook.com/

Why? What about the iteractive shaders?

That could be used in-browser as it is right now.

But going to a publishing platform could also earn his efforts some money for a work well done. Open a channel to receive donations (or sells). Supporting the book through economic means might motivate the author enough to see through its completion.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact