Archives
/
thebookofshaders
mirror of https://github.com/patriciogonzalezvivo/thebookofshaders
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:patriciogonzalezvivo/thebookofshaders

Browse Source
pull/7/head
Patricio Gonzalez Vivo 9 years ago
parent 9bc0460fee c2b403fb70
commit 7565766024
23 changed files with 70 additions and 178 deletions
Show Stats Download Patch File Download Diff File

8
00/README.md
Unescape Escape View File

@ -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?
@ -38,11 +38,11 @@ Not much! If you have a modern browser that can do WebGL (like Chrome, Firefox o
Alternatively, based on what you have or what you need from this book you can:
- [Make a off-line version of this book](../90/)
- [Make a off-line version of this book](http://thebookofshaders.com/appendix/index.html#00.md)
- [Run the examples on a RaspberryPi without a browser](../91/)
- [Run the examples on a RaspberryPi without a browser](http://thebookofshaders.com/appendix/index.html#01.md)
- [Make a PDF of the book to print](../92/)
- [Make a PDF of the book to print](http://thebookofshaders.com/appendix/index.html#02.md)
- Use the [on-line repository](https://github.com/patriciogonzalezvivo/thebookofshaders) to help resolve issues and share code.

4
01/README.md
Unescape Escape View File

@ -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!

2
02/README.md
Unescape Escape View File

@ -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;```).

2
04/README.md
Unescape Escape View File

@ -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;

6
05/cubicpulse.frag
Unescape Escape View File

@ -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() {

6
05/expo.frag
Unescape Escape View File

@ -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() {

6
05/expstep.frag
Unescape Escape View File

@ -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() {

6
05/impulse.frag
Unescape Escape View File

@ -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() {

6
05/linear.frag
Unescape Escape View File

@ -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() {

6
05/parabola.frag
Unescape Escape View File

@ -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() {

6
05/pcurve.frag
Unescape Escape View File

@ -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() {

6
05/smoothstep.frag
Unescape Escape View File

@ -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() {

6
05/step.frag
Unescape Escape View File

@ -7,9 +7,9 @@ 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() {

68
91/index.html
Unescape Escape View File

@ -1,68 +0,0 @@
<!-- Copyright 2015 Patricio Gonzalez Vivo (http://patriciogonzalezvivo.com) -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using this book with a RasbperryPi</title>
<meta name="keywords" content="raspberry,pi,glsl,shader,github,glsViewer" />
<meta name="description" content="This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders."/>
<!-- CodeMirror -->
<link type='text/css' rel='stylesheet' href="../src/codemirror/css/codemirror.css">
<link type='text/css' rel="stylesheet" href="../src/codemirror/addon/fold/foldgutter.css">
<link type='text/css' rel="stylesheet" href="../src/codemirror/addon/dialog/dialog.css">
<link type='text/css' rel="stylesheet" href="../src/codemirror/addon/hint/show-hint.css">
<link type='text/css' rel="stylesheet" href="../src/codemirror/theme/neo.css">
<script type="text/javascript" src="../src/codemirror.js"></script>
<script type="text/javascript" src="../src/codemirror/addon/search/searchcursor.js"></script>
<script type="text/javascript" src="../src/codemirror/addon/search/search.js"></script>
<script type="text/javascript" src="../src/codemirror/addon/dialog/dialog.js"></script>
<script type="text/javascript" src="../src/codemirror/addon/edit/matchbrackets.js"></script>
<script type="text/javascript" src="../src/codemirror/addon/edit/closebrackets.js"></script>
<script type="text/javascript" src="../src/codemirror/addon/comment/comment.js"></script>
<script type="text/javascript" src="../src/codemirror/addon/wrap/hardwrap.js"></script>
<script type="text/javascript" src="../src/codemirror/addon/fold/foldcode.js"></script>
<script type="text/javascript" src="../src/codemirror/addon/fold/brace-fold.js"></script>
<script type="text/javascript" src="../src/codemirror/keymap/sublime.js"></script>
<script type="text/javascript" src="../src/codemirror/addon/hint/show-hint.js"></script>
<script type="text/javascript" src="../src/codemirror/mode/clike.js"></script>
<!-- Highlight -->
<link type='text/css' rel='stylesheet' href="../css/github.css">
<script type="text/javascript" src="../src/highlight.min.js"></script>
<!-- Marked -->
<script type="text/javascript" src="../src/marked.js"></script>
<!-- My stuff -->
<link type='text/css' rel='stylesheet' href="../css/style.css">
<script type="text/javascript" src="../src/glslCanvas.js"></script>
</head>
<body>
<div class="header"><p><a href="http://patriciogonzalezvivo.com/2015/thebookofshaders/">The Book of Shaders</a> by <a href="http://patriciogonzalezvivo.com">Patricio Gonzalez Vivo</a></p></div>
<hr>
<div id="content"> </div>
<hr>
<ul class="navigationBar" >
<li class="navigationBar" onclick="homePage()"> Home </li>
</ul>
<footer>
<p> Copyright 2015 <a href="http://www.patriciogonzalezvivo.com" target="_blank">Patricio Gonzalez Vivo</a> </p>
</footer>
<script type="text/javascript" src="../src/main.js" defer></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-18824436-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>

68
92/index.html
Unescape Escape View File

@ -1,68 +0,0 @@
<!-- Copyright 2015 Patricio Gonzalez Vivo (http://patriciogonzalezvivo.com) -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to print this book?</title>
<meta name="keywords" content="glsl,shader,github,book,pdf,print" />
<meta name="description" content="This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders."/>
<!-- CodeMirror -->
<link type='text/css' rel='stylesheet' href="../src/codemirror/css/codemirror.css">
<link type='text/css' rel="stylesheet" href="../src/codemirror/addon/fold/foldgutter.css">
<link type='text/css' rel="stylesheet" href="../src/codemirror/addon/dialog/dialog.css">
<link type='text/css' rel="stylesheet" href="../src/codemirror/addon/hint/show-hint.css">
<link type='text/css' rel="stylesheet" href="../src/codemirror/theme/neo.css">
<script type="text/javascript" src="../src/codemirror.js"></script>
<script type="text/javascript" src="../src/codemirror/addon/search/searchcursor.js"></script>
<script type="text/javascript" src="../src/codemirror/addon/search/search.js"></script>
<script type="text/javascript" src="../src/codemirror/addon/dialog/dialog.js"></script>
<script type="text/javascript" src="../src/codemirror/addon/edit/matchbrackets.js"></script>
<script type="text/javascript" src="../src/codemirror/addon/edit/closebrackets.js"></script>
<script type="text/javascript" src="../src/codemirror/addon/comment/comment.js"></script>
<script type="text/javascript" src="../src/codemirror/addon/wrap/hardwrap.js"></script>
<script type="text/javascript" src="../src/codemirror/addon/fold/foldcode.js"></script>
<script type="text/javascript" src="../src/codemirror/addon/fold/brace-fold.js"></script>
<script type="text/javascript" src="../src/codemirror/keymap/sublime.js"></script>
<script type="text/javascript" src="../src/codemirror/addon/hint/show-hint.js"></script>
<script type="text/javascript" src="../src/codemirror/mode/clike.js"></script>
<!-- Highlight -->
<link type='text/css' rel='stylesheet' href="../css/github.css">
<script type="text/javascript" src="../src/highlight.min.js"></script>
<!-- Marked -->
<script type="text/javascript" src="../src/marked.js"></script>
<!-- My stuff -->
<link type='text/css' rel='stylesheet' href="../css/style.css">
<script type="text/javascript" src="../src/glslCanvas.js"></script>
</head>
<body>
<div class="header"><p><a href="http://patriciogonzalezvivo.com/2015/thebookofshaders/">The Book of Shaders</a> by <a href="http://patriciogonzalezvivo.com">Patricio Gonzalez Vivo</a></p></div>
<hr>
<div id="content"> </div>
<hr>
<ul class="navigationBar" >
<li class="navigationBar" onclick="homePage()"> Home </li>
</ul>
<footer>
<p> Copyright 2015 <a href="http://www.patriciogonzalezvivo.com" target="_blank">Patricio Gonzalez Vivo</a> </p>
</footer>
<script type="text/javascript" src="../src/main.js" defer></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-18824436-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>

8
README.md
Unescape Escape View File

@ -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#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)
## About the Author

2
90/README.md → appendix/00.md
Unescape Escape View File

@ -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.

0
91/README.md → appendix/01.md
Unescape Escape View File

0
92/README.md → appendix/02.md
Unescape Escape View File

7
appendix/README.md
Unescape Escape View File

@ -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)

0
90/index.html → appendix/index.html
Unescape Escape View File

23
examples/README.md
Unescape Escape View File

@ -1,2 +1,25 @@
# List of Examples
### Chapters examples
* Getting started
* Hello World
- ["Hello World!"](http://thebookofshaders.com/edit.html#02/hello_world.frag)
* Uniforms
- [u_time](http://thebookofshaders.com/edit.html#03/time.frag)
- [gl_FragCoord](http://thebookofshaders.com/edit.html#03/space.frag)
* Algorithmic drawing
* Shaping functions
- [Linear Interpolation](http://thebookofshaders.com/edit.html#05/linear.frag)
- [Exponential Interpolation](http://thebookofshaders.com/edit.html#05/expo.frag)
- [Step function](http://thebookofshaders.com/edit.html#05/step.frag)
- [Smoothstep function](http://thebookofshaders.com/edit.html#05/smoothstep.frag)
- [Iñigo Quiles's impulse](http://thebookofshaders.com/edit.html#05/impulse.frag)
- [Iñigo Quiles's Cubic Pulse](http://thebookofshaders.com/edit.html#05/cubicpulse.frag)
- [Iñigo Quiles's Exponential Step](http://thebookofshaders.com/edit.html#05/expstep.frag)
- [Iñigo Quiles's Parabola](http://thebookofshaders.com/edit.html#05/parabola.frag)
- [Iñigo Quiles's Power Curve](http://thebookofshaders.com/edit.html#05/pcurve.frag)
### Advance
* [Moon](http://thebookofshaders.com/edit.html#examples/moon.frag&examples/images/moon-texture.jpg)

2
index.html
Unescape Escape View File

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<title>GLSL Book</title>
<title>The Book of Shaders</title>
<meta name="keywords" content="shader,shaders,GLSL,book,pixel,fragment,uniform,texture,procedural,generative,matrix,random,noise" />
<meta name="description" content="This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders." />

Write Preview
Loading…
Cancel
Save