Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
const noise = `
//
// Description : Array and textureless GLSL 2D/3D/4D simplex
// noise functions.
// Author : Ian McEwan, Ashima Arts.
// Maintainer : ijm
// Lastmod : 20110822 (ijm)
// License : Copyright (C) 2011 Ashima Arts. All rights reserved.
// Distributed under the MIT License. See LICENSE file.
// https://github.com/ashima/webgl-noise
//
vec3 mod289(vec3 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 mod289(vec4 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 permute(vec4 x) {
return mod289(((x*34.0)+1.0)*x);
}
vec4 taylorInvSqrt(vec4 r)
{
return 1.79284291400159 - 0.85373472095314 * r;
}
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.0 * C.xxx;
// x1 = x0 - i1 + 1.0 * C.xxx;
// x2 = x0 - i2 + 2.0 * C.xxx;
// x3 = x0 - 1.0 + 3.0 * C.xxx;
vec3 x1 = x0 - i1 + C.xxx;
vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y
// Permutations
i = mod289(i);
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: 7x7 points over a square, mapped onto an octahedron.
// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
float n_ = 0.142857142857; // 1.0/7.0
vec3 ns = n_ * D.wyz - D.xzx;
vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7)
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 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
//vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
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) ) );
}
`;
const oklab = `
float fixedpow(float a, float x)
{
return pow(abs(a), x) * sign(a);
}
float cbrt(float a)
{
return fixedpow(a, 0.3333333333);
}
vec3 lsrgb2oklab(vec3 c)
{
float l = 0.4122214708 * c.r + 0.5363325363 * c.g + 0.0514459929 * c.b;
float m = 0.2119034982 * c.r + 0.6806995451 * c.g + 0.1073969566 * c.b;
float s = 0.0883024619 * c.r + 0.2817188376 * c.g + 0.6299787005 * c.b;
float l_ = cbrt(l);
float m_ = cbrt(m);
float s_ = cbrt(s);
return vec3(
0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_,
1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_,
0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_
);
}
vec3 oklab2lsrgb(vec3 c)
{
float l_ = c.r + 0.3963377774 * c.g + 0.2158037573 * c.b;
float m_ = c.r - 0.1055613458 * c.g - 0.0638541728 * c.b;
float s_ = c.r - 0.0894841775 * c.g - 1.2914855480 * c.b;
float l = l_ * l_ * l_;
float m = m_ * m_ * m_;
float s = s_ * s_ * s_;
return vec3(
4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
-0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s
);
}
`;
const vert = `
varying vec3 absPosition;
void main() {
absPosition = position;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`;
const frag = `
uniform highp float radius;
uniform highp float time;
uniform vec3 color1;
uniform vec3 color2;
uniform float night;
varying vec3 absPosition;
${noise}
${oklab}
float get_mix(float index, float noise) {
// 3.4 instead of 3 to bias color 1 a bit more, not fully even
highp float lastPerc = (index - 1.) / 3.4;
highp float thisPerc = index / 3.4;
highp float height = ((absPosition.y + radius) / 2.) / (radius);
return smoothstep(lastPerc, thisPerc, height + noise * 0.1);
}
void main() {
highp float yCoord = (gl_FragCoord.y / gl_FragCoord.w);
highp float height = ((absPosition.y + radius) / 2.) / (radius);
highp float noise_smooth = snoise((absPosition * 0.01)+ time*0.1);
highp float noise_rough = snoise((absPosition * 0.1)+ time*0.45);
// colors switched here to get color1 on top, because i'm lazy
vec3 color1_oklab = lsrgb2oklab(color2);
vec3 color2_oklab = lsrgb2oklab(color1);
// color 0
vec3 color = color2;
// color 1
highp float noise1 = noise_smooth * 2. + noise_rough * 0.2;
vec3 color_1 = oklab2lsrgb(mix(color1_oklab, color2_oklab, 1. / 3.));
color = mix(color, color_1, get_mix(1., noise1));
// color 2
highp float noise2 = noise_smooth * 4. + noise_rough * 0.2;
vec3 color_2 = oklab2lsrgb(mix(color1_oklab, color2_oklab, 2. / 3.));
color = mix(color, color_2, get_mix(2., noise2));
// color 3
highp float noise3 = noise_smooth * 1.5 + noise_rough * 0.8;
vec3 color_3 = oklab2lsrgb(mix(color1_oklab, color2_oklab, 1.));
color = mix(color, color_3, get_mix(3., noise3));
// lighten/darken over time
color *= night;
gl_FragColor = vec4( color, 1.0 );
}
`;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment