diff --git a/14/README.md b/14/README.md index c27ca89..b52b9a5 100644 --- a/14/README.md +++ b/14/README.md @@ -14,18 +14,18 @@ Once the texture is loaded and linked to a valid ```uniform sampler2D``` you can vec4 texture2D(sampler2D texture, vec2 coordinates) ``` -Check the following code to see how this works inside a shader: +Check the following code where we load Hokusai's Wave (1830) as ```uniform sampler2D u_tex0``` and we call every pixel of it inside the billboard: -
+
-Try: +If you pay attention you will note that the coordinates for the texture are normalized! What a surprise right? Textures coordenates are consisten with the rest of the things we had saw and their coordenates are between 0.0 and 1.0 whitch match perfectly with the normalized space coordinates we have been using. + +Now that you have seen how we load correctly a texture is time to experiment to discover what we can do with it, by trying: * Scaling the previus texture by half. * Rotating the previus texture 90 degrees. * Hooking the mouse position to the coordenates to move it. -If you pay attention you will note that the coordinates for the texture are normalized! What a surprise right? - Why you should be excited about textures? Well first of all forget about the sad 255 values for channel, once your image is trasformed into a ```uniform sampler2D``` you have all the values between 0.0 and 1.0 (depending on what you set the ```precision``` to ). That's why shaders can make really beatiful post-processing effects. Second, the [```vec2()```](index.html#vec2.md) means you can get values even between pixels. As we said before the textures are a continum. This means that if you set up your texture correctly you can ask for values all arround the surface of your image and the values will smoothly vary from pixel to pixel with no jumps! @@ -34,6 +34,25 @@ Finnally, you can setup your image to repeat in the edges, so if you give values All this features makes your images more like an infinit spandex fabric. You can streach and shrinks your texture without noticing the grid of bites they originally where compose of or the ends of it. To experience this take a look to the following code where we distort a texture using [the noise function we already made](../11/). -
+
-In the next chapters we will learn how to do some image processing using shaders. You will note that finnaly the complexity of shader makes sense, because was in a big sense designed to do this type of process. We will start doing some image operations! +## Texture resolution + +Aboves examples play really well with squared images. Because both sides are equal they perfectly match our squared billboard. But for non-squared images things can be a little more tricky. We need to know the original proportions of the image to know how to streatch it correctly. Thats way the texture's original width and height is pass into the shader as an ```uniform```. In our example framework will be a ```uniform vec2``` with the same name of the texture pluss the world ```Resolution``` at the end of it. + +![Eadweard's Muybridge study of motion](muybridge.jpg) + +Uncomment line 18 of the following example to scale correctly aboves image. Do you think you can centered? + +
+ +This could seam simple but the posibilities of modifing textures coordinates is enormus. For example: *sprite animations*. + +
+ +Now is your turn: + +* Can you make a kaleidoscope using what we have learn? +* + +In the next chapters we will learn how to do some image processing using shaders. You will note that finnaly the complexity of shader makes sense, because was in a big sense designed to do this type of process. We will start doing some image operations! \ No newline at end of file diff --git a/14/kanagawa.jpg b/14/hokusai.jpg similarity index 100% rename from 14/kanagawa.jpg rename to 14/hokusai.jpg diff --git a/14/muybridge.jpg b/14/muybridge.jpg new file mode 100644 index 0000000..6ddf68d Binary files /dev/null and b/14/muybridge.jpg differ diff --git a/14/texture-kaleidoscope.frag b/14/texture-kaleidoscope.frag new file mode 100644 index 0000000..b7eab03 --- /dev/null +++ b/14/texture-kaleidoscope.frag @@ -0,0 +1,41 @@ +#ifdef GL_ES +precision mediump float; +#endif + +#define PI 3.14159265359 +#define TWO_PI 6.28318530718 + +uniform sampler2D u_tex0; +uniform vec2 u_tex0Resolution; + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +// Based on Asalga shader +// https://www.shadertoy.com/view/4ss3WX +void main () { + vec2 st = gl_FragCoord.xy/u_resolution.xy; + float time = u_time*0.1; + + // move to the center + st = st - 0.5; + + // cartesian to polar coordinates + float r = length(st); + float a = atan(st.y, st.x); + + // Repeat side acoriding to angle + float sides = 10.; + float ma = mod(a, TWO_PI/sides); + ma = abs(ma - PI/sides); + + // polar to cartesian coordinates + st = r * vec2(cos(ma), sin(ma)); + st = fract(st+time); + + vec4 color = vec4(st.x,st.y,0.0,1.0); + color = texture2D(u_tex0,st); + + gl_FragColor = color; +} \ No newline at end of file diff --git a/14/texture-noise.frag b/14/texture-noise.frag index e300512..518c076 100644 --- a/14/texture-noise.frag +++ b/14/texture-noise.frag @@ -48,8 +48,7 @@ void main () { st *= scale; st += radius * vec2(cos(angle),sin(angle)); - vec4 color = vec4(st.x,st.y,0.0,1.0); - color = texture2D(u_tex0,st-offset); + vec4 color = texture2D(u_tex0,st); gl_FragColor = color; } \ No newline at end of file diff --git a/14/texture-resolution.frag b/14/texture-resolution.frag new file mode 100644 index 0000000..8b9a6b9 --- /dev/null +++ b/14/texture-resolution.frag @@ -0,0 +1,23 @@ +#ifdef GL_ES +precision mediump float; +#endif + +uniform sampler2D u_tex0; +uniform vec2 u_tex0Resolution; + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +void main () { + vec2 st = gl_FragCoord.xy/u_resolution.xy; + vec4 color = vec4(0.0); + + // Fix the proportions by finding the aspect ration + float aspect = u_tex0Resolution.x/u_tex0Resolution.y; + // st.y *= aspect; // and then applying to it + + color = texture2D(u_tex0,st); + + gl_FragColor = color; +} \ No newline at end of file diff --git a/14/texture-sprite.frag b/14/texture-sprite.frag new file mode 100644 index 0000000..24cd1c9 --- /dev/null +++ b/14/texture-sprite.frag @@ -0,0 +1,38 @@ +#ifdef GL_ES +precision mediump float; +#endif + +uniform sampler2D u_tex0; +uniform vec2 u_tex0Resolution; + +int col = 5; +int row = 4; + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +void main () { + vec2 st = gl_FragCoord.xy/u_resolution.xy; + vec4 color = vec4(0.0); + + // Resolution of one frame + vec2 fRes = u_tex0Resolution/vec2(float(col),float(row)); + + // Normalize value of the frame resolution + vec2 nRes = u_tex0Resolution/fRes; + + // Scale the coordenates to a single frame + st = st/nRes; + + // Calculate the offset in cols and rows + float timeX = u_time*15.; + float timeY = floor(timeX/float(col)); + vec2 offset = vec2( floor(timeX)/nRes.x, + 1.0-(floor(timeY)/nRes.y) ); + st = fract(st+offset); + + color = texture2D(u_tex0,st); + + gl_FragColor = color; +} \ No newline at end of file diff --git a/16/README.md b/16/README.md new file mode 100644 index 0000000..6ea7993 --- /dev/null +++ b/16/README.md @@ -0,0 +1 @@ +## Kernel convolutions diff --git a/16/index.html b/16/index.html new file mode 100644 index 0000000..53e44a7 --- /dev/null +++ b/16/index.html @@ -0,0 +1,70 @@ + + + + + + + Textures + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

The Book of Shaders by Patricio Gonzalez Vivo

+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/17/README.md b/17/README.md new file mode 100644 index 0000000..b2db33f --- /dev/null +++ b/17/README.md @@ -0,0 +1 @@ +## Filters diff --git a/17/grain.frag b/17/grain.frag new file mode 100644 index 0000000..522b407 --- /dev/null +++ b/17/grain.frag @@ -0,0 +1,98 @@ +#ifdef GL_ES +precision mediump float; +#endif + +uniform sampler2D u_tex0; + +uniform float u_time; +uniform vec2 u_mouse; +uniform vec2 u_resolution; + +vec3 random3(vec3 c) { + float j = 4096.0*sin(dot(c,vec3(17.0, 59.4, 15.0))); + vec3 r; + r.z = fract(512.0*j); + j *= .125; + r.x = fract(512.0*j); + j *= .125; + r.y = fract(512.0*j); + return r-0.5; +} + +const float F3 = 0.3333333; +const float G3 = 0.1666667; +float snoise(vec3 p) { + vec3 s = floor(p + dot(p, vec3(F3))); + vec3 x = p - s + dot(s, vec3(G3)); + vec3 e = step(vec3(0.0), x - x.yzx); + vec3 i1 = e*(1.0 - e.zxy); + vec3 i2 = 1.0 - e.zxy*(1.0 - e); + vec3 x1 = x - i1 + G3; + vec3 x2 = x - i2 + 2.0*G3; + vec3 x3 = x - 1.0 + 3.0*G3; + vec4 w, d; + w.x = dot(x, x); + w.y = dot(x1, x1); + w.z = dot(x2, x2); + w.w = dot(x3, x3); + w = max(0.6 - w, 0.0); + d.x = dot(random3(s), x); + d.y = dot(random3(s + i1), x1); + d.z = dot(random3(s + i2), x2); + d.w = dot(random3(s + 1.0), x3); + w *= w; + w *= w; + d *= w; + return dot(d, vec4(52.0)); +} + +// Author: Matt DesLauriers +// https://github.com/mattdesl/glsl-film-grain/blob/master/index.glsl +// +float grain(vec2 texCoord, vec2 resolution, float frame, float multiplier) { + vec2 mult = texCoord * resolution; + float offset = snoise(vec3(mult / multiplier, frame)); + float n1 = snoise(vec3(mult, offset)); + return n1 / 2.0 + 0.5; +} + +float grain(vec2 texCoord, vec2 resolution, float frame) { + return grain(texCoord, resolution, frame, 2.5); +} + +float grain(vec2 texCoord, vec2 resolution) { + return grain(texCoord, resolution, 0.0); +} + +// Author: Hugh Kennedy +// https://github.com/hughsk/glsl-luma/blob/master/index.glsl +float luma(vec3 color) { + return dot(color, vec3(0.299, 0.587, 0.114)); +} + +float luma(vec4 color) { + return dot(color.rgb, vec3(0.299, 0.587, 0.114)); +} + +// Author: Matt DesLauriers +// https://github.com/mattdesl/glsl-blend-soft-light/blob/master/index.glsl +vec3 blendSoftLight(vec3 base, vec3 blend) { + return mix( + sqrt(base) * (2.0 * blend - 1.0) + 2.0 * base * (1.0 - blend), + 2.0 * base * blend + base * base * (1.0 - 2.0 * blend), + step(base, vec3(0.5)) + ); +} + +void main (void) { + vec2 st = gl_FragCoord.xy/u_resolution.xy; + vec3 color = texture2D(u_tex0,st).rgb; + vec3 grain = vec3( grain(st,u_resolution/7.) ); + + color = blendSoftLight(color,grain); + + float luminance = luma(color); + color = vec3(luminance); + + gl_FragColor = vec4(color,1.0); +} diff --git a/17/hatch.frag b/17/hatch.frag new file mode 100644 index 0000000..4f9c0a5 --- /dev/null +++ b/17/hatch.frag @@ -0,0 +1,24 @@ +#ifdef GL_ES +precision highp float; +#endif + +uniform sampler2D u_tex0; +uniform vec2 u_tex0Resolution; + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +float hatch ( sampler2D hatchmap, vec2 st,float brighness ){ + float col = floor((1.0-brighness)*9.0)/3.; + float row = floor(brighness*3.0)/3.; + return texture2D(hatchmap,vec2(col,row)+st/3.).a; +} + +void main(){ + vec2 st = gl_FragCoord.st/u_resolution.xy; + float b = st.x; + vec3 color = vec3(1.0); + color -= hatch(u_tex0,st,b).a; + gl_FragColor = vec4(color,1.); +} \ No newline at end of file diff --git a/17/hatch.png b/17/hatch.png new file mode 100644 index 0000000..0990d46 Binary files /dev/null and b/17/hatch.png differ diff --git a/17/hokusai.jpg b/17/hokusai.jpg new file mode 100644 index 0000000..9f16434 Binary files /dev/null and b/17/hokusai.jpg differ diff --git a/17/index.html b/17/index.html new file mode 100644 index 0000000..53e44a7 --- /dev/null +++ b/17/index.html @@ -0,0 +1,70 @@ + + + + + + + Textures + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

The Book of Shaders by Patricio Gonzalez Vivo

+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/17/lut-0000.png b/17/lut-0000.png new file mode 100644 index 0000000..ed814df Binary files /dev/null and b/17/lut-0000.png differ diff --git a/17/lut-0001.png b/17/lut-0001.png new file mode 100644 index 0000000..c97b3f6 Binary files /dev/null and b/17/lut-0001.png differ diff --git a/17/lut-0002.png b/17/lut-0002.png new file mode 100644 index 0000000..1a5d1c6 Binary files /dev/null and b/17/lut-0002.png differ diff --git a/17/lut-0003.png b/17/lut-0003.png new file mode 100644 index 0000000..d05a25f Binary files /dev/null and b/17/lut-0003.png differ diff --git a/17/lut-0004.png b/17/lut-0004.png new file mode 100644 index 0000000..4c7416a Binary files /dev/null and b/17/lut-0004.png differ diff --git a/17/lut-0005.png b/17/lut-0005.png new file mode 100644 index 0000000..872ebe3 Binary files /dev/null and b/17/lut-0005.png differ diff --git a/17/lut-0006.png b/17/lut-0006.png new file mode 100644 index 0000000..6aa69d7 Binary files /dev/null and b/17/lut-0006.png differ diff --git a/17/lut-0007.png b/17/lut-0007.png new file mode 100644 index 0000000..f61451f Binary files /dev/null and b/17/lut-0007.png differ diff --git a/17/lut-0008.png b/17/lut-0008.png new file mode 100644 index 0000000..9303df5 Binary files /dev/null and b/17/lut-0008.png differ diff --git a/17/lut-0009.png b/17/lut-0009.png new file mode 100644 index 0000000..a164996 Binary files /dev/null and b/17/lut-0009.png differ diff --git a/17/lut-0010.png b/17/lut-0010.png new file mode 100644 index 0000000..b91bbba Binary files /dev/null and b/17/lut-0010.png differ diff --git a/17/lut-0011.png b/17/lut-0011.png new file mode 100644 index 0000000..c5dc286 Binary files /dev/null and b/17/lut-0011.png differ diff --git a/17/lut-0012.png b/17/lut-0012.png new file mode 100644 index 0000000..1602756 Binary files /dev/null and b/17/lut-0012.png differ diff --git a/17/lut-0013.png b/17/lut-0013.png new file mode 100644 index 0000000..cdd1865 Binary files /dev/null and b/17/lut-0013.png differ diff --git a/17/lut-plain.frag b/17/lut-plain.frag new file mode 100644 index 0000000..73be2ef --- /dev/null +++ b/17/lut-plain.frag @@ -0,0 +1,22 @@ +#ifdef GL_ES +precision highp float; +#endif + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +const float size = 8.0; + +void main(){ + vec2 st = gl_FragCoord.st/u_resolution.xy; + vec3 color = vec3(.0); + + float red = fract(st.x*size); + float green = fract((1.-st.y)*size); + float blue = floor((1.-st.y)*size)/size; + + color = vec3(red,green,blue); + + gl_FragColor = vec4( color , 1.0); +} \ No newline at end of file diff --git a/17/lut.frag b/17/lut.frag new file mode 100644 index 0000000..923d209 --- /dev/null +++ b/17/lut.frag @@ -0,0 +1,62 @@ +#ifdef GL_ES +precision highp float; +#endif + +uniform sampler2D u_tex0; +uniform sampler2D u_tex1; + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +// Author: Matt DesLauriers +// https://github.com/mattdesl/glsl-lut/blob/master/index.glsl +// +#define LUT_NO_CLAMP +#define LUT_FLIP_Y + +vec4 lookup(in vec4 textureColor, in sampler2D lookupTable) { + #ifndef LUT_NO_CLAMP + textureColor = clamp(textureColor, 0.0, 1.0); + #endif + + float blueColor = textureColor.b * 63.0; + + vec2 quad1 = vec2(0.0); + quad1.y = floor(floor(blueColor) / 8.0); + quad1.x = floor(blueColor) - (quad1.y * 8.0); + + vec2 quad2 = vec2(0.0); + quad2.y = floor(ceil(blueColor) / 8.0); + quad2.x = ceil(blueColor) - (quad2.y * 8.0); + + vec2 texPos1 = vec2(0.0); + texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r); + texPos1.y = (quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g); + + #ifdef LUT_FLIP_Y + texPos1.y = 1.0-texPos1.y; + #endif + + vec2 texPos2 = vec2(0.0); + texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r); + texPos2.y = (quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g); + + #ifdef LUT_FLIP_Y + texPos2.y = 1.0-texPos2.y; + #endif + + vec4 newColor1 = texture2D(lookupTable, texPos1); + vec4 newColor2 = texture2D(lookupTable, texPos2); + + vec4 newColor = mix(newColor1, newColor2, fract(blueColor)); + return newColor; +} + +void main(){ + vec2 st = gl_FragCoord.st/u_resolution.xy; + vec4 srcColor = texture2D(u_tex0, st); + vec3 dstcolor = lookup(srcColor,u_tex1).rgb; + + gl_FragColor = vec4( dstcolor , 1.0); +} \ No newline at end of file diff --git a/glossary/dFdx.md b/glossary/dFdx.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/dFdy.md b/glossary/dFdy.md new file mode 100644 index 0000000..e69de29