|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script> |
|
<script id="vertexShader" type="x-shader/x-vertex"> |
|
void main() { |
|
gl_Position = vec4( position, 1.0 ); |
|
} |
|
</script> |
|
<script id="fragmentShader" type="x-shader/x-fragment"> |
|
|
|
// By Liam Egan |
|
// 2018 |
|
|
|
uniform vec2 u_resolution; |
|
uniform float u_time; |
|
uniform bool u_complex; |
|
uniform sampler2D u_noise; |
|
|
|
const int octaves = 3; |
|
const float seed = 43758.5453123; |
|
const float seed2 = 73156.8473192; |
|
|
|
// LUT Noise by Inigo Quilez - iq/2013 |
|
// https://www.shadertoy.com/view/4sfGzS |
|
float noiseLUT( in vec3 x ) |
|
{ |
|
vec3 p = floor(x); |
|
vec3 f = fract(x); |
|
f = f*f*(3.0-2.0*f); |
|
vec2 uv = (p.xy+vec2(37.0,17.0)*p.z) + f.xy; |
|
vec2 rg = texture2D(u_noise, (uv+0.5)/256.0).yx - .5; |
|
return mix( rg.x, rg.y, f.z ); |
|
} |
|
|
|
float fbm1(in vec2 _st, float seed) { |
|
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 < octaves; ++i) { |
|
v += a * noiseLUT(vec3(_st, 1.)); |
|
// v += a * noise(_st, seed); |
|
_st = rot * _st * 2.0 + shift; |
|
a *= 0.4; |
|
} |
|
return v; |
|
} |
|
|
|
float pattern(vec2 uv, float seed, float time, inout vec2 q, inout vec2 r) { |
|
|
|
q = vec2( fbm1( uv + vec2(0.0,0.0), seed ), |
|
fbm1( uv + vec2(5.2,1.3), seed ) ); |
|
|
|
r = vec2( fbm1( uv + 4.0*q + vec2(1.7 - time / 2.,9.2), seed ), |
|
fbm1( uv + 4.0*q + vec2(8.3 - time / 2.,2.8), seed ) ); |
|
|
|
return fbm1( uv + 4.0*r, seed ); |
|
} |
|
|
|
float pattern2(vec2 uv, float seed, float time, inout vec2 q, inout vec2 r) { |
|
|
|
q = vec2( fbm1( uv + vec2(0.0,0.0), seed ), |
|
fbm1( uv + vec2(5.2,1.3), seed ) ); |
|
|
|
r = vec2( fbm1( uv + 4.0*q + vec2(1.7 - time / 2.,9.2), seed ), |
|
fbm1( uv + 4.0*q + vec2(8.3 - time / 2.,2.8), seed ) ); |
|
|
|
return fbm1( uv + 4.0*r, seed ); |
|
} |
|
|
|
void main() { |
|
vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / u_resolution.y; |
|
|
|
float time = u_time / 10.; |
|
|
|
mat2 rot = mat2(cos(time / 10.), sin(time / 10.), |
|
-sin(time / 10.), cos(time / 10.)); |
|
|
|
uv = rot * uv; |
|
uv *= 0.9 * (sin(u_time / 20.)) + 10.; |
|
uv.x -= time / 5.; |
|
|
|
vec2 q = vec2(0.,0.); |
|
vec2 r = vec2(0.,0.); |
|
|
|
float _pattern = 0.; |
|
|
|
if(u_complex) { |
|
_pattern = pattern2(uv, seed, time, q, r); |
|
} else { |
|
_pattern = pattern(uv, seed, time, q, r); |
|
} |
|
|
|
vec3 colour = vec3(_pattern - .1) * 2.; |
|
colour.r -= dot(q, r) * 15.; |
|
colour = mix(colour, vec3(pattern(r, seed2, time, q, r), dot(q, r) * 15., -0.1), .5); |
|
colour -= q.y * 1.5; |
|
colour = mix(colour, vec3(.2, .2, .2), (clamp(q.x, -1., 0.)) * 3.); |
|
// colour += clamp(0.4, 0.8, fract(_pattern * 10.)) / 5.; |
|
|
|
// gl_FragColor = vec4(abs(colour), 1.); |
|
gl_FragColor = vec4(-colour + (abs(colour) * .5), 1.); |
|
// gl_FragColor = vec4(abs(colour), 1.); |
|
} |
|
</script> |
|
|
|
|
|
<div id="container"></div> |
