patriciogonzalezvivo / thebookofshaders

Step-by-step guide through the abstract and complex universe of Fragment Shaders.

The Book of Shaders

by Patricio Gonzalez Vivo and Jen Lowe

This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.

Contents

• About this book

• Getting started

  • What is a shader?
  • “Hello world!”
  • Uniforms
  • Running your shader

• Algorithmic drawing

  • Shaping functions
  • Colors
  • Shapes
  • Matrices
  • Patterns

• Generative designs

  • Random
  • Noise
  • Cellular noise
  • Fractional brownian motion
  • Fractals

• Image processing

  • Textures
  • Image operations
  • Kernel convolutions
  • Filters
  • Others effects

• Simulation

  • Pingpong
  • Conway
  • Ripples
  • Water color
  • Reaction diffusion

• 3D graphics

  • Lights
  • Normal-maps
  • Bump-maps
  • Ray marching
  • Environmental-maps (spherical and cube)
  • Reflect and refract

• Appendix: Other ways to use this book

  • How can I navigate this book offline?
  • How to run the examples on a Raspberry Pi?
  • How to print this book?
  • How can I collaborate?
  • An introduction for those coming from JS by Nicolas Barradeau

• Examples Gallery

• Glossary

About the Authors

Patricio Gonzalez Vivo (1982, Buenos Aires, Argentina) is a New York based artist and developer. He explores interstitial spaces between organic and synthetic, analog and digital, individual and collective. In his work he uses code as an expressive language with the intention of developing a better together.

Patricio studied and practiced psychotherapy and expressive art therapy. He holds an MFA in Design & Technology from Parsons The New School, where he now teaches. Currently he works as a Graphic Engineer at Mapzen making openSource mapping tools.

WebSite - Twitter - GitHub - Vimeo - Flickr

Jen Lowe is an independent data scientist and data communicator at Datatelling where she brings together people + numbers + words. She teaches in SVA's Design for Social Innovation program, cofounded the School for Poetic Computation, taught Math for Artists at NYU ITP, researched at the Spatial Information Design Lab at Columbia University, and contributed ideas at the White House Office of Science and Technology Policy. She's spoken at SXSW and Eyeo. Her work has been covered by The New York Times and Fast Company. Her research, writing, and speaking explore the promises and implications of data and technology in society. She has a B.S. in Applied Math and a Master's in Information Science. Often oppositional, she's always on the side of love.

WebSite - Twitter - GitHub

Acknowledgements

Thanks Scott Murray for the inspiration and advice.

Thanks Kenichi Yoneda (Kynd), Nicolas Barradeau, Karim Naaji for contributing with support, good ideas and code.

Thanks Kenichi Yoneda (Kynd) and Sawako for the Japanese translation (日本語訳)

Thanks Tong Li and Yi Zhang for the Chinese translation (中文版)

Thanks Jae Hyun Yoo and June Kim for the Korean translation (한국어)

Thanks Nahuel Coppero (Necsoft) for the Spanish translation (español)

Thanks Raphaela Protásio and Lucas Mendonça for the Portuguese translation (portugues)

Thanks Nicolas Barradeau and Karim Naaji for the French translation (français)

Thanks Andrea Rovescalli for the Italian translation (italiano)

Thanks Michael Tischer for the German translation (deutsch)

Thanks Sergey Karchevsky for the Russian translation (russian)

Thanks Vu Phuong Hoang for the Vietnamese translation (Tiếng Việt)

Thanks Wojciech Pachowiak for the Polish translation (polski)

Thanks Manoylov Andriy for the Ukrainian translation (український переклад)

Thanks Andy Stanton for fixing and improving the pdf/epub export pipeline

Thanks to everyone who has believed in this project and contributed with fixes or donations.

Get new chapters

Sign up for the news letter or follow it on Twitter / Mastodon / Discord

<script> window.fd('form', { formId: '623359074e5181d777e479f9', containerEl: '#fd-form-623359074e5181d777e479f9' }); </script>

LICENSE

Copyright (c) Patricio Gonzalez Vivo, 2015 - http://patriciogonzalezvivo.com/ All rights reserved.

thebookofshaders's Issues

u_mouse y calculation inverts sign

https://github.com/patriciogonzalezvivo/thebookofshaders/blob/master/src/glslCanvas.js#L458

... -mouse.y-rect.top … should be either -(mouse.y - rect.top) or -mouse.y+rect.top; the further the rect is from 0px, the more negative the u_mouse.y value becomes.

changing the code from examples

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. Changes will be updated immediately thanks to the GPU architecture that compiles and replaces shaders on the fly. Give it a try by changing the values on line 6.

I can see the code using devtools, but I guess that's not the idea :)
What am I missing?

circle dot distance example wrong

First of all, thanks for this amazing book, I've never seen anything interactive like this in any area.

Just a small note, this example doesn't seem to make sense for me:
http://thebookofshaders.com/edit.php?log=171213143320

1. The main problem is the magic number of *4.0
2. We are using radius, yet we are calling it with 0.9. We should be calling it with 0.45 to make it actually a radius.
3. Now, not doing sqrt and using dot means that we have to either do a pow(_radius, 2.0) or call the parameter square_of_radius and enter a value manually.

I'd change it to this:

float circle(in vec2 _st, in float _radius){
    vec2 dist = _st-vec2(0.5);
    _radius = pow(_radius, 2.0);
	return 1.-smoothstep(_radius-(_radius*0.01),
                         _radius+(_radius*0.01),
                         dot(dist,dist));
}

void main(){
	vec2 st = gl_FragCoord.xy/u_resolution.xy;

	vec3 color = vec3(circle(st,0.45));

	gl_FragColor = vec4( color, 1.0 );
}

Animating (Rotating) Polar Shapes

Hi,

in chapter Shapes in subchapter Polar shapes I want to animate the function.
This is done by adding u_time to the x variable in the Graph plotter, for instance

y = cos((x+u_time)*3.);

This is fine, however when I want to drive it more quickly.

y = cos((x+u_time * 4. )*3.);

I get very weird results. Seems that the cosinus function return wrong values. Why is this so?!

Thanks,
Matthias

when trying to create PDF, make fails on OS X

I am following the instructions, line by line. Everything goes fine until the very last make command which fails. Here is the last part of the console output:

glslViewer ./15/blend.frag ./15/04.jpg ./15/05.jpg -s 0.5 -o ./15/tmp-blend.png
Loading ./15/04.jpg as the following uniform:
uniform sampler2D u_tex0; // loaded
uniform vec2 u_tex0Resolution;
Loading ./15/05.jpg as the following uniform:
uniform sampler2D u_tex1; // loaded
uniform vec2 u_tex1Resolution;
Will exit in 0.5 seconds.
Will save screenshot to ./15/tmp-blend.png on exit.
Traceback (most recent call last):
File "src/parseBook.py", line 59, in
modifiedChapterString = injectShaderBlocks(folder, modifiedChapterString)
File "src/parseBook.py", line 34, in injectShaderBlocks
shaderString = open(shaderPath, 'r').read()
IOError: [Errno 2] No such file or directory: './appendix/ grid-making.frag'
make: *** [all] Error 1

safari web content

Hello -
Every time I pull up GLSL Editor, Safari Web Content crashes.
This is a recent predicament.
Whenever I attempted opening in Chrome, it opened up but the editor started flashing blue.

Can't install from github

Hi!
Following the instructions, after

git clone --recursive https://github.com/patriciogonzalezvivo/thebookofshaders.git
cd thebookofshaders/

This command

git submodule foreach git pull

Produces

Entering 'src/glslCanvas'
You are not currently on a branch.
Please specify which branch you want to merge with.
See git-pull(1) for details.

    git pull <remote> <branch>

Stopping at 'src/glslCanvas'; script returned non-zero status.

Any fix for this?

README-ch.md should be renamed to README-cn.md

CH == Switzerland
CN = China

compile on ubuntu and pdf creation

hi
i'd love to read your book on my mobile while traveling. so i tried to create the pdf on my ubuntu14.10 workstation (no raspy around).

it seems that some images are missing:

pandoc: Could not find image `./02/tmp-hello_world.png', skipping...
pandoc: Could not find image `./03/tmp-time.png', skipping...
pandoc: Could not find image `./03/tmp-space.png', skipping...
pandoc: Could not find image `./05/tmp-linear.png', skipping...
pandoc: Could not find image `./05/tmp-expo.png', skipping...
pandoc: Could not find image `./05/tmp-step.png', skipping...
pandoc: Could not find image `./05/tmp-smoothstep.png', skipping...

i've set up the my machine to compile your book like this:

sudo apt-get install git-core libfreeimage-dev texlive-xetex pandoc texlive-fonts-recommended texlive-latex-extra
git clone https://github.com/patriciogonzalezvivo/thebookofshaders.git
cd thebookofshaders
make

but i was not yet able to compile the glslViewer (bcm_host.h missing)... as far as i understand glslViewer is needed to create the missing images above?

thanx and cheers.ivo

Shader export(saving) fails with insecure cross domain request error

When selecting EXPORT>SAVE on http://thebookofshaders.com/edit.php, it fails with following error
Mac, Chrome Version 52.0.2743.116 (64-bit)

Share.js:46 Mixed Content: The page at 'https://thebookofshaders.com/edit.php#02/hello_world.frag' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://thebookofshaders.com:8080/save'. This request has been blocked; the content must be served over HTTPS.saveOnServer @ Share.js:46(anonymous function) @ ExportModal.js:15
Share.js:46 XMLHttpRequest cannot load http://thebookofshaders.com:8080/save. Failed to start loading.saveOnServer @ Share.js:46(anonymous function) @ ExportModal.js:15

the maximum distance barely goes over 0.5. > sqrt(2.0) / 2?

Chapter 07 Shapes

Notice that the values don't get too high because from the center ( vec2(0.5, 0.5) ) the maximum distance barely goes over 0.5.

Isn't the maximum distance half the square root of two? (The brightest points are at the corners of the canvas, so the distance from the center would be the length of diagonal of 0.5x0.5 square).

Similarly:

The horizontal distance to the edge of the cone is 0.5.

Shouldn't this be 1.0 if the edge of the cone is the point where the brightness gets 1.0?

PDF Build failed on Ubuntu - ! Dimension too large.

I tried building on Ubuntu 16.04, but get an error about Dimension too large before it completes -

[snipped]
Loading ./16/01.jpg as the following uniform: 
    uniform sampler2D u_tex1; // loaded
    uniform vec2 u_tex1Resolution;
Will exit in 0.5 seconds.
Will save screenshot to ./16/tmp-operations.png on exit.
glslViewer ./16/blend.frag ./16/04.jpg ./16/05.jpg -s 0.5 -o ./16/tmp-blend.png
Loading ./16/04.jpg as the following uniform: 
    uniform sampler2D u_tex0; // loaded
    uniform vec2 u_tex0Resolution;
Loading ./16/05.jpg as the following uniform: 
    uniform sampler2D u_tex1; // loaded
    uniform vec2 u_tex1Resolution;
Will exit in 0.5 seconds.
Will save screenshot to ./16/tmp-blend.png on exit.
Generating ./book.pdf from:
    ./00/tmp.md
    ./01/tmp.md
    ./02/tmp.md
    ./03/tmp.md
    ./04/tmp.md
    ./05/tmp.md
    ./06/tmp.md
    ./07/tmp.md
    ./08/tmp.md
    ./09/tmp.md
    ./10/tmp.md
    ./11/tmp.md
    ./12/tmp.md
    ./13/tmp.md
    ./14/tmp.md
    ./15/tmp.md
    ./16/tmp.md
    ./17/tmp.md
    ./18/tmp.md
    ./appendix/tmp.md
    ./examples/tmp.md
    ./glossary/tmp.md
Using the following flags:
    -N
    --smart
    --no-tex-ligatures
    --toc
    --standalone
    --preserve-tabs
    -V documentclass=scrbook
    -V papersize=a4
    -V links-as-note
    -S
    --latex-engine=xelatex
Successful building of ./book.tex
! Dimension too large.
<to be read again> 
                   b
l.4917 \includegraphics{./12/accretion.jpg}

pandoc: Error producing PDF
Error in building of ./book.pdf

Multilingual URLs do not work on thebookofshaders.com/appendix/

The following URLs must show the French version of the Appendices, but display the English version ...

https://thebookofshaders.com/appendix/?lan=fr
https://thebookofshaders.com/appendix/00/?lan=fr

I think the problem is in /appendix/index.php, but I should investigate it a bit more to understand where it comes from 😉!

Create pdf on Windows.

Hello! How to create pdf of this book on Windows?

Chapters 15 and 16 not linked on main page

I've found them in Google, however they are not linked on the main page.

https://thebookofshaders.com/15/
https://thebookofshaders.com/16/

I hope you will continue with the book, because it's really a great resource that explains shaders in an understandable way.

Improve legibility for small viewports (phones)

Phones used to not be able to display shaders, but now they can. That means that the book of shaders should get a slight upgrade to be more friendly to a variety of screen sizes, pixel densities, and stuff like that. Not with the shaders themselves necessarily, but it'll really help out to have legible typography.

Not just moaning or complaining. This is something I know how to do pretty well, just opening up the conversation about it.

The first step should be a meta tag to set the viewport size.

Circle function question

Hi there, I only had time to quickly glance through the book, but from what I've seen, really really really nice work! : )

This is not exactly an issue, it's more a doubt. Regarding the circle function, I usually use a distance function. Something like this:

float circle(vec2 _st, float _radius ){
float dist = distance(vec2(0.5), _st);
float smooth = _radius*0.05;
return 1.-smoothstep(_radius-smooth,_radius+smooth, dist);
}

This way, you know that your radius values equals the tile size. So instead of having an approximation, you have an exact value.
If radius == 1., you fill everything; if radius == 0.5, you exactly match the tile border; and so on.
At least for me, it looks simple.

So, my question is, why did you do it like that? Thanks for your time! : )

2015/thebookofshaders/06/easing.frag 404s

Finally getting around to reading through this glorious book. Amazing stuff, thanks for all of your hard work 😸.

I've noticed that in chapeter 06, the easing example 404s in the editor with:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>404 Not Found</title>
</head><body>
<h1>Not Found</h1>
<p>The requested URL /2015/thebookofshaders/06/easing.frag was not found on this server.</p>
<hr>
<address>Apache/2.4.7 (Ubuntu) Server at patriciogonzalezvivo.com Port 80</address>
</body></html>

Looks like this file is missing: http://patriciogonzalezvivo.com/2015/thebookofshaders/06/easing.frag

Thanks again for the awesome resource!

PDF build fails with xelatex missing on OSX

Creating this PDF is really not for beginners. I started with my last post #12 . Now let's try to really build a pdf out of the .text file.

The simple way

Waiiiiit, maybe you just want that pdf, doesn't matter if you built it your own! So please choose the simple way and download it from here:

The Book Of Shaders PDF

The pain way

Install xelatex

The parseBook.py always told me:

Successful building of ./book.tex
pandoc: xelatex not found. xelatex is needed for pdf output.
Error in building of ./book.pdf

I couldn't find xelatex on brew so I asked google and google said, port it (it's a monster package):

sudo port install texlive-xetex

Fix latex imports

After installing it, let's try the building again:

Successful building of ./book.tex
pandoc: Could not find image `matrixes.png', skipping...
pandoc: Could not find image `warmerdam.jpg', skipping...
pandoc: Could not find image `tartan.jpg', skipping...
pandoc: Could not find image `ryoji-ikeda.jpg', skipping...
! LaTeX Error: File `lmodern.sty' not found.

Type X to quit or <RETURN> to proceed,
or enter new name. (Default extension: sty)

Enter file name: 
! Emergency stop.
<read *> 

l.3 \usepackage

pandoc: Error producing PDF from TeX source
Error in building of ./book.pdf

Thank you University of Nebraska-Lincoln because they were hosting the lmodern.sty. Now building again:

! LaTeX Error: File `etoolbox.sty' not found.

Fix it with ctan.org/.../etoolbox and run it again...

Fix Font support

! Font EU1/lmr/m/n/10=[lmroman10-regular]:mapping=tex-text at 10.0pt not loadable: Metric (TFM) file or installed font not found.

Ok..come on! -.-

sudo port install texlive-fonts-recommended

Fix bad parsing in .tmp files

Wuhu, the font is now installed...but:

pandoc: Could not find image `matrixes.png', skipping...
pandoc: Could not find image `warmerdam.jpg', skipping...
pandoc: Could not find image `tartan.jpg', skipping...
pandoc: Could not find image `ryoji-ikeda.jpg', skipping...
! Unable to load picture or PDF file 'matrixes.png'.
<to be read again> 
                   }
l.2654 .../Matrix}{\includegraphics{matrixes.png}}

So maybe we have to care about the skipped files. Looks like there is something wrong..(or it's me not able to read md..) (maybe again a parsing error) (I'll fix this later...):

[![Wikipedia entry for Matrix (mathematics) ](matrixes.png)](./08/https://en.wikipedia.org/wiki/Matrix)

Change it to in the relevant .tmp file in the chapter folders:

[![Wikipedia entry for Matrix (mathematics) ](./08/matrixes.png)](https://en.wikipedia.org/wiki/Matrix)

Do this for every file which is skipped at the beginning! Now build it again...

Tadaaaaaaaaa! We've built the book of shaders! It's not perfect, some images overlay the text, but it's finally done.

Maybe we should write a book about building the book of shaders...

Can't make PDF on MacOS El Capitan 10.11.6

Hi,

I've been struggling with the process of making a PDF out of the repo. I followed every steps described on the appendix 'How to print this book' and still can't make it work. Any help appreciated. Thanks

Occurring right after the making of the shader images:

Generating ./book.pdf from: ./00/tmp.md ./01/tmp.md ./02/tmp.md ./03/tmp.md ./04/tmp.md ./05/tmp.md ./06/tmp.md ./07/tmp.md ./08/tmp.md ./09/tmp.md ./10/tmp.md ./11/tmp.md ./12/tmp.md ./13/tmp.md ./14/tmp.md ./15/tmp.md ./16/tmp.md ./17/tmp.md ./18/tmp.md ./appendix/tmp.md ./examples/tmp.md ./glossary/tmp.md Using the following flags: -N --smart --no-tex-ligatures --toc --standalone --preserve-tabs -V documentclass=scrbook -V papersize=a4 -V links-as-note -S --latex-engine=xelatex Traceback (most recent call last): File "src/parseBook.py", line 107, in <module> returnCode = subprocess.call(texPandocCommand) File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/subprocess.py", line 522, in call return Popen(*popenargs, **kwargs).wait() File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/subprocess.py", line 710, in __init__ errread, errwrite) File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/subprocess.py", line 1335, in _execute_child raise child_exception OSError: [Errno 2] No such file or directory make: *** [all] Error 1

The truchet tile example cell index

First of all, thank you very much for this amazing project.

While I was trying a truchet tile example from this page:
http://patriciogonzalezvivo.com/2015/thebookofshaders/09/

line: 36

    //      |
    //  0   |   1
    //      |
    //--------------
    //      |
    //  2   |   3
    //      |

I think the cell order should be:

    //      |
    //  2   |   3
    //      |
    //--------------
    //      |
    //  0   |   1
    //      |

as it looks to me the way you set up the vertex array, the bottom-left is the (0,0).

Chapter 13: Digital version of "Texturing and Modeling: A Procedural Approach" is now available on Kindle

https://www.amazon.com/Texturing-Modeling-Procedural-Approach-Kaufmann-ebook/dp/B01E54DILE/ref=mt_kindle?_encoding=UTF8&me=

Fails to create pdf on linux mint 19 Cinamon Tara

Thanks for this great book. The pdf build fails with:
// > Generating ./book.pdf from:
./00/tmp.md
./01/tmp.md
./02/tmp.md
./03/tmp.md
./04/tmp.md
./05/tmp.md
./06/tmp.md
./07/tmp.md
./08/tmp.md
./09/tmp.md
./10/tmp.md
./11/tmp.md
./12/tmp.md
./13/tmp.md
./14/tmp.md
./15/tmp.md
./16/tmp.md
./17/tmp.md
./18/tmp.md
./appendix/tmp.md
./examples/tmp.md
./glossary/tmp.md
Using the following flags:
-N
--smart
--no-tex-ligatures
--toc
--standalone
--preserve-tabs
-V documentclass=scrbook
-V papersize=a4
-V links-as-note
-S
--latex-engine=xelatex
Successful building of ./book.tex
! Package graphics Error: Division by 0.

See the graphics package documentation for explanation.
Type H for immediate help.
...

l.4910 \includegraphics{./12/accretion.jpg}

pandoc: Error producing PDF
Error in building of ./book.pdf

Chapter 04: shaders in Processing

In the section about shaders in Processing (chapter 4), you mention the use of the PROCESSING_COLOR_SHADER define. As of 2.2.1 and 3.0+, those defines are no longer needed, since Processing automatically determines the shader "type".

export PDF with selected language

Hello,

First of all, thanks a lot for this extremely useful ressource about shaders !

I exported a PDF version of the book in english.
I see the online ressource has translated versions of the book.
Is it possible to export the book into PDF translated into a selected language (French in my case) ?

Thanks a lot

Improving Shader Code

I saw a few cases in this book that I think could be better like:
1.Somewhere you used 1-smoothstep(a,b) while you can use smoothstep(b,a).
for example chapter 7 - Polar shapes - triangle:
color = vec3(1.0-smoothstep(.4,.41,d)); => color = vec3(smoothstep(.41,.4,d));

2.using floor function In triangle shape Is better:
your code:

  // Number of sides of your shape
  int N = 3;

  // Angle and radius from the current pixel
  float a = atan(st.x,st.y)+PI;
  float r = TWO_PI/float(N);

my Idea:

  // Number of sides of your shape
  float N = floor(3.);

  // Angle and radius from the current pixel
  float a = atan(st.x,st.y)+PI;
  float r = TWO_PI/N;

Sorry, these were simple ideas but I think it's okay.

I love your book , I read it several times and I did all practices
also I think it's much more understandable if the photo is used In this book:
The Book Of Shaders Examples.docx

Your book helped me to making shader tutorials:
How can I create a “see behind walls” effect?
How can I make a “wet surface”/“shallow puddle” shader in Unity?
How can I replicate Quantum Break's distortion particle effect?
Moving texture according to position in shader

License of examples

I'm reading chapter 7 and it has this very nice example of a circle function, with the chapter sub-heading of For your toolbox. This is implying to me that I should create my own library and use this function as a basis. I love that idea! So I found that the book is hosted here on github, and I look for the LICENSE, as I would very much like to credit the code to its original author.

However, the LICENSE file right now just says Copyright... All rights reserved. So I don't feel comfortable using the examples in my own code that I would like be able to license MIT.

I can understand not wanting the book text to be MIT, but perhaps make an exception for the examples? Otherwise its ambiguous to free software users on what the intent is (especially since this is on github.) I almost want to not read the code examples in this book, for fear that I won't be able to license my own code properly if I use them.

Fantastic book btw, thank-you!

PDF build fails with IOError on OSX

I tried to create the pdf but make does always fail with this error:

Error

Traceback (most recent call last):
  File "src/parseBook.py", line 49, in <module>
    modifiedChapterString = injectShaderBlocks(folder,modifiedChapterString)
  File "src/parseBook.py", line 26, in injectShaderBlocks
    shaderString = open(shaderPath, 'r').read()
IOError: [Errno 2] No such file or directory: './14/texture.frag" data-imgs="hokusai.jpg'
make: *** [all] Error 1

Research

It looks like the script takes a bit too much from the html. In this case it would be a parsing error, so i checked your regex:

shaderFile = re.sub(r'<div class=\"codeAndCanvas\" data=\"(.*)\"></div>', r'\1', line.rstrip())

This regex should filter out the .frag in this line:

<div class="codeAndCanvas" data="texture-resolution.frag" data-imgs="nicephore.jpg"></div>

Problem

Now the problem is:

1. There is an unescaped / at the end of the query.
2. The (.*) is too greedy. It does not care about other attributes in the html div.

So the result of the first group is:
texture-resolution.frag" data-imgs="nicephore.jpg

Fix

We could try make a stronger regex if we know how the files are named. They just contain -, A-Za-z, . and end with a frag so why don't we just try to match them and leave everything else away?

data=\"([\w\-\.]+frag)\"

Now we can replace the line in the script with a simple regex search and get the filename in the first group value:

shaderFile = re.findall('data=\"([\w\-\.]+frag)\"', line)[0]

Finally it works!...ehm...the generation of the frag's works. I have a .tex file now, but the pdf generation still does not work. If I find the solution I will open another issue.

As a help for other Mac users want to build it themselfs

If you try to make the glslViewer on MacOSX and it does not find the glfw3 library, you have to export the path to it after install (maybe the path is different on your system):
export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig/

And you have to install xelatex!

"More" link on examples page is broken

Hi,
Thanks for the book of shaders, it is fantastic :)

I found a missing link -

To reproduce go to the page below and click "more"

http://patriciogonzalezvivo.com/2015/thebookofshaders/examples/

How can I generate an epub from this?

folder name in appendix doesn't reflect the repo name

Thanks for awesome book Patricio!

I found a small typo but potentially crucial for newbies w/o git knowledge on appendix

cd ~
git clone https://github.com/patriciogonzalezvivo/thebookofshaders.git
cd GLSL-Book
python -m SimpleHTTPServer

should be

cd ~
git clone https://github.com/patriciogonzalezvivo/thebookofshaders.git
cd thebookofshaders
python -m SimpleHTTPServer

How to remap in Shape chapter

It's about the code in "Useful properties of a Distance Field" in Shape chapter

http://patriciogonzalezvivo.com/2015/thebookofshaders/07/

To remap the coordinate, the following code is used.

vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;
st = st *2.-1.; 

It depends on the intention, but I think the following is widely applicable (especially if you think about the billboard which is not square but rectangle.)

vec2 st = (2.0 * gl_FragCoord.xy - u_resolution.xy) / min(u_resolution.x, u_resolution.y);

Unable to load picture or PDF file 'matrixes.png'

Hello there,

I am trying to compile the book into a pdf but I am getting the following error:

Successful building of ./book.tex
pandoc: Could not find image `matrixes.png', skipping...
! Unable to load picture or PDF file 'matrixes.png'.

}
l.2658 .../Matrix}{\includegraphics{matrixes.png}}

pandoc: Error producing PDF from TeX source
Error in building of ./book.pdf

Any advice on how to solve it, would be truly appreciated. Thank you.

Paulo

Error producing PDF Error in building of ./book.pdf

Successful building of ./book.tex
! File ended while scanning use of @newl@bel.

\par
l.105 \begin{document}

pandoc: Error producing PDF
Error in building of ./book.pdf

Behaviour for browsers without WebGL support

I am attempting to view this book from a browser without WebGL support. I see the content of the book briefly load before being replaced by the error message

It does not appear your computer can support WebGL.
Click here for more information.

I do not have control over my browser (I am unable to update to a newer version that includes WebGL), but I am still interested in reading the text content of the book.

Manually going through the pages in this repository is a fine workaround for me, but I think that in general it would be less painful for readers in my situation if the text was still accessible from the main web page, and the above error message replaced the individual demos that make use of WebGL, instead of all the content.

Love the book, though!

15 cant show glEditor

y = rand(x) behaviour around x = PI

Reading the excellent book, I saw this plot on my Mac OS X 10.11:

There are two bits where rand() has a strange distribution favouring the edges, x = PI and -PI. Does anyone else see this, and why is it?

Examples

Is it possible to put hints (examples) along with the exercises you give? Thanks!

Chapter 05

hey Patricio! this is a great book. I has started reading this book many times to refresh shader's concepts, but always got stucked on Chapter 05, until today that I've decided to understand it.
I've noticed you've already added this on TODO, but this is just to share my opinion.
The hard part is the color sums. Maybe splitting them, suggesting to preview the result of each one i.e.

//color = (1.0-pct)*color;

//color = pct*vec3(0.0,1.0,0.0);

color = (1.0-pct)*color + pct*vec3(0.0,1.0,0.0);

The same with smoothstep() function, although you've already offered a help tip

// the original tip
float y = smoothstep(0.2,0.5,st.x) - smoothstep(0.5,0.8,st.x);

// making the values similar to the plot() function
float y = smoothstep(0.48,0.5,st.x) - smoothstep(0.5,0.52,st.x);

great work...

Need Update!!

Thx for your awesome work, when will you update the new chapters? can't wait 😋

Confusing Variable Names

The circle example uses a variable named l, and it looks a lot like the number 1 on the website. It might be better to change that variable name. I've lost some time figuring out that the dot() function used the l variable and not the number 1.

Website is broken ...

https://thebookofshaders.com/ 😱 !

chapter 11 - x > y and y > x excludes the case when x == y

To be precise, "by detecting if x > y (lower" triangle) or y > x (upper triangle)" should be "y >= x (upper triangle)"

What does "pct" mean?

You use pct throughout your examples, and I assume that's a standard GLSL term, but I can't seem to find a definition in the book. Is that an acronym?

chapter 7: shapes needs more clarity

"Let’s take a look at the distance field formula on line 19. There we are calculating the distance to the position on (.3,.3) or vec3(.3) in all four quadrants (that’s what abs() is doing there)."

for example is kind of a hard idea to grasp. why does abs() create four quadrants?
why does min() create a new pattern the way it does?

Making PDF or offline version

Thank you for a nice book!

Currently, the "Make a PDF of the book to print" and "Make a off-line version of this book on About this Book section lead to 404. Is this intended?

Can I use this book in my book?

Sorry to be so unconventional, but I don't have access to Twitter and I really need a response.
I'm combining tutorials, rephrasing them, changing the examples, and translating them to Persian and publishing it for free on the internet. About 50% of this book is original and my own, only 30% is based on other tutorials. And shaders, being complex as they are, are based on other tutorials. I will also use other sources. I will NOT use anything withotu permission.

Provided that I mention this book in the bibliography section, can I use it in my book? Remember that the target audience for my book is teenagers and hobbyists, and it will be completely free.

Thank you.

gradient noise labeled as value noise in example shaders

in four shaders a function that implements gradient noise was labeled as
value noise and linked to IQ's value noise example on shadertoy. it's just a comment (doesn't have any bearing on how the shaders work) but it confused me as someone who was just learning the difference between the two.

proposed change here #247

Retrofit the website into a Superbook container?

I was thinking of adapting the website into a Superbook container using bookiza. Something like this: https://bubblin.io/cover/bookiza-documentation-by-marvin-danig

Will need bit of your help for that.

ch 11: iq's value noise example wrong editor link

The editor link on iq's value noise example is wrong:
https://thebookofshaders.com/edit.php#11/2d-vnoise.frag