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

chapter 07: Shapes + glossary

Browse Source
pull/9/head
Patricio Gonzalez Vivo 10 years ago
parent 389fa557c1
commit 66a9bdf90e
121 changed files with 2301 additions and 430 deletions
Show Stats Download Patch File Download Diff File

24
05/README.md
Unescape Escape View File

@ -19,25 +19,25 @@ This one-to-one relationship between *x* and *y* (or the brightness) is know as
Interesting, right? On line 19 try different exponents: 20.0, 2.0, 1.0, 0.0, 0.2 and 0.02 for example. Understanding this relationship between the value and the exponent will be very helpful. Using these types of mathematical functions here and there will give you expressive control over your code, a sort of data acupuncture that let you control the flow of values.
```pow``` is a native function in GLSL and there are many others. Most of them are accelerated at the level of the hardware, which means if they are used in the right way and with discretion they will make your code faster.
[```pow()```](../glossary/index.html#pow.md) is a native function in GLSL and there are many others. Most of them are accelerated at the level of the hardware, which means if they are used in the right way and with discretion they will make your code faster.
Replace the power function on line 19. Try other ones like: [```exp()```](http://www.shaderific.com/glsl-functions/#exponentiation), [```log()```](http://www.shaderific.com/glsl-functions/#naturallogarithm) and [```sqrt()```](http://www.shaderific.com/glsl-functions/#squareroot). Some of these functions are more interesting when you play with them using PI. You can see on line 5 that I have defined a macro that will replace any call to ```PI``` with the value ```3.14159265359```.
Replace the power function on line 19. Try other ones like: [```exp()```](../glossary/index.html#exp.md), [```log()```](../glossary/index.html#log.md) and [```sqrt()```](../glossary/index.html#sqrt.md). Some of these functions are more interesting when you play with them using PI. You can see on line 5 that I have defined a macro that will replace any call to ```PI``` with the value ```3.14159265359```.
### Step and Smoothstep
GLSL also has some unique native interpolation functions that are hardware accelerated.
The ```step``` interpolation receives two parameters. The first one is the limit or threshold, while the second one is the value we want to check or pass. Any value under the limit will return ```0.0``` while everything above the limit will return ```1.0```.
The [```step()```](../glossary/index.html#step.md) interpolation receives two parameters. The first one is the limit or threshold, while the second one is the value we want to check or pass. Any value under the limit will return ```0.0``` while everything above the limit will return ```1.0```.
Try changing this threshold value on line 20 of the following code.
<div class="codeAndCanvas" data="step.frag"></div>
The other unique function is known as ```smoothstep```. Given a range of two numbers and a value, this function will interpolate the value between the defined range. The two first parameters are for the beginning and end of the transition, while the third is for the value to interpolate.
The other unique function is known as [```smoothstep()```](../glossary/index.html#smoothstep.md). Given a range of two numbers and a value, this function will interpolate the value between the defined range. The two first parameters are for the beginning and end of the transition, while the third is for the value to interpolate.
<div class="codeAndCanvas" data="smoothstep.frag"></div>
In the previous example, on line 12, notice that we’ve been using smoothstep to draw the green line on the ```plot()``` function. For each position along the *x* axis this function makes a *bump* at a particular value of *y*. How? By connecting two ```smoothstep()``` together. Take a look at the following function, replace it for line 20 above and think of it as a vertical cut. The background does look like a line, right?
In the previous example, on line 12, notice that we’ve been using smoothstep to draw the green line on the ```plot()``` function. For each position along the *x* axis this function makes a *bump* at a particular value of *y*. How? By connecting two [```smoothstep()```](../glossary/index.html#smoothstep.md) together. Take a look at the following function, replace it for line 20 above and think of it as a vertical cut. The background does look like a line, right?
```glsl
float y = smoothstep(0.2,0.5,st.x) - smoothstep(0.5,0.8,st.x);
@ -47,7 +47,7 @@ In the previous example, on line 12, notice that we’ve been using smoothstep t
When you want to use some math to animate, shape or blend values, there is nothing better than being friends with sine and cosine.
These two basic trigonometric functions work together to construct circles that are as handy as MacGyver’s Swiss army knife. It’s important to know how they behave and in what ways they can be combined. In a nutshell, given an angle (in radians) they will return the correct position of *x* (cosine) and *y* (sine) of a point on the edge of a circle with a radius equal to 1. But, the fact that they return normalized values (values between -1 and 1) in such a smooth way makes them an incredible tool.
These two basic trigonometric functions work together to construct circles that are as handy as MacGyver’s Swiss army knife. It’s important to know how they behave and in what ways they can be combined. In a nutshell, given an angle (in radians) they will return the correct position of *x* ([cosine](../glossary/index.html#cos.md)) and *y* ([sine](../glossary/index.html#sin.md)) of a point on the edge of a circle with a radius equal to 1. But, the fact that they return normalized values (values between -1 and 1) in such a smooth way makes them an incredible tool.
![](sincos.gif)
@ -55,7 +55,7 @@ While it's difficult to describe all the relationships between trigonometric fun
<div class="simpleFunction" data="y = sin(x);"></div>
Take a careful look at this sine wave. Note how the *y* values flow smoothly between +1 and -1. As we saw in the time example in the previous chapter, you can use this rhythmic behavior of ```sin``` to animate properties. If you are reading this example in a browser you will see that the you can change the code in the formula above to watch how the wave changes. (Note: don't forget the semicolon at the end of the lines.)
Take a careful look at this sine wave. Note how the *y* values flow smoothly between +1 and -1. As we saw in the time example in the previous chapter, you can use this rhythmic behavior of [```sin()```](../glossary/index.html#sin.md) to animate properties. If you are reading this example in a browser you will see that the you can change the code in the formula above to watch how the wave changes. (Note: don't forget the semicolon at the end of the lines.)
Try the following exercises and notice what happens:
@ -65,15 +65,15 @@ Try the following exercises and notice what happens:
* Multiply time (```u_time```) by *x* before computing the ```sin```. See how the **frequency** between phases becomes more and more compressed. Note that u_time may have already become very large, making the graph hard to read.
* Add 1.0 to ```sin(x)```. See how all the wave is **displaced** up and now all values are between 0.0 and 2.0.
* Add 1.0 to [```sin(x)```](../glossary/index.html#sin.md). See how all the wave is **displaced** up and now all values are between 0.0 and 2.0.
* Multiply ```sin(x)``` by 2.0. See how the **amplitude** doubles in size.
* Multiply [```sin(x)```](../glossary/index.html#sin.md) by 2.0. See how the **amplitude** doubles in size.
* Compute the absolute value (```abs()```) of ```sin(x)```. It looks like the trace of a **bouncing** ball.
* Compute the absolute value ([```abs()```](../glossary/index.html#abs.md)) of ```sin(x)```. It looks like the trace of a **bouncing** ball.
* Extract just the fraction part (```fract()```) of the resultant of ```sin(x)```.
* Extract just the fraction part ([```fract()```](../glossary/index.html#fract.md)) of the resultant of [```sin(x)```](../glossary/index.html#sin.md).
* Add the higher integer (```ceil()```) and the smaller integer (```floor()```) of the resultant of ```sin(x)``` to get a digital wave of 1 and -1 values.
* Add the higher integer ([```ceil()```](../glossary/index.html#ceil.md)) and the smaller integer ([```floor()```](../glossary/index.html#floor.md)) of the resultant of [```sin(x)```](../glossary/index.html#sin.md) to get a digital wave of 1 and -1 values.
### Some extra useful functions

260
06/PhotoshopMathFP.glsl
Unescape Escape View File

@ -1,260 +0,0 @@
/*
** Copyright (c) 2012, Romain Dura romain@shazbits.com
**
** Permission to use, copy, modify, and/or distribute this software for any
** purpose with or without fee is hereby granted, provided that the above
** copyright notice and this permission notice appear in all copies.
**
** THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
** WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
** MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY
** SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
** WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
** ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
** IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
*/
/*
** Photoshop & misc math
** Blending modes, RGB/HSL/Contrast/Desaturate, levels control
**
** Romain Dura | Romz
** Blog: http://mouaif.wordpress.com
** Post: http://mouaif.wordpress.com/?p=94
*/
/*
** Desaturation
*/
vec4 Desaturate(vec3 color, float Desaturation)
{
vec3 grayXfer = vec3(0.3, 0.59, 0.11);
vec3 gray = vec3(dot(grayXfer, color));
return vec4(mix(color, gray, Desaturation), 1.0);
}
/*
** Hue, saturation, luminance
*/
vec3 RGBToHSL(vec3 color)
{
vec3 hsl; // init to 0 to avoid warnings ? (and reverse if + remove first part)
float fmin = min(min(color.r, color.g), color.b); //Min. value of RGB
float fmax = max(max(color.r, color.g), color.b); //Max. value of RGB
float delta = fmax - fmin; //Delta RGB value
hsl.z = (fmax + fmin) / 2.0; // Luminance
if (delta == 0.0) //This is a gray, no chroma...
{
hsl.x = 0.0; // Hue
hsl.y = 0.0; // Saturation
}
else //Chromatic data...
{
if (hsl.z < 0.5)
hsl.y = delta / (fmax + fmin); // Saturation
else
hsl.y = delta / (2.0 - fmax - fmin); // Saturation
float deltaR = (((fmax - color.r) / 6.0) + (delta / 2.0)) / delta;
float deltaG = (((fmax - color.g) / 6.0) + (delta / 2.0)) / delta;
float deltaB = (((fmax - color.b) / 6.0) + (delta / 2.0)) / delta;
if (color.r == fmax )
hsl.x = deltaB - deltaG; // Hue
else if (color.g == fmax)
hsl.x = (1.0 / 3.0) + deltaR - deltaB; // Hue
else if (color.b == fmax)
hsl.x = (2.0 / 3.0) + deltaG - deltaR; // Hue
if (hsl.x < 0.0)
hsl.x += 1.0; // Hue
else if (hsl.x > 1.0)
hsl.x -= 1.0; // Hue
}
return hsl;
}
float HueToRGB(float f1, float f2, float hue)
{
if (hue < 0.0)
hue += 1.0;
else if (hue > 1.0)
hue -= 1.0;
float res;
if ((6.0 * hue) < 1.0)
res = f1 + (f2 - f1) * 6.0 * hue;
else if ((2.0 * hue) < 1.0)
res = f2;
else if ((3.0 * hue) < 2.0)
res = f1 + (f2 - f1) * ((2.0 / 3.0) - hue) * 6.0;
else
res = f1;
return res;
}
vec3 HSLToRGB(vec3 hsl)
{
vec3 rgb;
if (hsl.y == 0.0)
rgb = vec3(hsl.z); // Luminance
else
{
float f2;
if (hsl.z < 0.5)
f2 = hsl.z * (1.0 + hsl.y);
else
f2 = (hsl.z + hsl.y) - (hsl.y * hsl.z);
float f1 = 2.0 * hsl.z - f2;
rgb.r = HueToRGB(f1, f2, hsl.x + (1.0/3.0));
rgb.g = HueToRGB(f1, f2, hsl.x);
rgb.b= HueToRGB(f1, f2, hsl.x - (1.0/3.0));
}
return rgb;
}
/*
** Contrast, saturation, brightness
** Code of this function is from TGM's shader pack
** http://irrlicht.sourceforge.net/phpBB2/viewtopic.php?t=21057
*/
// For all settings: 1.0 = 100% 0.5=50% 1.5 = 150%
vec3 ContrastSaturationBrightness(vec3 color, float brt, float sat, float con)
{
// Increase or decrease theese values to adjust r, g and b color channels seperately
const float AvgLumR = 0.5;
const float AvgLumG = 0.5;
const float AvgLumB = 0.5;
const vec3 LumCoeff = vec3(0.2125, 0.7154, 0.0721);
vec3 AvgLumin = vec3(AvgLumR, AvgLumG, AvgLumB);
vec3 brtColor = color * brt;
vec3 intensity = vec3(dot(brtColor, LumCoeff));
vec3 satColor = mix(intensity, brtColor, sat);
vec3 conColor = mix(AvgLumin, satColor, con);
return conColor;
}
/*
** Float blending modes
** Adapted from here: http://www.nathanm.com/photoshop-blending-math/
** But I modified the HardMix (wrong condition), Overlay, SoftLight, ColorDodge, ColorBurn, VividLight, PinLight (inverted layers) ones to have correct results
*/
#define BlendLinearDodgef BlendAddf
#define BlendLinearBurnf BlendSubstractf
#define BlendAddf(base, blend) min(base + blend, 1.0)
#define BlendSubstractf(base, blend) max(base + blend - 1.0, 0.0)
#define BlendLightenf(base, blend) max(blend, base)
#define BlendDarkenf(base, blend) min(blend, base)
#define BlendLinearLightf(base, blend) (blend < 0.5 ? BlendLinearBurnf(base, (2.0 * blend)) : BlendLinearDodgef(base, (2.0 * (blend - 0.5))))
#define BlendScreenf(base, blend) (1.0 - ((1.0 - base) * (1.0 - blend)))
#define BlendOverlayf(base, blend) (base < 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)))
#define BlendSoftLightf(base, blend) ((blend < 0.5) ? (2.0 * base * blend + base * base * (1.0 - 2.0 * blend)) : (sqrt(base) * (2.0 * blend - 1.0) + 2.0 * base * (1.0 - blend)))
#define BlendColorDodgef(base, blend) ((blend == 1.0) ? blend : min(base / (1.0 - blend), 1.0))
#define BlendColorBurnf(base, blend) ((blend == 0.0) ? blend : max((1.0 - ((1.0 - base) / blend)), 0.0))
#define BlendVividLightf(base, blend) ((blend < 0.5) ? BlendColorBurnf(base, (2.0 * blend)) : BlendColorDodgef(base, (2.0 * (blend - 0.5))))
#define BlendPinLightf(base, blend) ((blend < 0.5) ? BlendDarkenf(base, (2.0 * blend)) : BlendLightenf(base, (2.0 *(blend - 0.5))))
#define BlendHardMixf(base, blend) ((BlendVividLightf(base, blend) < 0.5) ? 0.0 : 1.0)
#define BlendReflectf(base, blend) ((blend == 1.0) ? blend : min(base * base / (1.0 - blend), 1.0))
/*
** Vector3 blending modes
*/
// Component wise blending
#define Blend(base, blend, funcf) vec3(funcf(base.r, blend.r), funcf(base.g, blend.g), funcf(base.b, blend.b))
#define BlendNormal(base, blend) (blend)
#define BlendLighten BlendLightenf
#define BlendDarken BlendDarkenf
#define BlendMultiply(base, blend) (base * blend)
#define BlendAverage(base, blend) ((base + blend) / 2.0)
#define BlendAdd(base, blend) min(base + blend, vec3(1.0))
#define BlendSubstract(base, blend) max(base + blend - vec3(1.0), vec3(0.0))
#define BlendDifference(base, blend) abs(base - blend)
#define BlendNegation(base, blend) (vec3(1.0) - abs(vec3(1.0) - base - blend))
#define BlendExclusion(base, blend) (base + blend - 2.0 * base * blend)
#define BlendScreen(base, blend) Blend(base, blend, BlendScreenf)
#define BlendOverlay(base, blend) Blend(base, blend, BlendOverlayf)
#define BlendSoftLight(base, blend) Blend(base, blend, BlendSoftLightf)
#define BlendHardLight(base, blend) BlendOverlay(blend, base)
#define BlendColorDodge(base, blend) Blend(base, blend, BlendColorDodgef)
#define BlendColorBurn(base, blend) Blend(base, blend, BlendColorBurnf)
#define BlendLinearDodge BlendAdd
#define BlendLinearBurn BlendSubstract
// Linear Light is another contrast-increasing mode
// If the blend color is darker than midgray, Linear Light darkens the image by decreasing the brightness. If the blend color is lighter than midgray, the result is a brighter image due to increased brightness.
#define BlendLinearLight(base, blend) Blend(base, blend, BlendLinearLightf)
#define BlendVividLight(base, blend) Blend(base, blend, BlendVividLightf)
#define BlendPinLight(base, blend) Blend(base, blend, BlendPinLightf)
#define BlendHardMix(base, blend) Blend(base, blend, BlendHardMixf)
#define BlendReflect(base, blend) Blend(base, blend, BlendReflectf)
#define BlendGlow(base, blend) BlendReflect(blend, base)
#define BlendPhoenix(base, blend) (min(base, blend) - max(base, blend) + vec3(1.0))
#define BlendOpacity(base, blend, F, O) (F(base, blend) * O + blend * (1.0 - O))
// Hue Blend mode creates the result color by combining the luminance and saturation of the base color with the hue of the blend color.
vec3 BlendHue(vec3 base, vec3 blend)
{
vec3 baseHSL = RGBToHSL(base);
return HSLToRGB(vec3(RGBToHSL(blend).r, baseHSL.g, baseHSL.b));
}
// Saturation Blend mode creates the result color by combining the luminance and hue of the base color with the saturation of the blend color.
vec3 BlendSaturation(vec3 base, vec3 blend)
{
vec3 baseHSL = RGBToHSL(base);
return HSLToRGB(vec3(baseHSL.r, RGBToHSL(blend).g, baseHSL.b));
}
// Color Mode keeps the brightness of the base color and applies both the hue and saturation of the blend color.
vec3 BlendColor(vec3 base, vec3 blend)
{
vec3 blendHSL = RGBToHSL(blend);
return HSLToRGB(vec3(blendHSL.r, blendHSL.g, RGBToHSL(base).b));
}
// Luminosity Blend mode creates the result color by combining the hue and saturation of the base color with the luminance of the blend color.
vec3 BlendLuminosity(vec3 base, vec3 blend)
{
vec3 baseHSL = RGBToHSL(base);
return HSLToRGB(vec3(baseHSL.r, baseHSL.g, RGBToHSL(blend).b));
}
/*
** Gamma correction
** Details: http://blog.mouaif.org/2009/01/22/photoshop-gamma-correction-shader/
*/
#define GammaCorrection(color, gamma) pow(color, 1.0 / gamma)
/*
** Levels control (input (+gamma), output)
** Details: http://blog.mouaif.org/2009/01/28/levels-control-shader/
*/
#define LevelsControlInputRange(color, minInput, maxInput) min(max(color - vec3(minInput), vec3(0.0)) / (vec3(maxInput) - vec3(minInput)), vec3(1.0))
#define LevelsControlInput(color, minInput, gamma, maxInput) GammaCorrection(LevelsControlInputRange(color, minInput, maxInput), gamma)
#define LevelsControlOutputRange(color, minOutput, maxOutput) mix(vec3(minOutput), vec3(maxOutput), color)
#define LevelsControl(color, minInput, gamma, maxInput, minOutput, maxOutput) LevelsControlOutputRange(LevelsControlInput(color, minInput, gamma, maxInput), minOutput, maxOutput)

10
06/README.md
Unescape Escape View File

@ -54,7 +54,7 @@ You might not be used to picking colors with numbers - it can be very counterint
### Mixing color
Now that you know how colors are defined, it's time to integrate this with our previous knowledge. In GLSL there is a very useful function, ```mix()```, that lets you mix two values in percentages. Can you guess what the percentage range is? Yes, values between 0.0 and 1.0! Which is perfect for you, after those long hours practicing your karate moves with the fence - it is time to use them!
Now that you know how colors are defined, it's time to integrate this with our previous knowledge. In GLSL there is a very useful function, [```mix()```](../glossary/index.html#mix.md), that lets you mix two values in percentages. Can you guess what the percentage range is? Yes, values between 0.0 and 1.0! Which is perfect for you, after those long hours practicing your karate moves with the fence - it is time to use them!
![](mix-f.jpg)
@ -68,7 +68,7 @@ Show off your skills by:
### Playing with gradients
The ```mix``` function has more to offer. Instead of a single ```float```, we can pass a variable type that matches the two first arguments, in our case a ```vec3```. By doing that we gain control over the mixing percentages of each individual color channel, ```r```, ```g``` and ```b```.
The [```mix()```](../glossary/index.html#mix.md) function has more to offer. Instead of a single ```float```, we can pass a variable type that matches the two first arguments, in our case a ```vec3```. By doing that we gain control over the mixing percentages of each individual color channel, ```r```, ```g``` and ```b```.
![](mix-vec.jpg)
@ -102,13 +102,13 @@ By mapping the position on the x axis to the Hue and the position on the y axis
### HSB in polar coordinates
HSB was originally designed to be represented in polar coordinates (based on the angle and radius) instead of cartesian coordinates (based on x and y). To map our HSB function to polar coordinates we need to obtain the angle and distance from the center of the billboard to the pixel coordinate. For that we will use the ```length()``` function and ```atan(y,x)``` (which is the GLSL version of the commonly used ```atan2(y,x)```).
HSB was originally designed to be represented in polar coordinates (based on the angle and radius) instead of cartesian coordinates (based on x and y). To map our HSB function to polar coordinates we need to obtain the angle and distance from the center of the billboard to the pixel coordinate. For that we will use the [```length()```](../glossary/index.html#length.md) function and [```atan(y,x)```](../glossary/index.html#atan.md) (which is the GLSL version of the commonly used ```atan2(y,x)```).
When using vector and trigonometric functions, ```vec2```, ```vec3``` and ```vec4``` are treated as vectors even when they represent colors. We will start treating colors and vectors similarly, in fact you will come to find this conceptual flexibility very empowering.
**Note:** If you were wondering, there are more geometric functions besides [```length```](http://www.shaderific.com/glsl-functions/#length) like: [```distance()```](http://www.shaderific.com/glsl-functions/#distance), [```dot()```](http://www.shaderific.com/glsl-functions/#dotproduct), [```cross```](http://www.shaderific.com/glsl-functions/#crossproduct), [```normalize()```](http://www.shaderific.com/glsl-functions/#normalize), [```faceforward()```](http://www.shaderific.com/glsl-functions/#faceforward), [```reflect()```](http://www.shaderific.com/glsl-functions/#reflect) and [```refract()```](http://www.shaderific.com/glsl-functions/#refract). Also GLSL has special vector relational functions such as: [```lessThan()```](http://www.shaderific.com/glsl-functions/#lessthancomparison), [```lessThanEqual()```](http://www.shaderific.com/glsl-functions/#lessthanorequalcomparison), [```greaterThan()```](http://www.shaderific.com/glsl-functions/#greaterthancomparison) and [```greaterThanEqual()```](http://www.shaderific.com/glsl-functions/#greaterthanorequalcomparison).
**Note:** If you were wondering, there are more geometric functions besides [```length```](../glossary/index.html#length.md) like: [```distance()```](../glossary/index.html#distance.md), [```dot()```](../glossary/index.html#dot.md), [```cross```](../glossary/index.html#cross.md), [```normalize()```](../glossary/index.html#normalize.md), [```faceforward()```](../glossary/index.html#fraceforward.md), [```reflect()```](../glossary/index.html#reflect.md) and [```refract()```](../glossary/index.html#refract.md). Also GLSL has special vector relational functions such as: [```lessThan()```](../glossary/index.html#lessThan.md), [```lessThanEqual()```](../glossary/index.html#lessThanEqual.md), [```greaterThan()```](../glossary/index.html#greaterThan.md), [```greaterThanEqual()```](../glossary/index.html#greaterThanEqual.md), [```equal()```](../glossary/index.html#equal.md) and [```notEqual()```](../glossary/index.html#notEqual.md).
Once we obtain the angle and length we need to “normalize” their values to the range between 0.0 to 1.0. On line 27, ```atan(y,x)``` will return an angle in radians between -PI and PI (-3.14 to 3.14), so we need to divide this number by ```TWO_PI``` (defined at the top of the code) to get values between -0.5 to 0.5, which by simple addition we change to the desired range of 0.0 to 1.0. The radius will return a maximum of 0.5 (because we are calculating the distance from the center of the viewport) so we need to double this range (by multiplying by two) to get a maximum of 1.0.
Once we obtain the angle and length we need to “normalize” their values to the range between 0.0 to 1.0. On line 27, [```atan(y,x)```](../glossary/index.html#atan.md) will return an angle in radians between -PI and PI (-3.14 to 3.14), so we need to divide this number by ```TWO_PI``` (defined at the top of the code) to get values between -0.5 to 0.5, which by simple addition we change to the desired range of 0.0 to 1.0. The radius will return a maximum of 0.5 (because we are calculating the distance from the center of the viewport) so we need to double this range (by multiplying by two) to get a maximum of 1.0.
As you can see, our game here is all about transforming and mapping ranges to the 0.0 to 1.0 that we like.

6
06/gradient.frag
Unescape Escape View File

@ -11,9 +11,9 @@ uniform float u_time;
vec3 colorA = vec3(0.149,0.141,0.912);
vec3 colorB = vec3(1.000,0.833,0.224);
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.01, pct, st.y) -
smoothstep( pct, pct+0.01, st.y);
}
void main() {

4
06/index.html
Unescape Escape View File

@ -46,8 +46,8 @@
<ul class="navigationBar" >
<li class="navigationBar" onclick="previusPage()">&lt; &lt; Previous</li>
<li class="navigationBar" onclick="homePage()"> Home </li>
<!-- <li class="navigationBar" onclick="nextPage()">Next &gt; &gt;</li>
--> </ul>
<li class="navigationBar" onclick="nextPage()">Next &gt; &gt;</li>
</ul>
<footer>
<p> Copyright 2015 <a href="http://www.patriciogonzalezvivo.com" target="_blank">Patricio Gonzalez Vivo</a> </p>

231
07/README.md
Unescape Escape View File

@ -0,0 +1,231 @@
## Shapes
![Alice Hubbard, Providence, United States, ca. 1892. Photo: Zindman/Freemont.](froebel.jpg)
Finally! We have been building skills for this moment! You have learned most of the GLSL foundations, types and functions. You have practiced your shaping equations over and over. Now is the time to put it all together. You are up for this challenge! In this chapter you'll learn how to draw simple shapes in a parallel procedural way.
### Rectangle
Imagine we have grid paper like we used in math classes and our homework is to draw a square. The paper size is 10x10 and the square is supposed to be 8x8. What will you do?
![](grid_paper.jpg)
You'd paint everything except the first and last rows and the first and last column, right?
How does this relate to shaders? Each little square of our grid paper is a thread (a pixel). Each little square knows its position, like the coordinates of a chess board. In previous chapters we mapped *x* and *y* to the *red* and *green* color channels, and we learned how to use the narrow two dimensional territory between 0.0 and 1.0. How can we use this to draw a centered square in the middle of our billboard?
Let's start by sketching pseudocode that uses ```if``` statements over the spatial field. The principles to do this are remarkably similar to how we think of the grid paper scenario.
```glsl
if ( (X GREATER THAN 1) AND (Y GREATER THAN 1) )
paint white
else
paint black
```
Now that we have a better idea of how this will work, let’s replace the ```if``` statement with [```step()```](../glossary/index.html#step.md), and instead of using 10x10 let’s use normalized values between 0.0 and 1.0:
```glsl
uniform vec2 u_resolution;
void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(0.0);
// Each result will return 1.0 (white) or 0.0 (black).
float left = step(0.1,st.x); // Similar to ( X greater than 0.1 )
float bottom = step(0.1,st.y); // Similar to ( Y greater than 0.1 )
// The multiplication of left*bottom will be similar to the logical AND.
color = vec3( left * bottom );
gl_FragColor = vec4(color,1.0);
}
```
The [```step()```](../glossary/index.html#step.md) function will turn every pixel below 0.1 to black (```vec3(0.0)```) and the rest to white (```vec3(1.0)```) . The multiplication between ```left``` and ```bottom``` works as a logical ```AND``` operation, where both must be 1.0 to return 1.0 . This draws two black lines, one on the bottom and the other on the left side of the canvas.
![](rect-01.jpg)
In the previous code we repeat the structure for each axis (left and bottom). We can save some lines of code by passing two values directly to [```step()```](../glossary/index.html#step.md) instead of one. That looks like this:
```glsl
vec2 borders = step(vec2(0.1),st);
float pct = borders.x * borders.y;
```
So far, we’ve only drawn two borders (bottom-left) of our rectangle. Let's do the other two (top-right). Check out the following code:
<div class="codeAndCanvas" data="rect-making.frag"></div>
Uncomment *lines 21-22* and see how we invert the ```st``` coordinates and repeat the same [```step()```](../glossary/index.html#step.md) function. That way the ```vec2(0.0,0.0)``` will be in the top right corner. This is the digital equivalent of flipping the page and repeating the previous procedure.
![](rect-02.jpg)
Take note that in *lines 18 and 22* all of the sides are being multiplied together. This is equivalent to writing:
```glsl
vec2 bl = step(vec2(0.1),st); // bottom-left
vec2 tr = step(vec2(0.1),1.0-st); // top-right
color = vec3(bl.x * bl.y * tr.x * tr.y);
```
Interesting right? This technique is all about using [```step()```](../glossary/index.html#step.md) and multiplication for logical operations and flipping the coordinates.
Before going forward, try the following exercises:
* Change the size and proportions of the rectangle.
* Experiment with the same code but using [```smoothstep()```](../glossary/index.html#smoothstep.md) instead of [```step()```](../glossary/index.html#step.md). Note that by changing values, you can go from blurred edges to elegant smooth borders.
* Do another implementation that uses [```floor()```](../glossary/index.html#floor.md).
* Choose the implementation you like the most and make a function of it that you can reuse in the future. Make your function flexible and efficient.
* Make another function that just draws the outline of a rectangle.
* How do you think you can move and place different rectangles in the same billboard? If you figure out how, show off your skills by making a composition of rectangles and colors that resembles a [Piet Mondrian](http://en.wikipedia.org/wiki/Piet_Mondrian) painting.
![Piet Mondria - Tableau (1921)](mondrian.jpg)
### Circles
It's easy to draw squares on grid paper and rectangles on cartesian coordinates, but circles require another approach, especially since we need a "per-pixel" algorithm. One solution is to *re-map* the spatial coordinates so that we can use a [```step()```](../glossary/index.html#step.md) function to draw a circle.
How? Let's start by going back to math class and the grid paper, where we opened a compass to the radius of a circle, pressed one of the compass points at the center of the circle and then traced the edge of the circle with a simple spin.
![](compass.jpg)
Translating this to a shader where each square on the grid paper is a pixel implies *asking* each pixel (or thread) if it is inside the area of the circle. We do this by computing the distance from the pixel to the center of the circle.
![](circle.jpg)
There are several ways to calculate that distance. The easiest one uses the [```distance()```](../glossary/index.html#distance.md) function, which internally computes the [```length()```](../glossary/index.html#length.md) of the difference between two points (in our case the pixel coordinate and the center of the canvas). The ```length()``` function is nothing but a shortcut of the [hypotenuse equation](http://en.wikipedia.org/wiki/Hypotenuse) that uses square root ([```sqrt()```](../glossary/index.html#sqrt.md)) internally.
![](hypotenuse.png)
You can use [```distance()```](../glossary/index.html#distance.md), [```length()```](../glossary/index.html#length.md) or [```sqrt()```](../glossary/index.html#sqrt.md) to calculate the distance to the center of the billboard. The following code contains these three functions and the non-surprising fact that each one returns exactly same result.
* Comment and uncomment lines to try the different ways to get the same result.
<div class="codeAndCanvas" data="circle-making.frag"></div>
In the previous example we map the distance to the center of the billboard to the color brightness of the pixel. The closer a pixel is to the center, the lower (darker) value it has. 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. Contemplate this map and think:
* What you can infer from it?
* How we can use this to draw a circle?
* Modify the above code in order to contain the entire circular gradient inside the canvas.
### Distance field
We can also think of the above example as an altitude map, where darker implies taller. The gradient shows us something similar to the pattern made by a cone. Imagine yourself on the top of that cone. The horizontal distance to the edge of the cone is 0.5. This will be constant in all directions. By choosing where to “cut” the cone you will get a bigger or smaller circular surface.
![](distance-field.jpg)
Basically we are using a re-interpretation of the space (based on the distance to the center) to make shapes. This technique is known as a “distance field” and is used in different ways from font outlines to 3D graphics.
Try the following exercises:
* Use [```step()```](../glossary/index.html#step.md) to turn everything above 0.5 to white and everything below to 0.0.
* Inverse the colors of the background and foreground.
* Using [```smoothstep()```](../glossary/index.html#smoothstep.md), experiment with different values to get nice smooth borders on your circle.
* Once you are happy with an implementation, make a function of it that you can reuse in the future.
* Add color to the circle.
* Can you animate your circle to grow and shrink, simulating a beating heart? (You can get some inspiration from the animation in the previous chapter.)
* What about moving this circle? Can you move it and place different circles in a single billboard?
* What happens if you combine distances fields together using different functions and operations?
```glsl
pct = distance(st,vec2(0.4)) + distance(st,vec2(0.6));
pct = distance(st,vec2(0.4)) * distance(st,vec2(0.6));
pct = min(distance(st,vec2(0.4)),distance(st,vec2(0.6)));
pct = max(distance(st,vec2(0.4)),distance(st,vec2(0.6)));
pct = pow(distance(st,vec2(0.4)),distance(st,vec2(0.6)));
```
* Make three compositions using this technique. If they are animated, even better!
#### For your tool box
In terms of computational power the [```sqrt()```](../glossary/index.html#sqrt.md) function - and all the functions that depend on it - can be expensive. Here is another way to create a circular distance field by using [```dot()```](../glossary/index.html#dot.md) product.
<div class="codeAndCanvas" data="circle.frag"></div>
### Useful properties of a Distance Field
![Zen garden](zen-garden.jpg)
Distance fields can be used to draw almost everything. Obviously the more complex a shape is, the more complicated its equation will be, but once you have the formula to make distance fields of a particular shape it is very easy to combine and/or apply effects to it, like smooth edges and multiple outlines. Because of this, distance fields are popular in font rendering, like [Mapbox GL Labels](https://www.mapbox.com/blog/text-signed-distance-fields/) and [Matt DesLauriers](https://twitter.com/mattdesl) [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu).
Take a look at the following code.
<div class="codeAndCanvas" data="rect-df.frag"></div>
We start by moving the coordinate system to the center and shrinking it in half in order to remap the position values between -1 and 1. Also on *line 24* we are visualizing the distance field values using a [```fract()```](../glossary/index.html#fract.md) function making it easy to see the pattern they create. The distance field pattern repeats over and over like rings in a Zen garden.
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()```](../glossary/index.html#abs.md) is doing there).
If you uncomment *line 20*, you will note that we are combining the distances to these four points using the [```min()```](../glossary/index.html#min.md) to zero. The result produces an interesting new pattern.
Now try uncommenting *line 21*; we are doing the same but using the [```max()```](../glossary/index.html#max.md) function. The result is a rectangle with rounded corners. Note how the rings of the distance field get smoother the further away they get from the center.
Finish uncommenting *lines 27 to 29* one by one to understand the different uses of a distance field pattern.
### Polar shapes
![Robert Mangold - Untitled (2008)](mangold.jpg)
In the chapter about color we map the cartesian coordinates to polar coordinates by calculating the *radius* and *angles* of each pixel with the following formula:
```glsl
vec2 pos = vec2(0.5)-st;
float r = length(pos)*2.0;
float a = atan(pos.y,pos.x);
```
We use part of this formula at the beginning of the chapter to draw a circle. We calculated the distance to the center using [```length()```](../glossary/index.html#length.md). Now that we know about distance fields we can learn another way of drawing shapes using polar coordinates.
This technique is a little restrictive but very simple. It consists of changing the radius of a circle depending on the angle to achieve different shapes. How does the modulation work? Yes, using shaping functions!
Below you will find the same functions in the cartesian graph and in a polar coordinates shader example (between *lines 21 and 25*). Uncomment the functions one-by-one, paying attention the relationship between one coordinate system and the other.
<div class="simpleFunction" data="y = cos(x*3.);
//y = abs(cos(x*3.));
//y = abs(cos(x*2.5))*0.5+0.3;
//y = abs(cos(x*12.)*sin(x*3.))*.8+.1;
//y = smoothstep(-.5,1., cos(x*10.))*0.2+0.5;"></div>
<div class="codeAndCanvas" data="polar.frag"></div>
Try to:
* Animate these shapes.
* Combine different shaping functions to *cut holes* in the shape to make flowers, snowflakes and gears.
* Use the ```plot()``` function we were using in the *Shaping Functions Chapter* to draw just the contour.
### Combining powers
Now that we've learned how to modulate the radius of a circle according to the angle using the [```atan()```](../glossary/index.html#atan.md) to draw different shapes, we can learn how use ```atan()``` with distance fields and apply all the tricks and effects possible with distance fields.
The trick will use the number of edges of a polygon to construct the distance field using polar coordinates. Check out [the following code](http://thndl.com/square-shaped-shaders.html) from [Andrew Baldwin](https://twitter.com/baldand).
<div class="codeAndCanvas" data="shapes.frag"></div>
* Using this example, make a function that inputs the position and number of corners of a desired shape and returns a distance field value.
* Mix distance fields together using [```min()```](../glossary/index.html#min.md) and [```max()```](../glossary/index.html#max.md).
* Choose a geometric logo to replicate using distance fields.
Congratulations! You have made it through the rough part! Take a break and let these concepts settle - drawing simple shapes in Processing is easy but not here. In shader-land drawing shapes is twisted, and it can be exhausting to adapt to this new paradigm of coding.
Now that you know how to draw shapes I'm sure new ideas will pop into your mind. In the following chapter you will learn how to move, rotate and scale shapes. This will allow you to make compositions!

46
07/arrow.frag
Unescape Escape View File

@ -0,0 +1,46 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_OES_standard_derivatives
#extension GL_OES_standard_derivatives : enable
#endif
#ifdef GL_ES
precision mediump float;
#endif
#define PI 3.14159265359
#define TWO_PI 6.28318530718
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
float shape(vec2 st, int N){
st = st *2.-1.;
float a = atan(st.x,st.y)+PI;
float r = TWO_PI/float(N);
return cos(floor(.5+a/r)*r-a)*length(st);
}
// Antialiazed Step function
// from http://webstaff.itn.liu.se/~stegu/webglshadertutorial/shadertutorial.html
float aastep(float threshold, float value) {
#ifdef GL_OES_standard_derivatives
float afwidth = 0.7 * length(vec2(dFdx(value), dFdy(value)));
return smoothstep(threshold-afwidth, threshold+afwidth, value);
#else
return step(threshold, value);
#endif
}
void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;
vec3 color = vec3(0.0);
float d = 0.0;
d = min(shape(st,3),shape(st+vec2(0.,0.19),4));
gl_FragColor = vec4(vec3(1.0-aastep(.2,d)),1.0);
}

38
07/batman.frag
Unescape Escape View File

@ -0,0 +1,38 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
float plot (float y, float pct){
return smoothstep( pct-0.01, pct, y) -
smoothstep( pct, pct+0.01, y);
}
void main(){
vec2 st = gl_FragCoord.xy/u_resolution;
st.y *= u_resolution.y/u_resolution.x;
vec3 color = vec3(.0);
float pct = .0;
float shape = 1.0-distance(st*vec2(1.,2.)-vec2(0.,.5),vec2(.5));
pct = shape;
pct = min(pct, distance(st,vec2(0.5,0.76))*10.);
pct = min(pct, distance(st,vec2(0.36,0.71))*5.);
pct = min(pct, distance(st,vec2(0.64,0.71))*5.);
pct = min(pct, distance(st,vec2(0.36,0.20))*4.*pow(1.-st.y,shape*1.1));
pct = min(pct, distance(st,vec2(0.64,0.20))*4.*pow(1.-st.y,shape*1.1));
color = vec3(pct);
color += vec3(1.,1.,.0)*plot(pct,0.5+smoothstep(-1.,2.,sin(u_time))*.1);
gl_FragColor = vec4( color, 1.0 );
}

32
07/circle-making.frag
Unescape Escape View File

@ -0,0 +1,32 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
void main(){
vec2 st = gl_FragCoord.xy/u_resolution;
float pct = 0.0;
// a. The DISTANCE from the pixel to the center
pct = distance(st,vec2(0.5));
// b. The LENGTH of the vector
// from the pixel to the center
// vec2 toCenter = vec2(0.5)-st;
// pct = length(toCenter);
// c. The SQUARE ROOT of the vector
// from the pixel to the center
// vec2 tC = vec2(0.5)-st;
// pct = sqrt(tC.x*tC.x+tC.y*tC.y);
vec3 color = vec3(pct);
gl_FragColor = vec4( color, 1.0 );
}

25
07/circle.frag
Unescape Escape View File

@ -0,0 +1,25 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
float circle(in vec2 _st, in float _radius){
vec2 l = _st-vec2(0.5);
return 1.-smoothstep(_radius-(_radius*0.01),
_radius+(_radius*0.01),
dot(l,l)*4.0);
}
void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(circle(st,0.9));
gl_FragColor = vec4( color, 1.0 );
}

BIN
07/circle.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

BIN
07/compass.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 271 KiB

32
07/cross.frag
Unescape Escape View File

@ -0,0 +1,32 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
float box(in vec2 st, in vec2 size){
size = vec2(0.5) - size*0.5;
vec2 uv = smoothstep(size,
size+vec2(0.001),
st);
uv *= smoothstep(size,
size+vec2(0.001),
vec2(1.0)-st);
return uv.x*uv.y;
}
float cross(in vec2 st, float size){
return box(st, vec2(size,size/4.)) +
box(st, vec2(size/4.,size));
}
void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
gl_FragColor = vec4( vec3( cross(st,0.4) ) ,1.0);
}

BIN
07/distance-field.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 270 KiB

BIN
07/froebel.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
07/grid_paper.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 370 KiB

BIN
07/hypotenuse.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 553 B

70
07/index.html
Unescape Escape View File

@ -0,0 +1,70 @@
<!-- Copyright 2015 Patricio Gonzalez Vivo (http://patriciogonzalezvivo.com) -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shapes</title>
<meta name="keywords" content="glsl,shader,procedural,distance field,shapes,geometry,rectangle,circle" />
<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="previusPage()">&lt; &lt; Previous</li>
<li class="navigationBar" onclick="homePage()"> Home </li>
<!-- <li class="navigationBar" onclick="nextPage()">Next &gt; &gt;</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>

40
07/line.frag
Unescape Escape View File

@ -0,0 +1,40 @@
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
float line( vec2 _st,
vec2 _p1, vec2 _p2,
float _width, float _spread){
_width = 1.0 / _width;
vec2 p2p1 = _p1 - _p2;
vec2 p1p2 = -(p2p1);
vec2 p2p = _st - _p2;
vec2 p1p = _st - _p1;
vec2 pp1 = -(p1p);
vec2 pd = normalize(vec2(p2p1.y, -p2p1.x));
float proj = dot(pd, pp1);
float pr1 = dot(p2p1, p2p);
float pr2 = dot(p1p2, p1p);
if(pr1 > 0.0 && pr2 > 0.0) {
return pow(1.0 / abs(proj * _width), _spread);
} else {
return 0.0;
}
}
void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3( line(st,
vec2(0.1),
vec2(0.9),
0.005, 3.0) );
gl_FragColor = vec4(color,1.0);
}

BIN
07/mangold.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
07/mondrian.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

30
07/polar.frag
Unescape Escape View File

@ -0,0 +1,30 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(0.0);
vec2 pos = vec2(0.5)-st;
float r = length(pos)*2.0;
float a = atan(pos.y,pos.x);
float f = cos(a*3.);
// f = abs(cos(a*3.));
// f = abs(cos(a*2.5))*.5+.3;
// f = abs(cos(a*12.)*sin(a*3.))*.8+.1;
// f = smoothstep(-.5,1., cos(a*10.))*0.2+0.5;
color = vec3( 1.-smoothstep(f,f+0.02,r) );
gl_FragColor = vec4(color, 1.0);
}

BIN
07/rect-01.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
07/rect-02.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

30
07/rect-df.frag
Unescape Escape View File

@ -0,0 +1,30 @@
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;
vec3 color = vec3(0.0);
float d = 0.0;
// Remap the space to -1. to 1.
st = st *2.-1.;
// Make the distance field
d = length( abs(st)-.3 );
// d = length( min(abs(st)-.3,0.) );
// d = length( max(abs(st)-.3,0.) );
// Visualize the distance field
gl_FragColor = vec4(vec3(fract(d*10.0)),1.0);
// Drawing with the distance field
// gl_FragColor = vec4(vec3( step(.3,d) ),1.0);
// gl_FragColor = vec4(vec3( step(.3,d) * step(d,.4)),1.0);
// gl_FragColor = vec4(vec3( smoothstep(.3,.4,d)* smoothstep(.6,.5,d)) ,1.0);
}

27
07/rect-making.frag
Unescape Escape View File

@ -0,0 +1,27 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(0.0);
// bottom-left
vec2 bl = step(vec2(0.1),st);
float pct = bl.x * bl.y;
// top-right
// vec2 tr = step(vec2(0.1),1.0-st);
// pct *= tr.x * tr.y;
color = vec3(pct);
gl_FragColor = vec4(color,1.0);
}

24
07/rect.frag
Unescape Escape View File

@ -0,0 +1,24 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
float rect(in vec2 st, in vec2 size){
size = 0.25-size*0.25;
vec2 uv = smoothstep(size,size+size*vec2(0.002),st*(1.0-st));
return uv.x*uv.y;
}
void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3( rect(st, vec2(0.9) ) );
gl_FragColor = vec4(color,1.0);
}

38
07/shapes.frag
Unescape Escape View File

@ -0,0 +1,38 @@
#ifdef GL_ES
precision mediump float;
#endif
#define PI 3.14159265359
#define TWO_PI 6.28318530718
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
// Reference to
// http://thndl.com/square-shaped-shaders.html
void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;
vec3 color = vec3(0.0);
float d = 0.0;
// Remap the space to -1. to 1.
st = st *2.-1.;
// 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);
// Shaping function that modulate the distance
d = cos(floor(.5+a/r)*r-a)*length(st);
color = vec3(1.0-smoothstep(.4,.41,d));
// color = vec3(d);
gl_FragColor = vec4(color,1.0);
}

50
07/triangle-making.frag
Unescape Escape View File

@ -0,0 +1,50 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
// Based on https://www.shadertoy.com/view/4sSSzG
float triangleDF(vec2 st,
vec2 p0, vec2 p1, vec2 p2){
vec3 e0, e1, e2;
e0.xy = normalize(p1 - p0).yx * vec2(+1.0, -1.0);
e1.xy = normalize(p2 - p1).yx * vec2(+1.0, -1.0);
e2.xy = normalize(p0 - p2).yx * vec2(+1.0, -1.0);
e0.z = dot(e0.xy, p0);
e1.z = dot(e1.xy, p1);
e2.z = dot(e2.xy, p2);
float a = max(0.0, dot(e0.xy, st) - e0.z);
float b = max(0.0, dot(e1.xy, st) - e1.z);
float c = max(0.0, dot(e2.xy, st) - e2.z);
return length(vec3(a, b, c)*2.0);
}
void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(0.0);
// Distance Field in 3 channels
float df = triangleDF(st,
vec2(0.40,0.45),
vec2(0.60,0.45),
vec2(0.5,0.60));
color = vec3(df);
// Make a shape of it
float size = fract(u_time*0.2);
float border = 0.025;
color.rb += smoothstep(size+border,size+1e-7,df)-
smoothstep(size+0.001,size+1e-7,df);
gl_FragColor = vec4(color,1.0);
}

45
07/triangle.frag
Unescape Escape View File

@ -0,0 +1,45 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
// Based on https://www.shadertoy.com/view/4sSSzG
float triangle (vec2 st,
vec2 p0, vec2 p1, vec2 p2,
float smoothness){
vec3 e0, e1, e2;
e0.xy = normalize(p1 - p0).yx * vec2(+1.0, -1.0);
e1.xy = normalize(p2 - p1).yx * vec2(+1.0, -1.0);
e2.xy = normalize(p0 - p2).yx * vec2(+1.0, -1.0);
e0.z = dot(e0.xy, p0) - smoothness;
e1.z = dot(e1.xy, p1) - smoothness;
e2.z = dot(e2.xy, p2) - smoothness;
float a = max(0.0, dot(e0.xy, st) - e0.z);
float b = max(0.0, dot(e1.xy, st) - e1.z);
float c = max(0.0, dot(e2.xy, st) - e2.z);
return smoothstep(smoothness * 2.0,
1e-7,
length(vec3(a, b, c)));
}
void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3( triangle(st,
vec2(0.0,0.15),
vec2(1.0,0.15),
vec2(0.5,0.88),
0.001) );
gl_FragColor = vec4(color,1.0);
}

BIN
07/zen-garden.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

26
README.md
Unescape Escape View File

@ -5,12 +5,9 @@
This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="B5FSVSHGEATCG">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
<div class="header">
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=B5FSVSHGEATCG" style="float: right;"><img src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" alt=""></a>
</div>
## Contents
@ -25,7 +22,7 @@ This is a gentle step-by-step guide through the abstract and complex universe of
* Algorithmic drawing
* [Shaping functions](05/)
* [Colors](06/)
* Shapes
* [Shapes](07/)
* Matrices
* Patterns
@ -36,7 +33,7 @@ This is a gentle step-by-step guide through the abstract and complex universe of
* Fractals
* Image processing:
* What is a texture?
* Textures
* Image operations
* Kernel convolutions
* Filters
@ -58,13 +55,15 @@ This is a gentle step-by-step guide through the abstract and complex universe of
* Environmental-maps (spherical and cube)
* Reflect and refract
* [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)
* [Examples](examples/)
* [Glossary](glossary/)
* [Appendix:](appendix/) Other ways to use this book
* [How can I navigate this book offline?](appendix/)
* [How to run the examples on a RaspberryPi?](appendix/)
* [How to print this book?](appendix/)
## About the Author
[Patricio Gonzalez Vivo](http://patriciogonzalezvivo.com/) (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.
@ -81,3 +80,4 @@ Thanks [Scott Murray](http://alignedleft.com/) for the inspiration and advice.
Thanks [Karim Naaji](http://karim.naaji.fr/) for contributing with support, good ideas and code.
Thanks to everyone that by beliving in this project had contribute with fixes or donations: *Andreas Wilcox, Jonathan Jin, James Phillips, Drew Lustro, Mike Reinstein, Bradley Bossard, Nestor Rubio Garcia, Magnus Öberg, Kyle Stewart, Al Matthews, Michael Parisi, Gerry Straathof and Matthias Treitler*

34
appendix/00.md
Unescape Escape View File

@ -1,34 +0,0 @@
## 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.
For that you only need Python 2.6 and a git client. On MacOS and RaspberryPi computers Python is installed by default but you still need to install a git client. For that:
In **MacOSX** be sure to have [homebrew](http://brew.sh/) installed and then on your terminal do:
```bash
brew update
brew upgrade
brew install git
```
On **RaspberryPi** you need to do:
```bash
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install git-core
```
Once you have everything installed you just need to do:
```bash
cd ~
git clone https://github.com/patriciogonzalezvivo/thebookofshaders.git
cd thebookofshaders
python -m SimpleHTTPServer
```
Then open your browser to [```http://localhost:8000/```](http://localhost:8000/)

22
appendix/01.md
Unescape Escape View File

@ -1,22 +0,0 @@
## How to use this book in a classroom with RaspberryPi?
A classroom can be a hard place to teach shaders because of technical limitations. A few years ago, taking for granted that all the students would have a computer with a modern graphic card was a long shot, but not today. Thanks to the [RaspberryPi project](http://www.raspberrypi.org/) a new type of small and cheap generation of computers ($35) has found its way into classrooms. Most importantly for the purposes of this book, the [RaspberryPi](http://www.raspberrypi.org/) comes with a decent Bradcom GPU card that can be accessed directly from the console. I made a [flexible GLSL live coding tool](https://github.com/patriciogonzalezvivo/glslViewer) that runs all the examples in this book while also updating automatically the changes the user makes when they save it. By making a local copy of the repository of this book (see the above section) and having the [```glslViewer``` app installed](https://github.com/patriciogonzalezvivo/glslViewer), students can read the chapters using any console text reader (like ```less```, ```nano``` or ```vim```), run the examples (with ```glslviewer```), and modify them with their favorite text editor (like ```nano```, ```pico```, ```vi```, ```vim``` or ```emacs```).
To install and set this all up on the RaspberryPi after installing the OS and logging in, type the following commands:
```bash
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install git-core libfreeimage
cd ~
git clone http://github.com/patriciogonzalezvivo/glslViewer.git
cd glslViewer
make
make install
cd ~
git clone https://github.com/patriciogonzalezvivo/thebookofshaders.git
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.

70
appendix/02.md
Unescape Escape View File

@ -1,70 +0,0 @@
## How to print this book?
Let’s say you don’t want to navigate or interact with the examples and you just want a good old fashion text book which you can read on the beach or on your commute to the city. In that case you can print this book.
#### Installing glslViewer
For printing this book you need first to parse it. For that you will need [```glslViewer```](https://github.com/patriciogonzalezvivo/glslViewer) a console shader tool that will compile and transform the shader examples into images.
In **MacOSX** get sure to have [homebrew](http://brew.sh/) installed and then on your terminal do:
```bash
brew update
brew upgrade
brew install git freeimage
brew tap homebrew/versions
brew install glfw3
cd ~
git clone http://github.com/patriciogonzalezvivo/glslViewer.git
cd glslViewer
make
make install
```
On **RaspberryPi** you need to do:
```bash
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install git-core libfreeimage
cd ~
git clone http://github.com/patriciogonzalezvivo/glslViewer.git
cd glslViewer
make
make install
```
#### Installing Latex Engine and Pandoc
For parsing the Markdown chapters into Latex and then into a PDF file we will use Xetex Latex Engine and Pandoc.
In **MacOSX**:
Download and Install [basictex & MacTeX-Additions](http://www.tug.org/mactex/morepackages.html) and then install [Pandoc](http://johnmacfarlane.net/pandoc/) by:
```bash
brew install pandoc
```
On **RaspberryPi**:
```bash
sudo apt-get install texlive-xetex pandoc
```
#### Compile the book into a pdf and print it
Now that you have all you need, it is time to clone [the repository of this book](https://github.com/patriciogonzalezvivo/thebookofshaders) and compile the book.
For that open your terminal once again and type:
```bash
cd ~
git clone https://github.com/patriciogonzalezvivo/thebookofshaders.git
cd thebookofshaders
make
```
If everything goes well, you will see a ```book.pdf``` file which you can read on your favorite device or print.

133
appendix/README.md
Unescape Escape View File

@ -1,7 +1,132 @@
# Appendix
# Appendix: Other ways to use this book
* [How can I navigate this book off-line?](http://thebookofshaders.com/appendix/index.html#00.md)
This book is designed to be navigated with a modern web browser that supports WebGL technology (Firefox, Chrome, Safari, between others). But you may encounter the situation that you don't have a computer with no GPU card or not internet. If that's the case the following sections can help you.
* [How to use this book in a classroom with RaspberryPi?](http://thebookofshaders.com/appendix/index.html#01.md)
## 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.
For that you only need Python 2.6 and a git client. On MacOS and RaspberryPi computers Python is installed by default but you still need to install a git client. For that:
In **MacOSX** be sure to have [homebrew](http://brew.sh/) installed and then on your terminal do:
```bash
brew update
brew upgrade
brew install git
```
On **RaspberryPi** you need to do:
```bash
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install git-core
```
Once you have everything installed you just need to do:
```bash
cd ~
git clone https://github.com/patriciogonzalezvivo/thebookofshaders.git
cd thebookofshaders
python -m SimpleHTTPServer
```
Then open your browser to [```http://localhost:8000/```](http://localhost:8000/)
## How to run the examples on a RaspberryPi?
A few years ago, taking for granted that everybody have a computer with a GPU was a long shot. Now, most computers have a graphic unit, but is a high bar for a requirement in for example a course or class.
Thanks to the [RaspberryPi project](http://www.raspberrypi.org/) a new type of small and cheap generation of computers (arround $35 each) has found its way into classrooms. More importantly for the purposes of this book, the [RaspberryPi](http://www.raspberrypi.org/) comes with a decent Bradcom GPU card that can be accessed directly from the console. I made a [flexible GLSL live coding tool call **glslViewer**](https://github.com/patriciogonzalezvivo/glslViewer) that runs all the examples on this book. This program also is hable to update automatically the changes the user makes when they save it. What that means? you can edit the shader and every time you save it, the shader will be re-compile and rendered for you.
By making a local copy of the repository of this book (see the above section) and having [```glslViewer``` installed](https://github.com/patriciogonzalezvivo/glslViewer), users can run the examples with ```glslviewer```. Also by using the ```-l``` flag they can render the example on a corner of the screen while they modify it with any text editor (like ```nano```, ```pico```, ```vi```, ```vim``` or ```emacs```). This also works if the user is connected through ssh/sftp.
To install and set this all up on the RaspberryPi after installing the OS and logging in, type the following commands:
```bash
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install git-core
sudo apt-get install libfreeimage-dev
cd ~
git clone http://github.com/patriciogonzalezvivo/glslViewer.git
cd glslViewer
make
make install
cd ~
git clone https://github.com/patriciogonzalezvivo/thebookofshaders.git
cd thebookofshaders
```
## How to print this book?
Let’s say you don’t want to navigate or interact with the examples and you just want a good old fashion text book which you can read on the beach or on your commute to the city. In that case you can print this book.
#### Installing glslViewer
For printing this book you need first to parse it. For that you will need [```glslViewer```](https://github.com/patriciogonzalezvivo/glslViewer) a console shader tool that will compile and transform the shader examples into images.
In **MacOSX** get sure to have [homebrew](http://brew.sh/) installed and then on your terminal do:
```bash
brew update
brew upgrade
brew install git freeimage
brew tap homebrew/versions
brew install glfw3
cd ~
git clone http://github.com/patriciogonzalezvivo/glslViewer.git
cd glslViewer
make
make install
```
On **RaspberryPi** you need to do:
```bash
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install git-core libfreeimage
cd ~
git clone http://github.com/patriciogonzalezvivo/glslViewer.git
cd glslViewer
make
make install
```
#### Installing Latex Engine and Pandoc
For parsing the Markdown chapters into Latex and then into a PDF file we will use Xetex Latex Engine and Pandoc.
In **MacOSX**:
Download and Install [basictex & MacTeX-Additions](http://www.tug.org/mactex/morepackages.html) and then install [Pandoc](http://johnmacfarlane.net/pandoc/) by:
```bash
brew install pandoc
```
On **RaspberryPi**:
```bash
sudo apt-get install texlive-xetex pandoc
```
#### Compile the book into a pdf and print it
Now that you have all you need, it is time to clone [the repository of this book](https://github.com/patriciogonzalezvivo/thebookofshaders) and compile the book.
For that open your terminal once again and type:
```bash
cd ~
git clone https://github.com/patriciogonzalezvivo/thebookofshaders.git
cd thebookofshaders
make
```
If everything goes well, you will see a ```book.pdf``` file which you can read on your favorite device or print.
* [How to print this book?](http://thebookofshaders.com/appendix/index.html#02.md)

2
appendix/index.html
Unescape Escape View File

@ -4,7 +4,7 @@
<html>
<head>
<meta charset="utf-8">
<title>How to read this book off-line</title>
<title>Appendix</title>
<meta name="keywords" content="glsl,shader,github,repository" />
<meta name="description" content="This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders."/>

18
examples/README.md
Unescape Escape View File

@ -5,13 +5,13 @@ The following is a list of examples present in this book.
### Chapters examples
* Getting started
* Hello World
* [Hello World](../02/)
- ["Hello World!"](../edit.html#02/hello_world.frag)
* Uniforms
* [Uniforms](../03/)
- [u_time](../edit.html#03/time.frag)
- [gl_FragCoord](../edit.html#03/space.frag)
* Algorithmic drawing
* Shaping functions
* [Shaping functions](../05/)
- [Linear Interpolation](../edit.html#05/linear.frag)
- [Exponential Interpolation](../edit.html#05/expo.frag)
- [Step function](../edit.html#05/step.frag)
@ -22,13 +22,23 @@ The following is a list of examples present in this book.
- [Iñigo Quiles's Parabola](../edit.html#05/parabola.frag)
- [Iñigo Quiles's Power Curve](../edit.html#05/pcurve.frag)
* Color
* [Color](../06/)
- [Mix](../edit.html#06/mix.frag)
- [Easing functions](../edit.html#06/easing.frag)
- [Gradient](../edit.html#06/gradient.frag)
- [HSB](../edit.html#06/hsb.frag)
- [HSB - Color Wheel](../edit.html#06/hsb-colorwheel.frag)
* [Shapes](../07/)
- Rectangle: [making](../edit.html#07/rect-making.frag), [function](../edit.html#07/rect.frag) and [distance-field](../edit.html#07/rect-df.frag)
- Circle: [making](../edit.html#07/circle-making.frag) and [function](../edit.html#07/circle.frag)
- [Batman (distance field)](../edit.html#07/batman.frag)
- [Line (distance field)](../edit.html#07/line.frag)
- [Cross](../edit.html#07/cross.frag)
- [Polar](../edit.html#07/polar.frag)
- [Polar (distance field)](../edit.html#07/shapes.frag)
- [Arrow (distance field)](../edit.html#07/arrow.frag)
### Advance
* [Moon](../edit.html#examples/moon.frag&examples/images/moon-texture.jpg)

0
glossary/GL_ES.md
Unescape Escape View File

162
glossary/README.md
Unescape Escape View File

@ -0,0 +1,162 @@
# Glossary
## By theme
* ANGLE & TRIGONOMETRY FUNCTIONS
[radians()](index.html#radians.md)
[degrees()](index.html#degrees.md)
[sin()](index.html#sin.md)
[cos()](index.html#cos.md)
[tan()](index.html#tan.md)
[asin()](index.html#asin.md)
[acos()](index.html#acos.md)
[atan()](index.html#atan.md)
* EXPONENTIAL FUNCTIONS
[pow()](index.html#pow.md)
[exp()](index.html#exp.md)
[log()](index.html#log.md)
[exp2()](index.html#exp2.md)
[log2()](index.html#log2.md)
[sqrt()](index.html#sqrt.md)
[inversesqrt()](index.html#inversesqrt.md)
* COMMON FUNCTIONS
[abs()](index.html#abs.md)
[sign()](index.html#sign.md)
[floor()](index.html#floor.md)
[ceil()](index.html#ceil.md)
[fract()](index.html#fract.md)
[mod()](index.html#mod.md)
[min()](index.html#min.md)
[max()](index.html#max.md)
[clamp()](index.html#clamp.md)
[mix()](index.html#mix.md)
[step()](index.html#step.md)
[smoothstep()](index.html#smoothstep.md)
* GEOMETRIC FUNCTIONS
[length()](index.html#length.md)
[distance()](index.html#distance.md)
[dot()](index.html#dot.md)
[cross()](index.html#cross.md)
[normalize()](index.html#normalize.md)
[facefoward()](index.html#facefoward.md)
[reflect()](index.html#reflect.md)
[refract()](index.html#refract.md)
* MATRIX FUNCTIONS
[matrixCompMult()](index.html#matrixCompMult.md)
* VECTOR RELATIONAL FUNCTIONS
[lessThan()](index.html#lessThan.md)
[lessThanEqual()](index.html#lessThanEqual.md)
[greaterThan()](index.html#greaterThan.md)
[greaterThanEqual()](index.html#greaterThanEqual.md)
[equal()](index.html#equal.md)
[notEqual()](index.html#notEqual.md)
[any()](index.html#any.md)
[all()](index.html#all.md)
[not()](index.html#not.md)
* TEXTURE LOOKUP FUNCTIONS
[texture2D()](index.html#texture2D.md)
[textureCube()](index.html#textureCube.md)
## Alphabetical
* A
[abs()](index.html#abs.md)
[acos()](index.html#acos.md)
[all()](index.html#all.md)
[any()](index.html#any.md)
[asin()](index.html#asin.md)
[atan()](index.html#atan.md)
* C
[ceil()](index.html#ceil.md)
[clamp()](index.html#clamp.md)
[cos()](index.html#cos.md)
[cross()](index.html#cross.md)
* D
[degrees()](index.html#degrees.md)
[distance()](index.html#distance.md)
[dot()](index.html#dot.md)
* E
[equal()](index.html#equal.md)
[exp()](index.html#exp.md)
[exp2()](index.html#exp2.md)
* F
[faceforward()](index.html#faceforward.md)
[floor()](index.html#floor.md)
[fract()](index.html#fract.md)
* G
[greaterThan()](index.html#greaterThan.md)
[greaterThanEqual()](index.html#greaterThanEqual.md)
* I
[inversesqrt()](index.html#inversesqrt.md)
* L
[length()](index.html#length.md)
[lessThan()](index.html#lessThan.md)
[lessThanEqual()](index.html#lessThanEqual.md)
[log()](index.html#log.md)
[log2()](index.html#log2.md)
* M
[matrixCompMult()](index.html#matrixCompMult.md)
[max()](index.html#max.md)
[min()](index.html#min.md)
[mix()](index.html#mix.md)
[mod()](index.html#mod.md)
* N
[normalize()](index.html#normalize.md)
[not()](index.html#not.md)
[notEqual()](index.html#notEqual.md)
* P
[pow()](index.html#pow.md)
* R
[radians()](index.html#radians.md)
[reflect()](index.html#reflect.md)
[refract()](index.html#refract.md)
* S
[sign()](index.html#sign.md)
[sin()](index.html#sin.md)
[smoothstep()](index.html#smoothstep.md)
[sqrt()](index.html#sqrt.md)
[step()](index.html#step.md)
* T
[tan()](index.html#tan.md)
[texture2D()](index.html#texture2D.md)
[textureCube()](index.html#textureCube.md)

21
glossary/abs.md
Unescape Escape View File

@ -0,0 +1,21 @@
## Abs
Return the absolute value of the parameter.
### Declaration
```glsl
float abs(float x)
vec2 abs(vec2 x)
vec3 abs(vec3 x)
vec4 abs(vec4 x)
```
### Parameters
```x``` specify the value of which to return the absolute.
### Description
```abs()``` returns the absolute value of ```x```.
<div class="simpleFunction" data="y = abs(x); "></div>
### See Also
[sign()](index.html#sign.md), [min()](index.html#min.md), [max()](index.html#max.md), [Chapter 05: Shaping Functions](../05/)

21
glossary/acos.md
Unescape Escape View File

@ -0,0 +1,21 @@
## Acos
Return the arccosine of the parameter
### Declaration
```glsl
float acos(float x)
vec2 acos(vec2 x)
vec3 acos(vec3 x)
vec4 acos(vec4 x)
```
### Parameters
```x``` specify the value whose arccosine to return.
### Description
```acos()``` returns the angle whose trigonometric cosine is ```x```.
<div class="simpleFunction" data="y = acos(x); "></div>
### See Also
[cos()](index.html#cos.md), [sin()](index.html#sin.md), [asin()](index.html#asin.md), [tan()](index.html#tan.md), [atan()](index.html#atan.md), [Chapter 05: Shaping Functions](../05/)

29
glossary/all.md
Unescape Escape View File

@ -0,0 +1,29 @@
## Any
Check whether any element of a boolean vector is true
### Declaration
```glsl
bool all(bvec2 x)
bool all(bvec3 x)
bool all(bvec4 x)
```
### Parameters
```x``` specifies the vector to be tested for truth.
### Description
```any()``` returns true if any element of ```x``` is ```true``` and ```false``` otherwise. It is functionally equivalent to:
```glsl
bool any(bvec x) { // bvec can be bvec2, bvec3 or bvec4
bool result = false;
int i;
for (i = 0; i < x.length(); ++i) {
result |= x[i];
}
return result;
}
```
### See Also
[any()](index.html#any.md), [not()](index.html#not.md)

29
glossary/any.md
Unescape Escape View File

@ -0,0 +1,29 @@
## All
Check whether all elements of a boolean vector are true
### Declaration
```glsl
bool any(bvec2 x)
bool any(bvec3 x)
bool any(bvec4 x)
```
### Parameters
```x``` specifies the vector to be tested for truth.
### Description
```all()``` returns true if all elements of ```x``` are ```true``` and ```false``` otherwise. It is functionally equivalent to:
```glsl
bool all(bvec x){ // bvec can be bvec2, bvec3 or bvec4
bool result = true;
int i;
for (i = 0; i < x.length(); ++i)
{
result &= x[i];
}
return result;
}
```
### See Also
[any()](index.html#any.md), [not()](index.html#not.md)

21
glossary/asin.md
Unescape Escape View File

@ -0,0 +1,21 @@
## Asin
Return the arcsine of the parameter
### Declaration
```glsl
float asin(float x)
vec2 asin(vec2 x)
vec3 asin(vec3 x)
vec4 asin(vec4 x)
```
### Parameters
```x``` specify the value whose arcsine to return.
### Description
```asin()``` returns the angle whose trigonometric sine is ```x```.
<div class="simpleFunction" data="y = asin(x); "></div>
### See Also
[cos](index.html#cos.md), [sin](index.html#sin.md), [acos](index.html#acos.md), [tan](index.html#tan.md), [atan](index.html#atan.md), [Chapter 05: Shaping Functions](../05/)

30
glossary/atan.md
Unescape Escape View File

@ -0,0 +1,30 @@
## Atan
Return the arc-tangent of the parameters
### Declaration
```glsl
float atan(float y, float x)
vec2 atan(vec2 y, vec2 x)
vec3 atan(vec3 y, vec3 x)
vec4 atan(vec4 y, vec4 x)
float atan(float y_over_x)
vec2 atan(vec2 y_over_x)
vec3 atan(vec3 y_over_x)
vec4 atan(vec4 y_over_x)
```
### Parameters
```y``` specify the numerator of the fraction whose arctangent to return.
```x``` specify the denominator of the fraction whose arctangent to return.
```y_over_x``` specify the fraction whose arctangent to return.
### Description
```atan()``` returns the angle whose trigonometric arctangent is ```y,x``` or ```y_over_x```, depending on which overload is invoked. In the first overload, the signs of ```y``` and ```x``` are used to determine the quadrant that the angle lies in. The values returned by atan in this case are in the range -PI and PI. Results are undefined if ```x``` is zero.
For the second overload, ```atan()``` returns the angle whose tangent is ```y_over_x```. Values returned in this case are in the range -PI to PI.
### See Also
[cos](index.html#cos.md), [acos](index.html#acos.md), [sin](index.html#sin.md), [asin](index.html#asin.md), [atan](index.html#atan.md), [Chapter 05: Shaping Functions](../05/), [Chapter 06: Color](../06/)

0
glossary/attribute.md
Unescape Escape View File

0
glossary/bool.md
Unescape Escape View File

0
glossary/bvec2.md
Unescape Escape View File

0
glossary/bvec3.md
Unescape Escape View File

0
glossary/bvec4.md
Unescape Escape View File

21
glossary/ceil.md
Unescape Escape View File

@ -0,0 +1,21 @@
## Ceil
Find the nearest integer that is greater than or equal to the parameter
### Declaration
```glsl
float ceil(float x)
vec2 ceil(vec2 x)
vec3 ceil(vec3 x)
vec4 ceil(vec4 x)
```
### Parameters
```x``` specify the value to evaluate.
### Description
```ceil()``` returns a value equal to the nearest integer that is greater than or equal to ```x```.
<div class="simpleFunction" data="y = ceil(x); "></div>
### See Also
[floor](index.html#floor.md), [fract](index.html#fract.md), [mod](index.html#mod.md), [Chapter 05: Shaping Functions](../05/)

29
glossary/clamp.md
Unescape Escape View File

@ -0,0 +1,29 @@
## Clamp
Constrain a value to lie between two further values
### Declaration
```glsl
float clamp(float x, float minVal, float maxVal)
vec2 clamp(vec2 x, vec2 minVal, vec2 maxVal)
vec3 clamp(vec3 x, vec3 minVal, vec3 maxVal)
vec4 clamp(vec4 x, vec4 minVal, vec4 maxVal)
vec2 clamp(vec2 x, float minVal, float maxVal)
vec3 clamp(vec3 x, float minVal, float maxVal)
vec4 clamp(vec4 x, float minVal, float maxVal)
```
### Parameters
```x``` specify the value to constrain.
```minVal``` specify the lower end of the range into which to constrain x.
```maxVal``` specify the upper end of the range into which to constrain x.
### Description
```clamp()``` returns the value of ```x``` constrained to the range ```minVal``` to ```maxVal```. The returned value is computed as ```min(max(x, minVal), maxVal)```.
<div class="simpleFunction" data="y = clamp(x,0.,1.); "></div>
### See Also
[min](index.html#min.md), [abs](index.html#abs.md), [max](index.html#max.md)

0
glossary/const.md
Unescape Escape View File

21
glossary/cos.md
Unescape Escape View File

@ -0,0 +1,21 @@
## Cos
Return the cosine of the parameter
### Declaration
```glsl
float cos(float angle)
vec2 cos(vec2 angle)
vec3 cos(vec3 angle)
vec4 cos(vec4 angle)
```
### Parameters
```angle``` specify the quantity, in radians, of which to return the cosine.
### Description
```cos()``` returns the trigonometric sine of angle.
<div class="simpleFunction" data="y = cos(x); "></div>
### See Also
[acos](index.html#acos.md), [sin](index.html#sin.md), [asin](index.html#asin.md), [tan](index.html#tan.md), [atan](index.html#atan.md), [Chapter 05: Shaping Functions](../05/)

19
glossary/cross.md
Unescape Escape View File

@ -0,0 +1,19 @@
## Cross
Calculate the cross product of two vectors
### Declaration
```glsl
vec3 cross(vec3 x, vec3 y)
```
### Parameters
```x``` specifies the first of two vectors
```y``` specifies the second of two vectors
### Description
```cross()``` returns the cross product of two vectors, ```x``` and ```y```. The input parameters can only be 3-component floating vectors. The cross product is equivalent to the product of the length of the vectors times the sinus of the(smaller) angle between ```x``` and ```y```.
### See Also
[dot()](index.html#dot.md)

0
glossary/dFdx.md
Unescape Escape View File

0
glossary/dFdy.md
Unescape Escape View File

19
glossary/degrees.md
Unescape Escape View File

@ -0,0 +1,19 @@
## Degrees
Convert a quantity in radians to degrees
### Declaration
```glsl
float degrees(float radians)
vec2 degrees(vec2 radians)
vec3 degrees(vec3 radians)
vec4 degrees(vec4 radians)
```
### Parameters
```radians``` specify the quantity, in radians, to be converted to degrees.
### Description
```degrees()``` converts a quantity, specified in radians into degrees. That is, the return value is ```(180.0*radians)/PI```
### See Also
[radians](index.html#radians.md)

24
glossary/distance.md
Unescape Escape View File

@ -0,0 +1,24 @@
## Distance
Calculate the distance between two points
### Declaration
```glsl
float distance(float p0, float p1)
float distance(vec2 p0, vec2 p1)
float distance(vec3 p0, vec3 p1)
float distance(vec4 p0, vec4 p1)
```
### Parameters
```p0``` specifies the first of two points
```p1``` specifies the second of two points
### Description
```distance()``` returns the distance between the two points ```p0``` and ```p1```.
<div class="codeAndCanvas" data="../07/circle-making.frag"></div>
### See Also
[length()](index.html#length.md), [normalize()](index.html#normalize.md), [Chapter 07: Shapes](../07/)

25
glossary/dot.md
Unescape Escape View File

@ -0,0 +1,25 @@
## Dot
Calculate the dot product of two vectors
### Declaration
```glsl
float dot(float x, float y)
float dot(vec2 x, vec2 y)
float dot(vec3 x, vec3 y)
float dot(vec4 x, vec4 y)
```
### Parameters
```x``` specifies the first of two vectors
```y``` specifies the second of two vectors
### Description
```dot()``` returns the dot product of two vectors, ```x``` and ```y```. i.e., ```x[0]⋅y[0]+x[1]⋅y[1]+...```
If ```x``` and ```y``` are the same the square root of the dot product is equivalent to the length of the vector. The input parameters can be floating scalars or float vectors. In case of floating scalars the dot function is trivial and returns the product of x and y.
<div class="codeAndCanvas" data="../07/circle.frag"></div>
### See Also
[cross()](index.html#cross.md), [Chapter 07: Shapes](../07/)

24
glossary/equal.md
Unescape Escape View File

@ -0,0 +1,24 @@
## Equal
Perform a component-wise equal-to comparison of two vectors
### Declaration
```glsl
bvec2 equal(vec2 x, vec2 y)
bvec3 equal(vec3 x, vec3 y)
bvec4 equal(vec4 x, vec4 y)
bvec2 equal(ivec2 x, ivec2 y)
bvec3 equal(ivec3 x, ivec3 y)
bvec4 equal(ivec4 x, ivec4 y)
```
### Parameters
```x``` Specifies the first vector to be used in the comparison operation.
```y``` Specifies the second vector to be used in the comparison operation.
### Description
```equal()``` returns a boolean vector in which each element ```i``` is computed as ```x[i] == y[i]```.
### See Also
[lessThanEqual()](index.html#lessThanEqual.md), [lessThan()](index.html#lessThan.md), [greaterThanEqual()](index.html#greaterThanEqual.md), [greaterThan()](index.html#greaterThan.md), [notEqual()](index.html#notEqual.md), [any()](index.html#any.md), [all()](index.html#all.md), [not()](index.html#not.md)

22
glossary/exp.md
Unescape Escape View File

@ -0,0 +1,22 @@
## Exp
Return the natural exponentiation of the parameter
### Declaration
```glsl
float exp(float x)
vec2 exp(vec2 x)
vec3 exp(vec3 x)
vec4 exp(vec4 x)
```
### Parameters
```x``` specify the value to exponentiate.
### Description
```exp()``` returns the natural exponentiation of ```x```.
<div class="simpleFunction" data="y = exp(x); "></div>
### See Also
[log](index.html#log.md), [log2](index.html#log2.md), [exp2](index.html#exp2.md), [Chapter 05: Shaping Functions](../05/)

22
glossary/exp2.md
Unescape Escape View File

@ -0,0 +1,22 @@
## Exp2
Return 2 raised to the power of the parameter
### Declaration
```glsl
float exp2(float x)
vec2 exp2(vec2 x)
vec3 exp2(vec3 x)
vec4 exp2(vec4 x)
```
### Parameters
```x``` specify the value of the power to which 2 will be raised.
### Description
```exp2()``` returns 2 raised to the power of ```x```.
<div class="simpleFunction" data="y = exp2(x); "></div>
### See Also
[log](index.html#log.md), [log2](index.html#log2.md), [exp](index.html#exp.md), [Chapter 05: Shaping Functions](../05/)

24
glossary/faceforward.md
Unescape Escape View File

@ -0,0 +1,24 @@
## Faceforward
Return a vector pointing in the same direction as another
### Declaration
```glsl
float faceforward(float N, float I, float Nref)
vec2 faceforward(vec2 N, vec2 I, vec2 Nref)
vec3 faceforward(vec3 N, vec3 I, vec3 Nref)
vec4 faceforward(vec4 N, vec4 I, vec4 Nref)
```
### Parameters
```N``` specifies the vector to orient.
```I``` specifies the incident vector.
```Nref``` specifies the reference vector.
### Description
```faceforward()``` orients a vector to point away from a surface as defined by its normal. ```If dot(Nref, I) < 0``` faceforward returns ```N```, otherwise it returns ```-N```.
### See Also
[reflect()](index.html#reflect.md), [refract()](index.html#refract.md)

0
glossary/float.md
Unescape Escape View File

21
glossary/floor.md
Unescape Escape View File

@ -0,0 +1,21 @@
## Floor
Find the nearest integer less than or equal to the parameter
### Declaration
```glsl
float floor(float x)
vec2 floor(vec2 x)
vec3 floor(vec3 x)
vec4 floor(vec4 x)
```
### Parameters
```x``` specify the value to evaluate.
### Description
```floor()``` returns a value equal to the nearest integer that is less than or equal to ```x```.
<div class="simpleFunction" data="y = floor(x); "></div>
### See Also
[ceil](index.html#ceil.md), [fract](index.html#fract.md), [mod](index.html#mod.md), [Chapter 05: Shaping Functions](../05/)

21
glossary/fract.md
Unescape Escape View File

@ -0,0 +1,21 @@
## Fract
Compute the fractional part of the argument
### Declaration
```glsl
float fract(float x)
vec2 fract(vec2 x)
vec3 fract(vec3 x)
vec4 fract(vec4 x)
```
### Parameters
```x``` specify the value to evaluate.
### Description
```fract()``` returns the fractional part of ```x```. This is calculated as ```x - floor(x)```.
<div class="simpleFunction" data="y = fract(x); "></div>
### See Also
[floor](index.html#floor.md), [ceil](index.html#ceil.md), [mod](index.html#mod.md), [Chapter 05: Shaping Functions](../05/)

0
glossary/gl_FragColor.md
Unescape Escape View File

24
glossary/greaterThan.md
Unescape Escape View File

@ -0,0 +1,24 @@
## GreaterThan
Perform a component-wise greater-than comparison of two vectors
### Declaration
```glsl
bvec2 greaterThan(vec2 x, vec2 y)
bvec3 greaterThan(vec3 x, vec3 y)
bvec4 greaterThan(vec4 x, vec4 y)
bvec2 greaterThan(ivec2 x, ivec2 y)
bvec3 greaterThan(ivec3 x, ivec3 y)
bvec4 greaterThan(ivec4 x, ivec4 y)
```
### Parameters
```x``` specifies the first vector to be used in the comparison operation.
```y``` specifies the second vector to be used in the comparison operation.
### Description
```greaterThan()``` returns a boolean vector in which each element ```i``` is computed as ```x[i] > y[i]```.
### See Also
[lessThanEqual()](index.html#lessThanEqual.md), [lessThan()](index.html#lessThan.md), [greaterThanEqual()](index.html#greaterThanEqual.md), [equal()](index.html#equal.md), [notEqual()](index.html#notEqual.md), [any()](index.html#any.md), [all()](index.html#all.md), [not()](index.html#not.md)

24
glossary/greaterThanEqual.md
Unescape Escape View File

@ -0,0 +1,24 @@
## GreaterThanEqual
Perform a component-wise greater-than-or-equal comparison of two vectors
### Declaration
```glsl
bvec2 greaterThanEqual(vec2 x, vec2 y)
bvec3 greaterThanEqual(vec3 x, vec3 y)
bvec4 greaterThanEqual(vec4 x, vec4 y)
bvec2 greaterThanEqual(ivec2 x, ivec2 y)
bvec3 greaterThanEqual(ivec3 x, ivec3 y)
bvec4 greaterThanEqual(ivec4 x, ivec4 y)
```
### Parameters
```x``` specifies the first vector to be used in the comparison operation.
```y``` specifies the second vector to be used in the comparison operation.
### Description
```greaterThanEqual()``` returns a boolean vector in which each element ```i``` is computed as ```x[i] ≥ y[i]```.
### See Also
[lessThanEqual()](index.html#lessThanEqual.md), [lessThan()](index.html#lessThan.md), [greaterThan()](index.html#greaterThan.md), [equal()](index.html#equal.md), [notEqual()](index.html#notEqual.md), [any()](index.html#any.md), [all()](index.html#all.md), [not()](index.html#not.md)

0
glossary/highp.md
Unescape Escape View File

0
glossary/in.md
Unescape Escape View File

69
glossary/index.html
Unescape Escape View File

@ -0,0 +1,69 @@
<!-- Copyright 2015 Patricio Gonzalez Vivo (http://patriciogonzalezvivo.com) -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Glossary</title>
<meta name="keywords" content="glsl,shader,github,repository" />
<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>

0
glossary/inout.md
Unescape Escape View File

0
glossary/int.md
Unescape Escape View File

22
glossary/inversesqrt.md
Unescape Escape View File

@ -0,0 +1,22 @@
## Inversesqrt
Return the inverse of the square root of the parameter
### Declaration
```glsl
float inversesqrt(float x)
vec2 inversesqrt(vec2 x)
vec3 inversesqrt(vec3 x)
vec4 inversesqrt(vec4 x)
```
### Parameters
```x``` specify the value of which to take the inverse of the square root.
### Description
```inversesqrt()``` returns the inverse of the square root of ```x```.
<div class="simpleFunction" data="y = inversesqrt(x); "></div>
### See Also
[pow](index.html#pow.md), [sqrt](index.html#sqrt.md), [Chapter 05: Shaping Functions](../05/)

0
glossary/ivec2.md
Unescape Escape View File

0
glossary/ivec3.md
Unescape Escape View File

0
glossary/ivec4.md
Unescape Escape View File

22
glossary/length.md
Unescape Escape View File

@ -0,0 +1,22 @@
## Length
Calculate the length of a vector
### Declaration
```glsl
float length(float x)
float length(vec2 x)
float length(vec3 x)
float length(vec4 x)
```
### Parameters
```x``` specifies a vector of which to calculate the length.
### Description
```length()``` returns the length of the vector.
<div class="codeAndCanvas" data="../07/circle-making.frag"></div>
### See Also
[distance()](index.html#distance.md), [normalize()](index.html#normalize.md), [Chapter 07: Shapes](../07/)

24
glossary/lessThan.md
Unescape Escape View File

@ -0,0 +1,24 @@
## LessThan
Perform a component-wise less-than comparison of two vectors
### Declaration
```glsl
bvec2 lessThan(vec2 x, vec2 y)
bvec3 lessThan(vec3 x, vec3 y)
bvec4 lessThan(vec4 x, vec4 y)
bvec2 lessThan(ivec2 x, ivec2 y)
bvec3 lessThan(ivec3 x, ivec3 y)
bvec4 lessThan(ivec4 x, ivec4 y)
```
### Parameters
```x``` specifies the first vector to be used in the comparison operation.
```y``` specifies the second vector to be used in the comparison operation.
### Description
```lessThan()``` returns a boolean vector in which each element ```i``` is computed as ```x[i] < y[i]```.
### See Also
[lessThanEqual()](index.html#lessThanEqual.md), [greaterThan()](index.html#greaterThan.md), [greaterThanEqual()](index.html#greaterThanEqual.md), [equal()](index.html#equal.md), [notEqual()](index.html#notEqual.md), [any()](index.html#any.md), [all()](index.html#all.md), [not()](index.html#not.md)

24
glossary/lessThanEqual.md
Unescape Escape View File

@ -0,0 +1,24 @@
## LessThanEqual
Perform a component-wise less-than-or-equal comparison of two vectors
### Declaration
```glsl
bvec2 lessThanEqual(vec2 x, vec2 y)
bvec3 lessThanEqual(vec3 x, vec3 y)
bvec4 lessThanEqual(vec4 x, vec4 y)
bvec2 lessThanEqual(ivec2 x, ivec2 y)
bvec3 lessThanEqual(ivec3 x, ivec3 y)
bvec4 lessThanEqual(ivec4 x, ivec4 y)
```
### Parameters
```x``` specifies the first vector to be used in the comparison operation.
```y``` specifies the second vector to be used in the comparison operation.
### Description
```lessThanEqual()``` returns a boolean vector in which each element ```i``` is computed as ```x[i] ≤ y[i]```.
### See Also
[lessThan()](index.html#lessThan.md), [greaterThan()](index.html#greaterThan.md), [greaterThanEqual()](index.html#greaterThanEqual.md), [equal()](index.html#equal.md), [notEqual()](index.html#notEqual.md), [any()](index.html#any.md), [all()](index.html#all.md), [not()](index.html#not.md)

22
glossary/log.md
Unescape Escape View File

@ -0,0 +1,22 @@
## Log
Return the natural logarithm of the parameter
### Declaration
```glsl
float log(float x)
vec2 log(vec2 x)
vec3 log(vec3 x)
vec4 log(vec4 x)
```
### Parameters
```x``` s### Declarationpecify the value of which to take the natural logarithm.
### Description
```log()``` returns the natural logarithm of ```x```.
<div class="simpleFunction" data="y = log(x); "></div>
### See Also
[log2](index.html#log2.md), [exp](index.html#exp.md), [exp2](index.html#exp2.md), [Chapter 05: Shaping Functions](../05/)

22
glossary/log2.md
Unescape Escape View File

@ -0,0 +1,22 @@
## Log2
Return the base 2 logarithm of the parameter
### Declaration
```glsl
float log2(float x)
vec2 log2(vec2 x)
vec3 log2(vec3 x)
vec4 log2(vec4 x)
```
### Parameters
```x``` specify the value of which to take the base 2 logarithm.
### Description
```log2()``` returns the base 2 logarithm of ```x```.
<div class="simpleFunction" data="y = log2(x); "></div>
### See Also
[log](index.html#log.md), [exp](index.html#exp.md), [exp2](index.html#exp2.md), [Chapter 05: Shaping Functions](../05/)

0
glossary/lowp.md
Unescape Escape View File

0
glossary/main.md
Unescape Escape View File

0
glossary/mat2.md
Unescape Escape View File

0
glossary/mat3.md
Unescape Escape View File

0
glossary/mat4.md
Unescape Escape View File

20
glossary/matrixCompMult.md
Unescape Escape View File

@ -0,0 +1,20 @@
## MatrixCompMult
Perform a component-wise multiplication of two matrices
### Declaration
```glsl
mat2 matrixCompMult(mat2 x, mat2 y)
mat3 matrixCompMult(mat3 x, mat3 y)
mat4 matrixCompMult(mat4 x, mat4 y)
```
### Parameters
```x``` specifies the first matrix multiplicand.
```y``` specifies the second matrix multiplicand.
### Description
```matrixCompMult()``` performs a component-wise multiplication of two matrices, yielding a result matrix where each component, ```result[i][j]``` is computed as the scalar product of ```x[i][j]``` and ```y[i][j]```.
### See Also
[Chapter 08: Matrix](../08/)

27
glossary/max.md
Unescape Escape View File

@ -0,0 +1,27 @@
## Max
Return the greater of two values
### Declaration
```glsl
float max(float x, float y)
vec2 max(vec2 x, vec2 y)
vec3 max(vec3 x, vec3 y)
vec4 max(vec4 x, vec4 y)
vec2 max(vec2 x, float y)
vec3 max(vec3 x, float y)
vec4 max(vec4 x, float y)
```
### Parameters
```x``` specify the first value to compare.
```y``` specify the second value to compare.
### Description
```max()``` returns the maximum of the two parameters. It returns ```y``` if ```y``` is greater than ```x```, otherwise it returns ```x```.
<div class="simpleFunction" data="y = max(x,0.5); "></div>
### See Also
[min](index.html#min.md), [abs](index.html#abs.md), [clamp](index.html#clamp.md), [Chapter 05: Shaping Functions](../05/)

0
glossary/mediump.md
Unescape Escape View File

27
glossary/min.md
Unescape Escape View File

@ -0,0 +1,27 @@
## Min
Return the lesser of two values
### Declaration
```glsl
float min(float x, float y)
vec2 min(vec2 x, vec2 y)
vec3 min(vec3 x, vec3 y)
vec4 min(vec4 x, vec4 y)
vec2 min(vec2 x, float y)
vec3 min(vec3 x, float y)
vec4 min(vec4 x, float y)
```
### Parameters
```x``` specify the first value to compare.
```y``` pecify the second value to compare.
### Description
```min()``` returns the minimum of the two parameters. It returns ```y``` if ```y``` is less than ```x```, otherwise it returns ```x```.
<div class="simpleFunction" data="y = min(x,0.5); "></div>
### See Also
[max](index.html#max.md), [abs](index.html#abs.md), [clamp](index.html#clamp.md), [Chapter 05: Shaping Functions](../05/)

32
glossary/mix.md
Unescape Escape View File

@ -0,0 +1,32 @@
## Mix
Constrain a value to lie between two further values
### Declaration
```glsl
float mix(float x, float y, float a)
vec2 mix(vec2 x, vec2 y, vec2 a)
vec3 mix(vec3 x, vec3 y, vec3 a)
vec4 mix(vec4 x, vec4 y, vec4 a)
vec2 mix(vec2 x, vec2 y, float a)
vec3 mix(vec3 x, vec3 y, float a)
vec4 mix(vec4 x, vec4 y, float a)
```
### Parameters
```x``` Specify the start of the range in which to interpolate.
```y``` Specify the end of the range in which to interpolate.
```a``` Specify the value to use to interpolate between x and y.
### Description
```mix()``` performs a linear interpolation between ```x``` and ```y``` using ```a``` to weight between them. The return value is computed as ```x×(1−a)+y×a```.
<div class="codeAndCanvas" data="../06/mix.frag"></div>
<div class="codeAndCanvas" data="../06/gradient.frag"></div>
### See Also
[min](index.html#min.md), [max](index.html#max.md), [Chapter 06: Color](../06/)

26
glossary/mod.md
Unescape Escape View File

@ -0,0 +1,26 @@
## Mod
Compute value of one parameter modulo another
### Declaration
```glsl
float mod(float x, float y)
vec2 mod(vec2 x, vec2 y)
vec3 mod(vec3 x, vec3 y)
vec4 mod(vec4 x, vec4 y)
vec2 mod(vec2 x, float y)
vec3 mod(vec3 x, float y)
vec4 mod(vec4 x, float y)
```
### Parameters
```x``` specify the value to evaluate.
```y``` specify the value to obtain the modulo of.
### Description
```mod()``` returns the value of ```x``` modulo ```y```. This is computed as ```x - y * floor(x/y)```.
<div class="simpleFunction" data="y = mod(x,1.5); "></div>
### See Also
[floor](index.html#floor.md), [fract](index.html#fract.md), [ceil](index.html#ceil.md), [Chapter 05: Shaping Functions](../05/)

20
glossary/normalize.md
Unescape Escape View File

@ -0,0 +1,20 @@
## Normalize
Calculate the normalize product of two vectors
### Declaration
```glsl
float normalize(float x)
vec2 normalize(vec2 x)
vec3 normalize(vec3 x)
vec4 normalize(vec4 x)
```
### Parameters
```v``` specifies the vector to normalize.
### Description
```normalize()``` returns a vector with the same direction as its parameter, v, but with length 1.
### See Also
[length()](index.html#length.md)

18
glossary/not.md
Unescape Escape View File

@ -0,0 +1,18 @@
## Not
Logically invert a boolean vector
### Declaration
```glsl
bvec2 not(bvec2 x)
bvec3 not(bvec3 x)
bvec4 not(bvec4 x)
```
### Parameters
```x``` specifies the vector to be inverted.
### Description
```not()``` logically inverts the boolean vector ```x```. It returns a new boolean vector for which each element ```i``` is computed as ```!x[i]```.
### See Also
[any()](index.html#any.md), [all()](index.html#all.md)

24
glossary/notEqual.md
Unescape Escape View File

@ -0,0 +1,24 @@
## NotEqual
Perform a component-wise not-equal-to comparison of two vectors
### Declaration
```glsl
bvec2 notEqual(vec2 x, vec2 y)
bvec3 notEqual(vec3 x, vec3 y)
bvec4 notEqual(vec4 x, vec4 y)
bvec2 notEqual(ivec2 x, ivec2 y)
bvec3 notEqual(ivec3 x, ivec3 y)
bvec4 notEqual(ivec4 x, ivec4 y)
```
### Parameters
```x``` specifies the first vector to be used in the comparison operation.
```y``` specifies the second vector to be used in the comparison operation.
### Description
```notEqual()``` returns a boolean vector in which each element ```i``` is computed as ```x[i] != y[i]```.
### See Also
[lessThanEqual()](index.html#lessThanEqual.md), [lessThan()](index.html#lessThan.md), [greaterThanEqual()](index.html#greaterThanEqual.md), [greaterThan()](index.html#greaterThan.md), [equal()](index.html#equal.md), [any()](index.html#any.md), [all()](index.html#all.md), [not()](index.html#not.md)

0
glossary/out.md
Unescape Escape View File

Some files were not shown because too many files have changed in this diff Show More

Write Preview
Loading…
Cancel
Save