371 lines
9.8 KiB
HTML
371 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CodePen - Firefly flow</title>
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<script id="vertexShader_particle" type="x-shader/x-vertex">
|
|
attribute vec4 a_position;
|
|
attribute vec3 a_colour;
|
|
attribute vec2 a_reference;
|
|
|
|
uniform vec2 u_resolution;
|
|
|
|
uniform sampler2D b_velocity;
|
|
uniform sampler2D b_position;
|
|
uniform sampler2D b_blur;
|
|
|
|
varying vec3 v_colour;
|
|
varying float v_fogDepth;
|
|
|
|
float rand(vec2 n) {
|
|
return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
|
|
}
|
|
|
|
vec3 hsv2rgb(vec3 c) {
|
|
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
|
|
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
|
|
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
|
|
}
|
|
|
|
void main() {
|
|
vec2 position = texture2D(b_position, a_reference).xy;
|
|
vec2 velocity = texture2D(b_velocity, a_reference).xy;
|
|
float size = texture2D(b_blur, position).r;
|
|
|
|
vec4 pos = vec4(position / u_resolution * 2. - 1., 0., 1.);
|
|
|
|
gl_Position = pos;
|
|
gl_PointSize = 2.+size*.02;
|
|
v_colour = vec3(1);
|
|
}
|
|
</script>
|
|
<script id="vertexShader_buffer" type="x-shader/x-vertex">attribute vec4 a_position;
|
|
uniform mat4 u_modelViewMatrix;
|
|
uniform mat4 u_projectionMatrix;
|
|
|
|
void main() {
|
|
gl_Position = a_position;
|
|
}
|
|
</script>
|
|
<script id="fragmentShader_velocity" type="x-shader/x-fragment">
|
|
#extension GL_OES_standard_derivatives : enable
|
|
precision highp float;
|
|
|
|
#define PI 3.141592653589793
|
|
#define HPI 1.5707963267948966
|
|
#define TAU 6.283185307179586
|
|
#define G 0.67408
|
|
|
|
uniform vec2 u_resolution;
|
|
uniform vec2 u_mouse;
|
|
uniform float u_time;
|
|
uniform sampler2D s_noise;
|
|
|
|
uniform sampler2D b_velocity;
|
|
uniform sampler2D b_position;
|
|
|
|
// Simplex 3D Noise
|
|
// by Ian McEwan, Ashima Arts
|
|
//
|
|
vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
|
|
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
|
|
|
|
float rand(float n){return fract(sin(n) * 43758.5453123);}
|
|
float rand(vec2 n) {
|
|
return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
|
|
}
|
|
float snoise(vec3 v){
|
|
const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;
|
|
const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
|
|
|
|
// First corner
|
|
vec3 i = floor(v + dot(v, C.yyy) );
|
|
vec3 x0 = v - i + dot(i, C.xxx) ;
|
|
|
|
// Other corners
|
|
vec3 g = step(x0.yzx, x0.xyz);
|
|
vec3 l = 1.0 - g;
|
|
vec3 i1 = min( g.xyz, l.zxy );
|
|
vec3 i2 = max( g.xyz, l.zxy );
|
|
|
|
// x0 = x0 - 0. + 0.0 * C
|
|
vec3 x1 = x0 - i1 + 1.0 * C.xxx;
|
|
vec3 x2 = x0 - i2 + 2.0 * C.xxx;
|
|
vec3 x3 = x0 - 1. + 3.0 * C.xxx;
|
|
|
|
// Permutations
|
|
i = mod(i, 289.0 );
|
|
vec4 p = permute( permute( permute(
|
|
i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
|
|
+ i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
|
|
+ i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
|
|
|
|
// Gradients
|
|
// ( N*N points uniformly over a square, mapped onto an octahedron.)
|
|
float n_ = 1.0/7.0; // N=7
|
|
vec3 ns = n_ * D.wyz - D.xzx;
|
|
|
|
vec4 j = p - 49.0 * floor(p * ns.z *ns.z); // mod(p,N*N)
|
|
|
|
vec4 x_ = floor(j * ns.z);
|
|
vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N)
|
|
|
|
vec4 x = x_ *ns.x + ns.yyyy;
|
|
vec4 y = y_ *ns.x + ns.yyyy;
|
|
vec4 h = 1.0 - abs(x) - abs(y);
|
|
|
|
vec4 b0 = vec4( x.xy, y.xy );
|
|
vec4 b1 = vec4( x.zw, y.zw );
|
|
|
|
vec4 s0 = floor(b0)*2.0 + 1.0;
|
|
vec4 s1 = floor(b1)*2.0 + 1.0;
|
|
vec4 sh = -step(h, vec4(0.0));
|
|
|
|
vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
|
|
vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
|
|
|
|
vec3 p0 = vec3(a0.xy,h.x);
|
|
vec3 p1 = vec3(a0.zw,h.y);
|
|
vec3 p2 = vec3(a1.xy,h.z);
|
|
vec3 p3 = vec3(a1.zw,h.w);
|
|
|
|
//Normalise gradients
|
|
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
|
|
p0 *= norm.x;
|
|
p1 *= norm.y;
|
|
p2 *= norm.z;
|
|
p3 *= norm.w;
|
|
|
|
// Mix final noise value
|
|
vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
|
|
m = m * m;
|
|
return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
|
|
dot(p2,x2), dot(p3,x3) ) );
|
|
}
|
|
|
|
float noise21(vec2 n) {
|
|
const vec2 d = vec2(0.0, 1.0);
|
|
vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));
|
|
return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
|
|
}
|
|
|
|
void main() {
|
|
vec2 uv = gl_FragCoord.xy / u_resolution.xy;
|
|
vec2 position = texture2D(b_position, uv).xy;
|
|
vec2 velocity = texture2D(b_velocity, uv).xy;
|
|
|
|
float n = snoise(vec3(position*.002, u_time - floor(u_time) * 20.)) * 3.14159;
|
|
n = snoise(vec3((position+n)*.002, n));
|
|
|
|
float a = n * (3.14159 * 2.) + noise21(position)*7.;
|
|
|
|
float c = cos(a);
|
|
float s = sin(a);
|
|
|
|
velocity = velocity + vec2(c, s) * .1;
|
|
|
|
if(length(velocity) > 1.) velocity = normalize(velocity)*1.;
|
|
|
|
gl_FragColor = vec4(velocity, 0., 1.0);
|
|
}
|
|
</script>
|
|
<script id="fragmentShader_position" type="x-shader/x-fragment">
|
|
#extension GL_OES_standard_derivatives : enable
|
|
precision highp float;
|
|
|
|
uniform vec2 u_resolution;
|
|
uniform vec2 u_mouse;
|
|
uniform float u_time;
|
|
uniform sampler2D s_noise;
|
|
uniform vec2 u_screen;
|
|
|
|
uniform sampler2D b_velocity;
|
|
uniform sampler2D b_position;
|
|
|
|
void main() {
|
|
vec2 uv = gl_FragCoord.xy / u_resolution.xy;
|
|
vec2 position = texture2D(b_position, uv).xy;
|
|
vec2 velocity = texture2D(b_velocity, uv).xy;
|
|
|
|
vec2 pos = position+velocity*.99;
|
|
if(pos.x > u_screen.x + 20.) pos.x = -10.;
|
|
else if(pos.x < -20.) pos.x = u_screen.x + 10.;
|
|
if(pos.y > u_screen.y + 20.) pos.y = -10.;
|
|
else if(pos.y < -20.) pos.y = u_screen.y + 10.;
|
|
|
|
gl_FragColor = vec4(pos, 0., 1.0);
|
|
}
|
|
</script>
|
|
<script id="fragmentShader_particle" type="x-shader/x-fragment">
|
|
#extension GL_OES_standard_derivatives : enable
|
|
precision highp float;
|
|
|
|
uniform vec2 u_resolution;
|
|
uniform vec2 u_mouse;
|
|
uniform float u_time;
|
|
uniform sampler2D s_noise;
|
|
|
|
uniform sampler2D b_prime;
|
|
uniform sampler2D b_position;
|
|
|
|
varying vec3 v_colour;
|
|
varying float v_fogDepth;
|
|
|
|
vec2 getScreenSpace() {
|
|
vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
|
|
|
|
return uv;
|
|
}
|
|
|
|
void main() {
|
|
vec2 uv = gl_PointCoord.xy - .5;
|
|
vec2 s = gl_FragCoord.xy / u_resolution.xy;
|
|
|
|
gl_FragColor = vec4(0, 0, 0, 1);
|
|
|
|
float l = length(uv);
|
|
float c = smoothstep(.5, 0., l);
|
|
float fog = smoothstep(-200., -1., v_fogDepth);
|
|
float opacity = c * fog;
|
|
|
|
gl_FragColor = vec4(v_colour, opacity);
|
|
}
|
|
|
|
</script>
|
|
<script id="fragmentShader_blur" type="x-shader/x-fragment">
|
|
#extension GL_OES_standard_derivatives : enable
|
|
precision highp float;
|
|
|
|
uniform vec2 u_resolution;
|
|
uniform vec2 u_mouse;
|
|
uniform float u_time;
|
|
uniform sampler2D s_noise;
|
|
|
|
uniform sampler2D b_prime;
|
|
uniform sampler2D b_blur;
|
|
|
|
varying vec3 v_colour;
|
|
|
|
const float blurMultiplier = 0.985;
|
|
const float blurStrength = .3;
|
|
const int samples = 6;
|
|
const float sigma = float(samples) * 0.25;
|
|
|
|
#define PI 3.141592653589793
|
|
#define TAU 6.283185307179586
|
|
#define pow2(x) (x * x)
|
|
|
|
vec2 getScreenSpace() {
|
|
vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
|
|
|
|
return uv;
|
|
}
|
|
|
|
float gaussian(vec2 i) {
|
|
return 1.0 / (2.0 * PI * pow2(sigma)) * exp(-((pow2(i.x) + pow2(i.y)) / (2.0 * pow2(sigma))));
|
|
}
|
|
vec4 blur(sampler2D sp, vec2 uv, vec2 scale) {
|
|
vec4 col = vec4(0.0);
|
|
float accum = 0.0;
|
|
float weight;
|
|
vec2 offset;
|
|
|
|
for (int x = -samples / 2; x < samples / 2; ++x) {
|
|
for (int y = -samples / 2; y < samples / 2; ++y) {
|
|
offset = vec2(x, y);
|
|
weight = gaussian(offset);
|
|
col += texture2D(sp, uv + scale * offset) * weight;
|
|
accum += weight;
|
|
}
|
|
}
|
|
|
|
return col / accum;
|
|
}
|
|
|
|
void main() {
|
|
vec2 s = gl_FragCoord.xy / u_resolution;
|
|
|
|
vec2 ps = vec2(1.0) / u_resolution.xy;
|
|
|
|
vec4 p = texture2D(b_prime, s);
|
|
vec4 b = blur(b_blur, s, ps*blurStrength);
|
|
|
|
vec4 opt = b * blurMultiplier + p;
|
|
|
|
gl_FragColor = opt;
|
|
}
|
|
|
|
</script>
|
|
<script id="fragmentShader_output" type="x-shader/x-fragment">
|
|
#extension GL_OES_standard_derivatives : enable
|
|
precision highp float;
|
|
|
|
uniform vec2 u_resolution;
|
|
uniform vec2 u_mouse;
|
|
uniform float u_time;
|
|
uniform sampler2D s_noise;
|
|
|
|
uniform sampler2D b_prime;
|
|
uniform sampler2D b_blur;
|
|
|
|
varying vec3 v_colour;
|
|
|
|
vec2 getScreenSpace() {
|
|
vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
|
|
|
|
return uv;
|
|
}
|
|
|
|
const int samples = 8;
|
|
const float sigma = float(samples) * 0.25;
|
|
|
|
#define PI 3.141592653589793
|
|
#define TAU 6.283185307179586
|
|
#define pow2(x) (x * x)
|
|
|
|
float gaussian(vec2 i) {
|
|
return 1.0 / (2.0 * PI * pow2(sigma)) * exp(-((pow2(i.x) + pow2(i.y)) / (2.0 * pow2(sigma))));
|
|
}
|
|
vec4 blur(sampler2D sp, vec2 uv, vec2 scale) {
|
|
vec4 col = vec4(0.0);
|
|
float accum = 0.0;
|
|
float weight;
|
|
vec2 offset;
|
|
|
|
for (int x = -samples / 2; x < samples / 2; ++x) {
|
|
for (int y = -samples / 2; y < samples / 2; ++y) {
|
|
offset = vec2(x, y);
|
|
weight = gaussian(offset);
|
|
col += texture2D(sp, uv + scale * offset) * weight;
|
|
accum += weight;
|
|
}
|
|
}
|
|
|
|
return col / accum;
|
|
}
|
|
|
|
void main() {
|
|
vec2 s = gl_FragCoord.xy / u_resolution;
|
|
|
|
vec4 p = texture2D(b_prime, s);
|
|
vec4 b = texture2D(b_blur, s);
|
|
b.a = clamp(b.a*.001, 0., 1.);
|
|
p = blur(b_prime, s, (vec2(1)/u_resolution)*.5)*(b.a+.2);
|
|
vec4 opt = mix(b, p, p.a);
|
|
|
|
gl_FragColor = vec4(mix(vec3(0.05,.1,.1), opt.rgb, opt.a), 1.);
|
|
// gl_FragColor = opt;
|
|
}
|
|
|
|
</script>
|
|
<!-- partial -->
|
|
<script type="module" src="./script.js"></script>
|
|
|
|
</body>
|
|
</html>
|