Archives/thebookofshaders
2
0
Fork 0
mirror of https://github.com/patriciogonzalezvivo/thebookofshaders synced 2024-11-03 23:15:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into non-edited

Browse Source
This commit is contained in:
Patricio Gonzalez Vivo 2015-03-17 10:12:59 -04:00
commit 95b51111ba
26 changed files with 78 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
00/README.md
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?

4
01/README.md
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
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
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
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
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
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
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
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
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
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() {

8
05/smoothstep.frag
View File

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

8
05/step.frag
View File

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

68
91/index.html
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
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>

10
README.md
View File

@ -1,4 +1,4 @@
<canvas id="custom" class="canvas" data-fragment-url="examples/moon.frag" data-textures="examples/images/moon-texture.jpg" width="400px" height="400px"></canvas>
<canvas id="custom" class="canvas" data-fragment-url="examples/moon.frag" data-textures="examples/images/moon-texture.jpg" width="350px" height="350px"></canvas>
# 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

4
90/README.md → appendix/00.md
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.
@ -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
```

2
91/README.md → appendix/01.md
View File

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

2
92/README.md → appendix/02.md
View File

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

7
appendix/README.md Normal file
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)

1
90/index.html → appendix/index.html
View File

@ -54,6 +54,7 @@
</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),

23
examples/README.md
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
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." />

1
src/glslCanvas.js
View File

@ -339,6 +339,7 @@ function fetchHTTP(url, methood){
}
}
request.open(methood ? methood : 'GET', url, false);
request.overrideMimeType("text/plain");
request.send();
return response;
}

5
src/main.js
View File

@ -114,7 +114,8 @@ function fetchHTTP(url, methood){
}
}
request.open(methood ? methood : 'GET', url, false);
request.send();
request.overrideMimeType("text/plain");
request.send(null);
return response;
}
@ -140,7 +141,7 @@ function loadMarkdown(){
} else {
mdText = fetchHTTP("README.md");
}
content.innerHTML = marked(mdText);
document.getElementById('content').innerHTML = marked(mdText);
// parse CODE & CANVAS boxes
var ccList = document.querySelectorAll(".codeAndCanvas");

BIN
thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB