2021年04月03日 - WebVR・Three.js
GLSLでシンプレックスノイズ
「GLSLでノイズ」に続き「WebGLでSimplex NoiseのGLSLを使ってグラフィックパターンを生成する」を参考に、GLSLでシンプレックスノイズを試しました。
GLSLでシンプレックスノイズ
シンプレックスノイズは、ケン・パーリンがパーリンノイズを改良して開発したアルゴリズムです。2次元なら三角形、3次元なら四面体と、ある次元での最小の頂点を持つ立体のことをシンプレックス(単体)といい、シンプレックスを使用することでパーリンノイズよりもパフォーマンスを向上させました。
今回シンプレックスノイズは「webgl-noise」のnoise3D.glslを使用します。ノイズに関しては下記ページが参考になります。
● script.jsの読み込み
script.jsは「WebGLでシェーダ(GLSL)入門」と同じものを使用します。
<script src="js/script.js" type="module"></script>
● glsl.js
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 };
完成したデモになります。GLSLでシンプレックスノイズを試しました。