going a head on textures
Before Width: | Height: | Size: 516 KiB After Width: | Height: | Size: 516 KiB |
After Width: | Height: | Size: 1.1 MiB |
@ -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;
|
||||
}
|
@ -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;
|
||||
}
|
@ -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;
|
||||
}
|
@ -0,0 +1 @@
|
||||
## Kernel convolutions
|
@ -0,0 +1,70 @@
|
||||
<!-- Copyright 2015 Patricio Gonzalez Vivo (http://patriciogonzalezvivo.com) -->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Textures</title>
|
||||
<meta name="keywords" content="glsl,shader,textures,uniforms,sampler2D" />
|
||||
<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()">< < Previous</li>
|
||||
<li class="navigationBar" onclick="homePage()"> Home </li>
|
||||
<li class="navigationBar" onclick="nextPage()">Next > ></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,0 +1 @@
|
||||
## Filters
|
@ -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);
|
||||
}
|
@ -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.);
|
||||
}
|
After Width: | Height: | Size: 480 KiB |
After Width: | Height: | Size: 516 KiB |
@ -0,0 +1,70 @@
|
||||
<!-- Copyright 2015 Patricio Gonzalez Vivo (http://patriciogonzalezvivo.com) -->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Textures</title>
|
||||
<meta name="keywords" content="glsl,shader,textures,uniforms,sampler2D" />
|
||||
<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()">< < Previous</li>
|
||||
<li class="navigationBar" onclick="homePage()"> Home </li>
|
||||
<li class="navigationBar" onclick="nextPage()">Next > ></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>
|
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 17 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 15 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 17 KiB |
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 18 KiB |
@ -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);
|
||||
}
|
@ -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);
|
||||
}
|