GLSLでシンプレックスノイズ

<script src="js/script.js" type="module"></script>

const vertexShader =`
	attribute vec3 position;

	void main(void){
		gl_Position = vec4(position,1.0);
	}
`;

const fragmentShader =`
	precision highp float;

	uniform float time;
	uniform vec2 mouse;
	uniform vec2 resolution;

	// webgl-noise

	// Description : Array and textureless GLSL 2D/3D/4D simplex noise functions.
	//      Author : Ian McEwan,Ashima Arts.
	//  Maintainer : stegu
	//     Lastmod : 20201014(stegu)
	//     License : Copyright(C)2011 Ashima Arts.All rights reserved.
	//               Distributed under the MIT License.See LICENSE file.
	//               https://github.com/ashima/webgl-noise
	//               https://github.com/stegu/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);
		vec3 i  = floor(v + dot(v, C.yyy) );
		vec3 x0 = v - i + dot(i, C.xxx) ;
		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 );
		vec3 x1 = x0 - i1 + C.xxx;
		vec3 x2 = x0 - i2 + C.yyy;
		vec3 x3 = x0 - D.yyy;
		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));
		float n_ = 0.142857142857;
		vec3 ns = n_ * D.wyz - D.xzx;
		vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
		vec4 x_ = floor(j * ns.z);
		vec4 y_ = floor(j - 7.0 * x_);
		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);
		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;
		vec4 m = max(0.5 - vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);
		m = m * m;
		return 105.0 * dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));
	}

	void main(void){

		//UV座標の計算
		vec2 uv = gl_FragCoord.xy / resolution;

		//vec3(x,y,z) x:横方向の変化量、y:縦方向の変化量、z:時間経過
		vec3 red = vec3(2.5,1.5,time * 0.1);
		vec3 green = vec3(2.0,1.0,time * 0.2);
		vec3 blue = vec3(2.0,2.0,time * 0.5);

		//RGBをシンプレックスノイズで生成
		//シンプレックスノイズの戻り値は-1.0〜1.0
		float r = snoise(vec3(red.x * uv.x,red.y * uv.y,red.z));
		float g = snoise(vec3(green.x * uv.x,green.y * uv.y,green.z));
		float b = snoise(vec3(blue.x * uv.x,blue.y * uv.y,blue.z));

		//RGBの値は（r+1.0）/2.0して0.0〜1.0に調整
		gl_FragColor = vec4((r+1.0)/2.0+0.1,(g+1.0)/2.0+0.1,(b+1.0)/2.0+0.1,1.0);
	}
`;

export { vertexShader, fragmentShader };