diff --git a/07/arrow.frag b/07/arrow.frag index a78f677..43da1c4 100644 --- a/07/arrow.frag +++ b/07/arrow.frag @@ -1,6 +1,10 @@ // 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 @@ -19,13 +23,20 @@ float shape(vec2 st, int 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) { + float afwidth = 0.7 * length(vec2(dFdx(value), dFdy(value))); + return smoothstep(threshold-afwidth, threshold+afwidth, value); +} + 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.2),4)); - - gl_FragColor = vec4(vec3(1.0-smoothstep(.2,.25,d)),1.0); + d = min(shape(st,3),shape(st+vec2(0.,0.19),4)); + + gl_FragColor = vec4(vec3(1.0-aastep(.2,d)),1.0); } \ No newline at end of file diff --git a/14/README.md b/14/README.md index 6492edb..c27ca89 100644 --- a/14/README.md +++ b/14/README.md @@ -1,8 +1,8 @@ # Image processing -![](01.jpg) +## Textures -## Textures, the new way of doing images +![](01.jpg) 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. diff --git a/14/texture-noise.frag b/14/texture-noise.frag index 1be3779..e300512 100644 --- a/14/texture-noise.frag +++ b/14/texture-noise.frag @@ -39,14 +39,17 @@ float noise (in vec2 st) { void main () { vec2 st = gl_FragCoord.xy/u_resolution.xy; - st *= 2.0; + float scale = 2.0; + float offset = 0.5; float angle = noise( st + u_time * 0.1 )*PI; - float radius = 0.2; + float radius = offset; + + 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); + color = texture2D(u_tex0,st-offset); gl_FragColor = color; } \ No newline at end of file diff --git a/15/00.jpg b/15/00.jpg new file mode 100644 index 0000000..4e6a17f Binary files /dev/null and b/15/00.jpg differ diff --git a/15/01.jpg b/15/01.jpg new file mode 100644 index 0000000..e98d072 Binary files /dev/null and b/15/01.jpg differ diff --git a/15/02.jpg b/15/02.jpg new file mode 100644 index 0000000..dcb6f2f Binary files /dev/null and b/15/02.jpg differ diff --git a/06/PhotoshopMathFP.glsl b/15/PhotoshopMathFP.glsl similarity index 89% rename from 06/PhotoshopMathFP.glsl rename to 15/PhotoshopMathFP.glsl index 24e5886..cca1307 100644 --- a/06/PhotoshopMathFP.glsl +++ b/15/PhotoshopMathFP.glsl @@ -158,21 +158,21 @@ vec3 ContrastSaturationBrightness(vec3 color, float brt, float sat, float con) ** 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 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 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 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)) @@ -184,14 +184,14 @@ vec3 ContrastSaturationBrightness(vec3 color, float brt, float sat, float con) #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 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 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 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) @@ -199,8 +199,8 @@ vec3 ContrastSaturationBrightness(vec3 color, float brt, float sat, float con) #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 +#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) @@ -208,9 +208,9 @@ vec3 ContrastSaturationBrightness(vec3 color, float brt, float sat, float con) #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 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)) +#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. diff --git a/15/README.md b/15/README.md new file mode 100644 index 0000000..9fb1d51 --- /dev/null +++ b/15/README.md @@ -0,0 +1,21 @@ +## Image operations + + +### Invert +
+ +### Add +
+ +### Substract +
+ +Absolute difference +
+ +### Multiply +
+ +### PS Blending modes + +
\ No newline at end of file diff --git a/15/add.frag b/15/add.frag new file mode 100644 index 0000000..1b896ce --- /dev/null +++ b/15/add.frag @@ -0,0 +1,21 @@ +#ifdef GL_ES +precision mediump float; +#endif + +uniform sampler2D u_tex0; +uniform sampler2D u_tex1; + +uniform float u_time; +uniform vec2 u_mouse; +uniform vec2 u_resolution; + +void main (void) { + vec2 st = gl_FragCoord.xy/u_resolution.xy; + + vec3 colorA = texture2D(u_tex0,st).rgb; + vec3 colorB = texture2D(u_tex1,st).rgb; + + vec3 color = colorA+colorB; + + gl_FragColor = vec4(color,1.0); +} diff --git a/15/blend.frag b/15/blend.frag new file mode 100644 index 0000000..12031f9 --- /dev/null +++ b/15/blend.frag @@ -0,0 +1,91 @@ +#ifdef GL_ES +precision mediump float; +#endif + +#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)) + +// 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 + +#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)) + +uniform sampler2D u_tex0; +uniform sampler2D u_tex1; + +uniform float u_time; +uniform vec2 u_mouse; +uniform vec2 u_resolution; + +void main (void) { + vec2 st = gl_FragCoord.xy/u_resolution.xy; + vec3 color = vec3(0.0); + + vec3 colorA = texture2D(u_tex0,st).rgb; + vec3 colorB = texture2D(u_tex1,st).rgb; + + color = BlendMultiply(colorA,colorB); + // color = BlendAdd(colorA,colorB); + // color = BlendLighten(colorA,colorB); + // color = BlendDarken(colorA,colorB); + // color = BlendAverage(colorA,colorB); + // color = BlendSubstract(colorA,colorB); + // color = BlendDifference(colorA,colorB); + // color = BlendNegation(colorA,colorB); + // color = BlendExclusion(colorA,colorB); + // color = BlendScreen(colorA,colorB); + // color = BlendOverlay(colorA,colorB); + // color = BlendSoftLight(colorA,colorB); + // color = BlendHardLight(colorA,colorB); + // color = BlendColorDodge(colorA,colorB); + // color = BlendColorBurn(colorA,colorB); + // color = BlendLinearLight(colorA,colorB); + // color = BlendVividLight(colorA,colorB); + // color = BlendPinLight(colorA,colorB); + // color = BlendHardMix(colorA,colorB); + // color = BlendReflect(colorA,colorB); + // color = BlendGlow(colorA,colorB); + // color = BlendPhoenix(colorA,colorB); + + gl_FragColor = vec4(color,1.0); +} diff --git a/15/diff.frag b/15/diff.frag new file mode 100644 index 0000000..b99eb8a --- /dev/null +++ b/15/diff.frag @@ -0,0 +1,21 @@ +#ifdef GL_ES +precision mediump float; +#endif + +uniform sampler2D u_tex0; +uniform sampler2D u_tex1; + +uniform float u_time; +uniform vec2 u_mouse; +uniform vec2 u_resolution; + +void main (void) { + vec2 st = gl_FragCoord.xy/u_resolution.xy; + + vec3 colorA = texture2D(u_tex0,st).rgb; + vec3 colorB = texture2D(u_tex1,st).rgb; + + vec3 color = abs(colorA-colorB); + + gl_FragColor = vec4(color,1.0); +} diff --git a/15/div.frag b/15/div.frag new file mode 100644 index 0000000..d36f526 --- /dev/null +++ b/15/div.frag @@ -0,0 +1,21 @@ +#ifdef GL_ES +precision mediump float; +#endif + +uniform sampler2D u_tex0; +uniform sampler2D u_tex1; + +uniform float u_time; +uniform vec2 u_mouse; +uniform vec2 u_resolution; + +void main (void) { + vec2 st = gl_FragCoord.xy/u_resolution.xy; + + vec3 colorA = texture2D(u_tex0,st).rgb; + vec3 colorB = texture2D(u_tex1,st).rgb; + + vec3 color = colorA/colorB; + + gl_FragColor = vec4(color,1.0); +} diff --git a/15/index.html b/15/index.html new file mode 100644 index 0000000..53e44a7 --- /dev/null +++ b/15/index.html @@ -0,0 +1,70 @@ + + + + + + + Textures + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

The Book of Shaders by Patricio Gonzalez Vivo

+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/15/inv.frag b/15/inv.frag new file mode 100644 index 0000000..3b19337 --- /dev/null +++ b/15/inv.frag @@ -0,0 +1,17 @@ +#ifdef GL_ES +precision mediump float; +#endif + +uniform sampler2D u_tex0; + +uniform float u_time; +uniform vec2 u_mouse; +uniform vec2 u_resolution; + +void main (void) { + vec2 st = gl_FragCoord.xy/u_resolution.xy; + + vec3 color = 1.0-texture2D(u_tex0,st).rgb; + + gl_FragColor = vec4(color,1.0); +} diff --git a/15/mult.frag b/15/mult.frag new file mode 100644 index 0000000..c864326 --- /dev/null +++ b/15/mult.frag @@ -0,0 +1,21 @@ +#ifdef GL_ES +precision mediump float; +#endif + +uniform sampler2D u_tex0; +uniform sampler2D u_tex1; + +uniform float u_time; +uniform vec2 u_mouse; +uniform vec2 u_resolution; + +void main (void) { + vec2 st = gl_FragCoord.xy/u_resolution.xy; + + vec3 colorA = texture2D(u_tex0,st).rgb; + vec3 colorB = texture2D(u_tex1,st).rgb; + + vec3 color = colorA*colorB; + + gl_FragColor = vec4(color,1.0); +} diff --git a/15/rainbow.jpg b/15/rainbow.jpg new file mode 100644 index 0000000..5b71b3f Binary files /dev/null and b/15/rainbow.jpg differ diff --git a/15/sub.frag b/15/sub.frag new file mode 100644 index 0000000..c71e0a3 --- /dev/null +++ b/15/sub.frag @@ -0,0 +1,21 @@ +#ifdef GL_ES +precision mediump float; +#endif + +uniform sampler2D u_tex0; +uniform sampler2D u_tex1; + +uniform float u_time; +uniform vec2 u_mouse; +uniform vec2 u_resolution; + +void main (void) { + vec2 st = gl_FragCoord.xy/u_resolution.xy; + + vec3 colorA = texture2D(u_tex0,st).rgb; + vec3 colorB = texture2D(u_tex1,st).rgb; + + vec3 color = colorA*colorB; + + gl_FragColor = vec4(color,1.0); +} diff --git a/README.md b/README.md index 9efb21d..5cb9b69 100644 --- a/README.md +++ b/README.md @@ -33,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 diff --git a/src/glslCanvas.js b/src/glslCanvas.js index 67619a7..2b7a3bb 100644 --- a/src/glslCanvas.js +++ b/src/glslCanvas.js @@ -268,6 +268,8 @@ function setupWebGL (_canvas, _opt_attribs) { if (!context) { showLink(OTHER_PROBLEM); } + + context.getExtension('OES_standard_derivatives'); return context; };