diff --git a/00/README.md b/00/README.md
index a7ddbb9..36421ca 100644
--- a/00/README.md
+++ b/00/README.md
@@ -18,7 +18,7 @@ In the following chapters you will discover how incredibly fast and powerful thi
This book is written for creative coders, game developers and engineers who have coding experience, a basic knowledge of linear algebra and trigonometry, and who want to take their work to an exciting new level of graphical quality. (If you want to learn how to code, I highly recommend you start with [Processing](https://processing.org/) and come back later when you are comfortable with it.)
-This book will teach you how to use and integrate shaders into your projects, improving their performance and graphical quality. Because GLSL (OpenGL Shading Language) shaders compile and run on a variety of platforms, you will be able to apply what you learn here to any enviroment that uses OpenGL, OpenGL ES or WebGL. In other words, you will be able to apply and use your knowledge with [Processing](https://processing.org/) sketches, [openFrameworsk](http://openframeworks.cc/) applications, [Cinder](http://libcinder.org/) interactive installations, [Three.js](http://threejs.org/) websites or iOS/Android games.
+This book will teach you how to use and integrate shaders into your projects, improving their performance and graphical quality. Because GLSL (OpenGL Shading Language) shaders compile and run on a variety of platforms, you will be able to apply what you learn here to any enviroment that uses OpenGL, OpenGL ES or WebGL. In other words, you will be able to apply and use your knowledge with [Processing](https://processing.org/) sketches, [openFrameworks](http://openframeworks.cc/) applications, [Cinder](http://libcinder.org/) interactive installations, [Three.js](http://threejs.org/) websites or iOS/Android games.
## What does this book cover?
diff --git a/01/README.md b/01/README.md
index f7d727f..0cee132 100644
--- a/01/README.md
+++ b/01/README.md
@@ -39,10 +39,10 @@ GLSL stands for openGL Shading Language, which is the specific standard of shade
## Why are Shaders famously painful?
-As Uncle Ben said “with great power comes great responsibility,” and parallel computation follows this rule; the powerful architectural design of the GPU comes with its own constrains and restrictions.
+As Uncle Ben said “with great power comes great responsibility,” and parallel computation follows this rule; the powerful architectural design of the GPU comes with its own constraints and restrictions.
In order to run in parallel every pipe, or thread, has to be independent from every other thread. We say the threads are *blind* to what the rest of the threads are doing. This restriction implies that all data must flow in the same direction. So it’s impossible to check the result of another thread, modify the input data, or pass the outcome of a thread into another thread. Allowing thread-to-thread communications puts the integrity of the data at risk.
-Also the GPU keeps the parallel micro-processor (the pipes) constantly busy; as soon as they get free they receive new information to processes. It's impossible for a thread to know what it was doing in the previous moment. It could be drawing a button from the UI of the operating system, then rendering a portion of sky in a game, then displaying the text of an email. Each thread is not just **blind** but also **memoryless**. Besides the abstraction require to code a general function that changes the result pixel by pixel depending on its position, the blind and memoryless constraints make shaders not very popular among beginning programmers.
+Also the GPU keeps the parallel micro-processor (the pipes) constantly busy; as soon as they get free they receive new information to process. It's impossible for a thread to know what it was doing in the previous moment. It could be drawing a button from the UI of the operating system, then rendering a portion of sky in a game, then displaying the text of an email. Each thread is not just **blind** but also **memoryless**. Besides the abstraction required to code a general function that changes the result pixel by pixel depending on its position, the blind and memoryless constraints make shaders not very popular among beginning programmers.
Don't worry! In the following chapters, we will learn step-by-step how to go from simple to advanced shading computations. If you are reading this with a modern browser, you will appreciate playing with the interactive examples. So let's not delay the fun any longer and press *Next >>* to jump into the code!
\ No newline at end of file
diff --git a/02/README.md b/02/README.md
index 0195f1d..d09ec57 100644
--- a/02/README.md
+++ b/02/README.md
@@ -18,7 +18,7 @@ Although these simple lines of code don't look like a lot, we can infer substant
4. If we look closely to the ```vec4``` type we can infer that the four arguments respond to the RED, GREEN, BLUE and ALPHA channels. Also we can see that these values are *normalized*, which means they go from ```0.0``` to ```1.0```. Later, we will learn how normalizing values makes it easier to *map* values between variables.
-5. Another important *C feature* we can see in this example is the presence of preprocessor macros. Macros are part of a pre-compilation step. With them it is possible to ```#define``` global variables and do some basic conditional operation ( with ```#ifdef``` and ```#endif```). All the macro comands begin with a hastag (```#```). Pre-compilation happens right before compiling and copies all the calls to ```#defines``` and check ```#ifdef``` (is defined) and ```#ifndef``` (is not defined) conditionals. In our "hello world!" example above, we only insert the line 2 if ```GL_ES``` is defined, which mostly happens when the code is compiled on mobile devices and browsers.
+5. Another important *C feature* we can see in this example is the presence of preprocessor macros. Macros are part of a pre-compilation step. With them it is possible to ```#define``` global variables and do some basic conditional operation ( with ```#ifdef``` and ```#endif```). All the macro comands begin with a hashtag (```#```). Pre-compilation happens right before compiling and copies all the calls to ```#defines``` and check ```#ifdef``` (is defined) and ```#ifndef``` (is not defined) conditionals. In our "hello world!" example above, we only insert the line 2 if ```GL_ES``` is defined, which mostly happens when the code is compiled on mobile devices and browsers.
6. Float types are vital in shaders, so the level of *precision* is crucial. Lower precision means faster rendering, but on behalf of quality. You can be picky and specify the precision of each variable that uses floating point. In the first line (```precision mediump float;```) we are setting all floats to medium precision. But we can choose to set them to low (```precision lowp float;```) or high (```precision highp float;```).
diff --git a/04/README.md b/04/README.md
index a5de850..a5b80a5 100644
--- a/04/README.md
+++ b/04/README.md
@@ -113,7 +113,7 @@ void draw() {
}
```
-In the order for the shader to work, you need to add the following line at the beginning of your shader: ```#define PROCESSING_COLOR_SHADER```. So in Processing a shader looks like this:
+In the order for the shader to work on versions previus to 2.1, you need to add the following line at the beginning of your shader: ```#define PROCESSING_COLOR_SHADER```. So it looks like this:
```glsl
#ifdef GL_ES
precision mediump float;
diff --git a/05/cubicpulse.frag b/05/cubicpulse.frag
index a365991..f1461f5 100644
--- a/05/cubicpulse.frag
+++ b/05/cubicpulse.frag
@@ -15,9 +15,9 @@ float cubicPulse( float c, float w, float x ){
return 1.0 - x*x*(3.0-2.0*x);
}
-float plot(vec2 _st, float _pct){
- return smoothstep( _pct-0.02, _pct, _st.y) -
- smoothstep( _pct, _pct+0.02, _st.y);
+float plot(vec2 st, float pct){
+ return smoothstep( pct-0.02, pct, st.y) -
+ smoothstep( pct, pct+0.02, st.y);
}
void main() {
diff --git a/05/expo.frag b/05/expo.frag
index 377b0ae..8f02d22 100644
--- a/05/expo.frag
+++ b/05/expo.frag
@@ -8,9 +8,9 @@ uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
-float plot(vec2 _st, float _pct){
- return smoothstep( _pct-0.01, _pct, _st.y) -
- smoothstep( _pct, _pct+0.01, _st.y);
+float plot(vec2 st, float pct){
+ return smoothstep( pct-0.02, pct, st.y) -
+ smoothstep( pct, pct+0.02, st.y);
}
void main() {
diff --git a/05/expstep.frag b/05/expstep.frag
index bf25534..60369d4 100644
--- a/05/expstep.frag
+++ b/05/expstep.frag
@@ -12,9 +12,9 @@ float expStep( float x, float k, float n ){
return exp( -k*pow(x,n) );
}
-float plot(vec2 _st, float _pct){
- return smoothstep( _pct-0.01, _pct, _st.y) -
- smoothstep( _pct, _pct+0.01, _st.y);
+float plot(vec2 st, float pct){
+ return smoothstep( pct-0.02, pct, st.y) -
+ smoothstep( pct, pct+0.02, st.y);
}
void main() {
diff --git a/05/impulse.frag b/05/impulse.frag
index 93995bc..9ca5091 100644
--- a/05/impulse.frag
+++ b/05/impulse.frag
@@ -13,9 +13,9 @@ float impulse( float k, float x ){
return h*exp(1.0-h);
}
-float plot(vec2 _st, float _pct){
- return smoothstep( _pct-0.01, _pct, _st.y) -
- smoothstep( _pct, _pct+0.01, _st.y);
+float plot(vec2 st, float pct){
+ return smoothstep( pct-0.02, pct, st.y) -
+ smoothstep( pct, pct+0.02, st.y);
}
void main() {
diff --git a/05/linear.frag b/05/linear.frag
index 821d0f8..e594a92 100644
--- a/05/linear.frag
+++ b/05/linear.frag
@@ -7,9 +7,9 @@ uniform vec2 u_mouse;
uniform float u_time;
// Plot a line on Y using a value between 0.0-1.0
-float plot(vec2 _st, float _pct){
- return smoothstep( _pct-0.01, _pct, _st.y) -
- smoothstep( _pct, _pct+0.01, _st.y);
+float plot(vec2 st, float pct){
+ return smoothstep( pct-0.02, pct, st.y) -
+ smoothstep( pct, pct+0.02, st.y);
}
void main() {
diff --git a/05/parabola.frag b/05/parabola.frag
index 21dfadc..6b9f5ed 100644
--- a/05/parabola.frag
+++ b/05/parabola.frag
@@ -11,9 +11,9 @@ float parabola( float x, float k ){
return pow( 4.0*x*(1.0-x), k );
}
-float plot(vec2 _st, float _pct){
- return smoothstep( _pct-0.01, _pct, _st.y) -
- smoothstep( _pct, _pct+0.01, _st.y);
+float plot(vec2 st, float pct){
+ return smoothstep( pct-0.02, pct, st.y) -
+ smoothstep( pct, pct+0.02, st.y);
}
void main() {
diff --git a/05/pcurve.frag b/05/pcurve.frag
index e6cb85e..33fc204 100644
--- a/05/pcurve.frag
+++ b/05/pcurve.frag
@@ -13,9 +13,9 @@ float pcurve( float x, float a, float b ){
return k * pow( x, a ) * pow( 1.0-x, b );
}
-float plot(vec2 _st, float _pct){
- return smoothstep( _pct-0.01, _pct, _st.y) -
- smoothstep( _pct, _pct+0.01, _st.y);
+float plot(vec2 st, float pct){
+ return smoothstep( pct-0.02, pct, st.y) -
+ smoothstep( pct, pct+0.02, st.y);
}
void main() {
diff --git a/05/smoothstep.frag b/05/smoothstep.frag
index cb74404..7111a30 100644
--- a/05/smoothstep.frag
+++ b/05/smoothstep.frag
@@ -8,15 +8,15 @@ uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
-float plot(vec2 _st, float _pct){
- return smoothstep( _pct-0.01, _pct, _st.y) -
- smoothstep( _pct, _pct+0.01, _st.y);
+float plot(vec2 st, float pct){
+ return smoothstep( pct-0.02, pct, st.y) -
+ smoothstep( pct, pct+0.02, st.y);
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution;
- // Everthins is over 0.5 will be 1.0 the rest 0.0
+ // Smooth interpolation between 0.1 and 0.9
float y = smoothstep(0.1,0.9,st.x);
vec3 color = vec3(y);
diff --git a/05/step.frag b/05/step.frag
index c7fa24d..927a213 100644
--- a/05/step.frag
+++ b/05/step.frag
@@ -7,16 +7,16 @@ precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
-float plot(vec2 _st, float _pct){
- return smoothstep( _pct-0.01, _pct, _st.y) -
- smoothstep( _pct, _pct+0.01, _st.y);
+float plot(vec2 st, float pct){
+ return smoothstep( pct-0.02, pct, st.y) -
+ smoothstep( pct, pct+0.02, st.y);
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution;
// Step will return 0.0 unless the value is over 0.5,
- // in that case will return 1.0
+ // in that case it will return 1.0
float y = step(0.5,st.x);
vec3 color = vec3(y);
diff --git a/91/index.html b/91/index.html
deleted file mode 100644
index a04e83a..0000000
--- a/91/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
-
-
-
-
-
-
- Using this book with a RasbperryPi
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/README.md b/README.md
index 5179191..77019c8 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-
+
# The Book of Shaders
*by [Patricio Gonzalez Vivo](http://patriciogonzalezvivo.com/)*
@@ -50,10 +50,10 @@ This is a gentle step-by-step guide through the abstract and complex universe of
* Environmental-maps (spherical and cube)
* Reflect and refract
-* Appendix
- * [How can I navigate this book offline?](90/)
- * [How to use this book in a classroom with RaspberryPi?](91/)
- * [How to print this book?](92/)
+* [Appendix](appendix/)
+ * [How can I navigate this book offline?](http://thebookofshaders.com/appendix/index.html#02.md)
+ * [How to use this book in a classroom with RaspberryPi?](http://thebookofshaders.com/appendix/index.html#02.md)
+ * [How to print this book?](http://thebookofshaders.com/appendix/index.html#02.md)
## About the Author
diff --git a/90/README.md b/appendix/00.md
similarity index 97%
rename from 90/README.md
rename to appendix/00.md
index 08d7096..5830b3e 100644
--- a/90/README.md
+++ b/appendix/00.md
@@ -1,5 +1,3 @@
-# APENDIX
-
## How can I navigate this book off-line?
Let’s say you have a long trip and you want to use it to teach yourself some shaders. In that case you can make a local copy of this book on your computer and run a local server.
@@ -27,7 +25,7 @@ Once you have everything installed you just need to do:
```bash
cd ~
git clone https://github.com/patriciogonzalezvivo/thebookofshaders.git
-cd GLSL-Book
+cd thebookofshaders
python -m SimpleHTTPServer
```
diff --git a/91/README.md b/appendix/01.md
similarity index 98%
rename from 91/README.md
rename to appendix/01.md
index b371a9a..8c797f1 100644
--- a/91/README.md
+++ b/appendix/01.md
@@ -15,7 +15,7 @@ make
make install
cd ~
git clone https://github.com/patriciogonzalezvivo/thebookofshaders.git
-cd GLSL-Book
+cd thebookofshaders
```
At the end of each section you will find code and non-code based exercises to give to your students. They are designed to help students immediately put concepts into practice, making concrete the abstract principles of parallel programming.
diff --git a/92/README.md b/appendix/02.md
similarity index 98%
rename from 92/README.md
rename to appendix/02.md
index d3cc516..75f8cf9 100644
--- a/92/README.md
+++ b/appendix/02.md
@@ -62,7 +62,7 @@ For that open your terminal once again and type:
```bash
cd ~
git clone https://github.com/patriciogonzalezvivo/thebookofshaders.git
-cd GLSL-Book
+cd thebookofshaders
make
```
diff --git a/appendix/README.md b/appendix/README.md
new file mode 100644
index 0000000..03d9281
--- /dev/null
+++ b/appendix/README.md
@@ -0,0 +1,7 @@
+# Appendix
+
+* [How can I navigate this book off-line?](http://thebookofshaders.com/appendix/index.html#00.md)
+
+* [How to use this book in a classroom with RaspberryPi?](http://thebookofshaders.com/appendix/index.html#01.md)
+
+* [How to print this book?](http://thebookofshaders.com/appendix/index.html#02.md)
diff --git a/90/index.html b/appendix/index.html
similarity index 99%
rename from 90/index.html
rename to appendix/index.html
index 6efa064..6ffa9f5 100644
--- a/90/index.html
+++ b/appendix/index.html
@@ -54,6 +54,7 @@
+