From fb64aecccd4402bfbb2b2c4c01241f461d5163f1 Mon Sep 17 00:00:00 2001 From: Patricio Gonzalez Vivo Date: Fri, 1 May 2015 16:05:55 -0400 Subject: [PATCH] textures --- 06/gradient.frag | 6 ++--- 07/cross.frag | 22 ++++++++--------- 07/triangle-making.frag | 22 ++++++++--------- 07/triangle.frag | 26 ++++++++++----------- 10/1d-random.frag | 1 + 10/2d-random-mosaic.frag | 1 + 10/2d-random-truchet.frag | 1 + 10/2d-random.frag | 1 + 11/1d-noise.frag | 16 ++++++------- 11/2d-noise.frag | 10 ++++---- 11/3d-noise.frag | 10 ++++---- 11/noise-move.frag | 1 + 11/noise.frag | 48 ++++++++++++++++++-------------------- 11/wood.frag | 26 ++++++++++----------- 12/1d-fbm.frag | 22 ++++++++--------- 12/2d-fbm.frag | 16 ++++++------- 12/noise.frag | 17 +++++++------- 14/{05.jpg => 01.jpg} | Bin 01/05.jpeg => 14/02.jpg | Bin 14/{09.jpg => 03.jpg} | Bin 14/{10.jpg => 04.jpg} | Bin 14/README.md | 36 +++++++++++++++++++++++----- 14/texture-noise.frag | 11 +++++---- 14/texture.frag | 1 + glossary/GL_ES.md | 0 glossary/abs.md | 2 +- glossary/attribute.md | 0 glossary/bool.md | 0 glossary/bvec2.md | 0 glossary/bvec3.md | 0 glossary/bvec4.md | 0 glossary/const.md | 0 glossary/float.md | 0 glossary/gl_FragColor.md | 0 glossary/highp.md | 0 glossary/in.md | 0 glossary/inout.md | 0 glossary/int.md | 0 glossary/ivec2.md | 0 glossary/ivec3.md | 0 glossary/ivec4.md | 0 glossary/lowp.md | 0 glossary/main.md | 0 glossary/mat2.md | 0 glossary/mat3.md | 0 glossary/mat4.md | 0 glossary/mediump.md | 0 glossary/out.md | 0 glossary/precision.md | 0 glossary/return.md | 0 glossary/uniform.md | 4 ++++ glossary/varying.md | 0 glossary/vec2.md | 0 glossary/vec3.md | 0 glossary/vec4.md | 0 glossary/void.md | 0 56 files changed, 167 insertions(+), 133 deletions(-) rename 14/{05.jpg => 01.jpg} (100%) rename 01/05.jpeg => 14/02.jpg (100%) rename 14/{09.jpg => 03.jpg} (100%) rename 14/{10.jpg => 04.jpg} (100%) create mode 100644 glossary/GL_ES.md create mode 100644 glossary/attribute.md create mode 100644 glossary/bool.md create mode 100644 glossary/bvec2.md create mode 100644 glossary/bvec3.md create mode 100644 glossary/bvec4.md create mode 100644 glossary/const.md create mode 100644 glossary/float.md create mode 100644 glossary/gl_FragColor.md create mode 100644 glossary/highp.md create mode 100644 glossary/in.md create mode 100644 glossary/inout.md create mode 100644 glossary/int.md create mode 100644 glossary/ivec2.md create mode 100644 glossary/ivec3.md create mode 100644 glossary/ivec4.md create mode 100644 glossary/lowp.md create mode 100644 glossary/main.md create mode 100644 glossary/mat2.md create mode 100644 glossary/mat3.md create mode 100644 glossary/mat4.md create mode 100644 glossary/mediump.md create mode 100644 glossary/out.md create mode 100644 glossary/precision.md create mode 100644 glossary/return.md create mode 100644 glossary/uniform.md create mode 100644 glossary/varying.md create mode 100644 glossary/vec2.md create mode 100644 glossary/vec3.md create mode 100644 glossary/vec4.md create mode 100644 glossary/void.md diff --git a/06/gradient.frag b/06/gradient.frag index fc4ac49..2837b67 100644 --- a/06/gradient.frag +++ b/06/gradient.frag @@ -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() { diff --git a/07/cross.frag b/07/cross.frag index 2583c04..a42d89a 100644 --- a/07/cross.frag +++ b/07/cross.frag @@ -9,20 +9,20 @@ 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); +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)); +float cross(in vec2 st, float size){ + return box(st, vec2(size,size/4.)) + + box(st, vec2(size/4.,size)); } void main(){ diff --git a/07/triangle-making.frag b/07/triangle-making.frag index 15a16c4..b1ccac2 100644 --- a/07/triangle-making.frag +++ b/07/triangle-making.frag @@ -10,21 +10,21 @@ 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){ +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.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); + 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); + 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); } diff --git a/07/triangle.frag b/07/triangle.frag index b5702f5..f62ab43 100644 --- a/07/triangle.frag +++ b/07/triangle.frag @@ -10,24 +10,24 @@ 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){ +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.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; + 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); + 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, + return smoothstep(smoothness * 2.0, 1e-7, length(vec3(a, b, c))); } diff --git a/10/1d-random.frag b/10/1d-random.frag index 4ae2312..8d89400 100644 --- a/10/1d-random.frag +++ b/10/1d-random.frag @@ -5,6 +5,7 @@ precision mediump float; #endif uniform vec2 u_resolution; +uniform vec2 u_mouse; uniform float u_time; float plot(vec2 _st, float _pct){ diff --git a/10/2d-random-mosaic.frag b/10/2d-random-mosaic.frag index 7714ef0..5427b39 100644 --- a/10/2d-random-mosaic.frag +++ b/10/2d-random-mosaic.frag @@ -5,6 +5,7 @@ precision mediump float; #endif uniform vec2 u_resolution; +uniform vec2 u_mouse; uniform float u_time; float random (in vec2 _st) { diff --git a/10/2d-random-truchet.frag b/10/2d-random-truchet.frag index bf8de2f..54275bc 100644 --- a/10/2d-random-truchet.frag +++ b/10/2d-random-truchet.frag @@ -7,6 +7,7 @@ precision mediump float; #define PI 3.14159265358979323846 uniform vec2 u_resolution; +uniform vec2 u_mouse; uniform float u_time; float random (in vec2 _st) { diff --git a/10/2d-random.frag b/10/2d-random.frag index a4d7c48..7fced16 100644 --- a/10/2d-random.frag +++ b/10/2d-random.frag @@ -5,6 +5,7 @@ precision mediump float; #endif uniform vec2 u_resolution; +uniform vec2 u_mouse; uniform float u_time; float random (in vec2 _st) { diff --git a/11/1d-noise.frag b/11/1d-noise.frag index 04594da..8ee7f0f 100644 --- a/11/1d-noise.frag +++ b/11/1d-noise.frag @@ -6,20 +6,20 @@ uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; -float plot(vec2 _st, float _pct){ - return smoothstep( _pct-0.01, _pct, _st.y) - - smoothstep( _pct, _pct+0.01, _st.y); +float plot(vec2 st, float pct){ + return smoothstep( pct-0.01, pct, st.y) - + smoothstep( pct, pct+0.01, st.y); } -float random (in float _x) { - return fract(sin(_x)*1e4); +float random (in float x) { + return fract(sin(x)*1e4); } // Based on Morgan McGuire @morgan3d // https://www.shadertoy.com/view/4dS3Wd -float noise (in float _x) { - float i = floor(_x); - float f = fract(_x); +float noise (in float x) { + float i = floor(x); + float f = fract(x); float u = f * f * (3.0 - 2.0 * f); return mix(random(i), random(i + 1.0), u); } diff --git a/11/2d-noise.frag b/11/2d-noise.frag index 0ba60a3..b17d8e2 100644 --- a/11/2d-noise.frag +++ b/11/2d-noise.frag @@ -6,17 +6,17 @@ uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; -float random (in vec2 _st) { - return fract(sin(dot(_st.xy, +float random (in vec2 st) { + return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123); } // Based on Morgan McGuire @morgan3d // https://www.shadertoy.com/view/4dS3Wd -float noise (in vec2 _st) { - vec2 i = floor(_st); - vec2 f = fract(_st); +float noise (in vec2 st) { + vec2 i = floor(st); + vec2 f = fract(st); // Four corners in 2D of a tile float a = random(i); diff --git a/11/3d-noise.frag b/11/3d-noise.frag index 8a1f2ac..a7d74d1 100644 --- a/11/3d-noise.frag +++ b/11/3d-noise.frag @@ -6,17 +6,17 @@ uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; -float random (in float _x) { - return fract(sin(_x)*1e4); +float random (in float x) { + return fract(sin(x)*1e4); } // Based on Morgan McGuire @morgan3d // https://www.shadertoy.com/view/4dS3Wd -float noise (in vec3 _p) { +float noise (in vec3 p) { const vec3 step = vec3(110.0, 241.0, 171.0); - vec3 i = floor(_p); - vec3 f = fract(_p); + vec3 i = floor(p); + vec3 f = fract(p); // For performance, compute the base input to a // 1D random from the integer part of the diff --git a/11/noise-move.frag b/11/noise-move.frag index 7091ad6..0d82c7f 100644 --- a/11/noise-move.frag +++ b/11/noise-move.frag @@ -6,6 +6,7 @@ precision mediump float; #endif uniform vec2 u_resolution; +uniform vec2 u_mouse; uniform float u_time; float random (in float _x) { diff --git a/11/noise.frag b/11/noise.frag index 5ed5a2d..5012e8d 100644 --- a/11/noise.frag +++ b/11/noise.frag @@ -5,27 +5,27 @@ precision mediump float; uniform vec2 u_resolution; uniform float u_time; -float random (in float _x) { - return fract(sin(_x)*1e4); +float random (in float x) { + return fract(sin(x)*1e4); } -float random (in vec2 _st) { - // return fract(sin(dot(_st.xy ,vec2(12.9898,78.233))) * 43758.5453123); - return fract( 1e4 * sin(17.0 * _st.x + _st.y * 0.1) * (0.1 + abs(sin(_st.y * 13.0 + _st.x)))); +float random (in vec2 st) { + // return fract(sin(dot(st.xy ,vec2(12.9898,78.233))) * 43758.5453123); + return fract( 1e4 * sin(17.0 * st.x + st.y * 0.1) * (0.1 + abs(sin(st.y * 13.0 + st.x)))); } // Based on Morgan McGuire @morgan3d // https://www.shadertoy.com/view/4dS3Wd -float noise (in float _x) { - float i = floor(_x); - float f = fract(_x); +float noise (in float x) { + float i = floor(x); + float f = fract(x); float u = f * f * (3.0 - 2.0 * f); return mix(random(i), random(i + 1.0), u); } -float noise (in vec2 _st){ - vec2 i = floor(_st); - vec2 f = fract(_st); +float noise (in vec2 st){ + vec2 i = floor(st); + vec2 f = fract(st); // Four corners in 2D of a tile float a = random(i); @@ -44,11 +44,11 @@ float noise (in vec2 _st){ return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y; } -float noise (in vec3 _p) { +float noise (in vec3 p) { const vec3 step = vec3(110.0, 241.0, 171.0); - vec3 i = floor(_p); - vec3 f = fract(_p); + vec3 i = floor(p); + vec3 f = fract(p); // For performance, compute the base input to a 1D random from the integer part of the argument and the // incremental change to the 1D based on the 3D -> 1D wrapping @@ -63,41 +63,39 @@ float noise (in vec3 _p) { #define NUM_OCTAVES 5 -float fbm ( in float _x) { +float fbm ( in float x) { float v = 0.0; float a = 0.5; float shift = float(100.0); for (int i = 0; i < NUM_OCTAVES; ++i) { - v += a * noise(_x); - _x = _x * 2.0 + shift; + v += a * noise(x); + x = x * 2.0 + shift; a *= 0.5; } return v; } - -float fbm ( in vec2 _st) { +float fbm ( in vec2 st) { float v = 0.0; float a = 0.5; vec2 shift = vec2(100.0); // Rotate to reduce axial bias mat2 rot = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.50)); for (int i = 0; i < NUM_OCTAVES; ++i) { - v += a * noise(_st); - _st = rot * _st * 2.0 + shift; + v += a * noise(st); + st = rot * st * 2.0 + shift; a *= 0.5; } return v; } - -float fbm ( in vec3 _p) { +float fbm ( in vec3 p) { float v = 0.0; float a = 0.5; vec3 shift = vec3(100); for (int i = 0; i < NUM_OCTAVES; ++i) { - v += a * noise(_p); - _p = _p * 2.0 + shift; + v += a * noise(p); + p = p * 2.0 + shift; a *= 0.5; } return v; diff --git a/11/wood.frag b/11/wood.frag index 6aed44a..1018efd 100644 --- a/11/wood.frag +++ b/11/wood.frag @@ -9,17 +9,17 @@ uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; -float random (in vec2 _st) { - return fract(sin(dot(_st.xy, +float random (in vec2 st) { + return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123); } // Based on Morgan McGuire @morgan3d // https://www.shadertoy.com/view/4dS3Wd -float noise (in vec2 _st) { - vec2 i = floor(_st); - vec2 f = fract(_st); +float noise (in vec2 st) { + vec2 i = floor(st); + vec2 f = fract(st); // Four corners in 2D of a tile float a = random(i); @@ -34,18 +34,18 @@ float noise (in vec2 _st) { (d - b) * u.x * u.y; } -mat2 rotate2d(float _angle){ - return mat2(cos(_angle),-sin(_angle), - sin(_angle),cos(_angle)); +mat2 rotate2d(float angle){ + return mat2(cos(angle),-sin(angle), + sin(angle),cos(angle)); } -float lines(in vec2 _pos, float _angle, float _b){ +float lines(in vec2 pos, float angle, float b){ float scale = 10.0; - _pos *= scale; - _pos = rotate2d( _angle ) * _pos; + pos *= scale; + pos = rotate2d( angle ) * pos; return smoothstep(0.0, - 0.5+_b*0.5, - abs((sin(_pos.x*3.1415)+_b*2.0))*0.5); + 0.5+b*0.5, + abs((sin(pos.x*3.1415)+b*2.0))*0.5); } void main() { diff --git a/12/1d-fbm.frag b/12/1d-fbm.frag index e46c019..628c606 100644 --- a/12/1d-fbm.frag +++ b/12/1d-fbm.frag @@ -6,33 +6,33 @@ uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; -float plot(vec2 _st, float _pct){ - return smoothstep( _pct-0.01, _pct, _st.y) - - smoothstep( _pct, _pct+0.01, _st.y); +float plot(vec2 st, float pct){ + return smoothstep( pct-0.01, pct, st.y) - + smoothstep( pct, pct+0.01, st.y); } -float random (in float _x) { - return fract(sin(_x)*1e4); +float random (in float x) { + return fract(sin(x)*1e4); } // Based on Morgan McGuire @morgan3d // https://www.shadertoy.com/view/4dS3Wd -float noise (in float _x) { - float i = floor(_x); - float f = fract(_x); +float noise (in float x) { + float i = floor(x); + float f = fract(x); float u = f * f * (3.0 - 2.0 * f); return mix(random(i), random(i + 1.0), u); } #define NUM_OCTAVES 5 -float fbm ( in float _x) { +float fbm ( in float x) { float v = 0.0; float a = 0.5; float shift = float(100.0); for (int i = 0; i < NUM_OCTAVES; ++i) { - v += a * noise(_x); - _x = _x * 2.0 + shift; + v += a * noise(x); + x = x * 2.0 + shift; a *= 0.5; } return v; diff --git a/12/2d-fbm.frag b/12/2d-fbm.frag index 1651d96..3a2f034 100644 --- a/12/2d-fbm.frag +++ b/12/2d-fbm.frag @@ -6,17 +6,17 @@ uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; -float random (in vec2 _st) { - return fract(sin(dot(_st.xy, +float random (in vec2 st) { + return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123); } // Based on Morgan McGuire @morgan3d // https://www.shadertoy.com/view/4dS3Wd -float noise (in vec2 _st) { - vec2 i = floor(_st); - vec2 f = fract(_st); +float noise (in vec2 st) { + vec2 i = floor(st); + vec2 f = fract(st); // Four corners in 2D of a tile float a = random(i); @@ -33,7 +33,7 @@ float noise (in vec2 _st) { #define NUM_OCTAVES 5 -float fbm ( in vec2 _st) { +float fbm ( in vec2 st) { float v = 0.0; float a = 0.5; vec2 shift = vec2(100.0); @@ -41,8 +41,8 @@ float fbm ( in vec2 _st) { mat2 rot = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.50)); for (int i = 0; i < NUM_OCTAVES; ++i) { - v += a * noise(_st); - _st = rot * _st * 2.0 + shift; + v += a * noise(st); + st = rot * st * 2.0 + shift; a *= 0.5; } return v; diff --git a/12/noise.frag b/12/noise.frag index f69a593..9c64d9f 100644 --- a/12/noise.frag +++ b/12/noise.frag @@ -3,12 +3,13 @@ precision mediump float; #endif uniform vec2 u_resolution; +uniform vec2 u_mouse; uniform float u_time; // Based on Morgan // https://www.shadertoy.com/view/4dS3Wd -float random (in float _x) { - return fract(sin(_x)*1e4); +float random (in float x) { + return fract(sin(x)*1e4); } float random (in vec2 _st) { @@ -16,9 +17,9 @@ float random (in vec2 _st) { return fract( 1e4 * sin(17.0 * _st.x + _st.y * 0.1) * (0.1 + abs(sin(_st.y * 13.0 + _st.x)))); } -float noise (in float _x) { - float i = floor(_x); - float f = fract(_x); +float noise (in float x) { + float i = floor(x); + float f = fract(x); float u = f * f * (3.0 - 2.0 * f); return mix(random(i), random(i + 1.0), u); } @@ -63,13 +64,13 @@ float noise (in vec3 _p) { #define NUM_OCTAVES 5 -float fbm ( in float _x) { +float fbm ( in float x) { float v = 0.0; float a = 0.5; float shift = float(100.0); for (int i = 0; i < NUM_OCTAVES; ++i) { - v += a * noise(_x); - _x = _x * 2.0 + shift; + v += a * noise(x); + x = x * 2.0 + shift; a *= 0.5; } return v; diff --git a/14/05.jpg b/14/01.jpg similarity index 100% rename from 14/05.jpg rename to 14/01.jpg diff --git a/01/05.jpeg b/14/02.jpg similarity index 100% rename from 01/05.jpeg rename to 14/02.jpg diff --git a/14/09.jpg b/14/03.jpg similarity index 100% rename from 14/09.jpg rename to 14/03.jpg diff --git a/14/10.jpg b/14/04.jpg similarity index 100% rename from 14/10.jpg rename to 14/04.jpg diff --git a/14/README.md b/14/README.md index 07cf97b..6492edb 100644 --- a/14/README.md +++ b/14/README.md @@ -1,15 +1,39 @@ # Image processing -Graphic cards (GPUs) have the ability to chop images (called a *texture*) into smaller fragments, which are then fed to the active threads. For this task, the graphics cards are equipped with special accelerated memory types which require the image to be uploaded before being used. Like vegetables in restaurant kitchens, the elements have to be chopped and ready before cooking starts. ****we need to talk about this paragraph and improve it **** +![](01.jpg) -## What is a texture? +## Textures, the new way of doing images -Coming soon… +Graphic cards (GPUs) have special memory types for images. Usually on CPUs images are stores as arrays of bites but on GPUs store images as ```sampler2D``` which is more like a table (or matrix) of floating point vectors. More interestingly is that the values of this *table* of vectors are continously. That means that value between pixels are interpolated in a low level. -![fabric](05.jpg) +In order to use this feature we first need to *upload* the image from the CPU to the GPU, to then pass the ```id``` of the texture to the right [```uniform```](../05). All that happens outside the shader. + +Once the texture is loaded and linked to a valid ```uniform sampler2D``` you can ask for specific color value at specific coordinates (formated on a [```vec2```](index.html#vec2.md) variable) usin the [```texture2D()```](index.html#texture2D.md) function which will return a color formated on a [```vec4```](index.html#vec4.md) variable. + +```glsl +vec4 texture2D(sampler2D texture, vec2 coordinates) +``` + +Check the following code to see how this works inside a shader:
-## Playing +Try: -
\ No newline at end of file +* 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! + +Finnally, you can setup your image to repeat in the edges, so if you give values over or lower of the normalized 0.0 and 1.0, the values will wrap around starting over. + +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! diff --git a/14/texture-noise.frag b/14/texture-noise.frag index a60e82d..1be3779 100644 --- a/14/texture-noise.frag +++ b/14/texture-noise.frag @@ -8,19 +8,20 @@ uniform sampler2D u_tex0; uniform vec2 u_tex0Resolution; uniform vec2 u_resolution; +uniform vec2 u_mouse; uniform float u_time; // Based on Morgan // https://www.shadertoy.com/view/4dS3Wd -float random (in vec2 _st) { - return fract(sin(dot(_st.xy, +float random (in vec2 st) { + return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123); } -float noise (in vec2 _st) { - vec2 i = floor(_st); - vec2 f = fract(_st); +float noise (in vec2 st) { + vec2 i = floor(st); + vec2 f = fract(st); // Four corners in 2D of a tile float a = random(i); diff --git a/14/texture.frag b/14/texture.frag index 555ad42..8ca408b 100644 --- a/14/texture.frag +++ b/14/texture.frag @@ -6,6 +6,7 @@ uniform sampler2D u_tex0; uniform vec2 u_tex0Resolution; uniform vec2 u_resolution; +uniform vec2 u_mouse; uniform float u_time; void main () { diff --git a/glossary/GL_ES.md b/glossary/GL_ES.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/abs.md b/glossary/abs.md index dc8b585..60e203c 100644 --- a/glossary/abs.md +++ b/glossary/abs.md @@ -1,5 +1,5 @@ ## Abs -Return the absolute value of the parameter +Return the absolute value of the parameter. ### Declaration ```glsl diff --git a/glossary/attribute.md b/glossary/attribute.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/bool.md b/glossary/bool.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/bvec2.md b/glossary/bvec2.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/bvec3.md b/glossary/bvec3.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/bvec4.md b/glossary/bvec4.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/const.md b/glossary/const.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/float.md b/glossary/float.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/gl_FragColor.md b/glossary/gl_FragColor.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/highp.md b/glossary/highp.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/in.md b/glossary/in.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/inout.md b/glossary/inout.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/int.md b/glossary/int.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/ivec2.md b/glossary/ivec2.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/ivec3.md b/glossary/ivec3.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/ivec4.md b/glossary/ivec4.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/lowp.md b/glossary/lowp.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/main.md b/glossary/main.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/mat2.md b/glossary/mat2.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/mat3.md b/glossary/mat3.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/mat4.md b/glossary/mat4.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/mediump.md b/glossary/mediump.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/out.md b/glossary/out.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/precision.md b/glossary/precision.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/return.md b/glossary/return.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/uniform.md b/glossary/uniform.md new file mode 100644 index 0000000..04b48b9 --- /dev/null +++ b/glossary/uniform.md @@ -0,0 +1,4 @@ +## Uniform + +### See +[Chapter 03: Uniforms](../05/) \ No newline at end of file diff --git a/glossary/varying.md b/glossary/varying.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/vec2.md b/glossary/vec2.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/vec3.md b/glossary/vec3.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/vec4.md b/glossary/vec4.md new file mode 100644 index 0000000..e69de29 diff --git a/glossary/void.md b/glossary/void.md new file mode 100644 index 0000000..e69de29