three+react实现三维彩色云海翻滚动画效果代码
代码语言:html
所属分类:动画
代码描述:three+react实现三维彩色云海翻滚动画效果代码
代码标签: three react 三维 彩色 云海 翻滚 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> </head> <body translate="no"> <script type="importmap"> { "imports": { "react": "https://cdn.skypack.dev/react@18.0.2", "react-dom": "https://cdn.skypack.dev/react-dom@18.0.2", "three": "https://cdn.skypack.dev/three@0.148.0", "react-three/fiber": "https://cdn.skypack.dev/@react-three/fiber@7.0.24" } } </script> <style> html, body{ margin: 0; padding: 0; width: 100%; height: 100%; border: 0; } .nt-embed{ width: 1024px; height: 1024px; } .nt-embed canvas{ width: 100%; height: 100%; } </style> <script type="module"> import React, {useRef,useMemo} from 'react'; import ReactDOM from 'react-dom'; import * as THREE from 'three'; import {Canvas, useFrame, useThree} from 'react-three/fiber'; let embedRoot = document.createElement('div'); embedRoot.className = "nt-embed"; document.body.appendChild(embedRoot); const TextureMesh = () => { const mesh = useRef(null) useFrame(state => { const { clock, mouse, gl, scene, camera } = state if(mesh.current){ mesh.current.material.uniforms.u_mouse.value = [mouse.x / 2 + 0.5, mouse.y / 2 + 0.5] mesh.current.material.uniforms.u_time.value = clock.getElapsedTime() let c = gl.domElement.getBoundingClientRect() mesh.current.material.uniforms.u_resolution.value = [c.width,c.height] } }) return React.createElement('mesh', { ref:mesh, position: [0,0,0], scale: 26, rotation: [-0.8,0,0] }, React.createElement('planeGeometry',{args:[1,1,1024,1024]}), React.createElement('shaderMaterial',{ fragmentShader: `// Fragment shader // Uniforms uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; uniform float u_intensity; uniform vec4 u_colors[2]; uniform float u_speed; uniform float u_scale; varying vec2 vUv; varying float vDisplacement; #ifndef FNC_MOD289 #define FNC_MOD289 float mod289(const in float x) { return x - floor(x * (1. / 289.)) * 289.; } vec2 mod289(const in vec2 x) { return x - floor(x * (1. / 289.)) * 289.; } vec3 mod289(const in vec3 x) { return x - floor(x * (1. / 289.)) * 289.; } vec4 mod289(const in vec4 x) { return x - floor(x * (1. / 289.)) * 289.; } #endif #ifndef FNC_PERMUTE #define FNC_PERMUTE float permute(const in float x) { return mod289(((x * 34.0) + 1.0) * x); } vec2 permute(const in vec2 x) { return mod289(((x * 34.0) + 1.0) * x); } vec3 permute(const in vec3 x) { return mod289(((x * 34.0) + 1.0) * x); } vec4 permute(const in vec4 x) { return mod289(((x * 34.0) + 1.0) * x); } #endif #ifndef FNC_TAYLORINVSQRT #define FNC_TAYLORINVSQRT float taylorInvSqrt(in float r) { return 1.79284291400159 - 0.85373472095314 * r; } vec2 taylorInvSqrt(in vec2 r) { return 1.79284291400159 - 0.85373472095314 * r; } vec3 taylorInvSqrt(in vec3 r) { return 1.79284291400159 - 0.85373472095314 * r; } vec4 taylorInvSqrt(in vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; } #endif #ifndef FNC_QUINTIC #define FNC_QUINTIC float quintic(const in float v) { return v*v*v*(v*(v*6.0-15.0)+10.0); } vec2 quintic(const in vec2 v) { return v*v*v*(v*(v*6.0-15.0)+10.0); } vec3 quintic(const in vec3 v) { return v*v*v*(v*(v*6.0-15.0)+10.0); } vec4 quintic(const in vec4 v) { return v*v*v*(v*(v*6.0-15.0)+10.0); } #endif #ifndef FNC_PNOISE #define FNC_PNOISE float pnoise(in vec2 P, in vec2 rep) { vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0); vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0); Pi = mod(Pi, rep.xyxy); Pi = mod289(Pi); vec4 ix = Pi.xzxz; vec4 iy = Pi.yyww; vec4 fx = Pf.xzxz; vec4 fy = Pf.yyww; vec4 i = permute(permute(ix) + iy); vec4 gx = fract(i * (1.0 / 41.0)) * 2.0 - 1.0 ; vec4 gy = abs(gx) - 0.5 ; vec4 tx = floor(gx + 0.5); gx = gx - tx; vec2 g00 = vec2(gx.x,gy.x); vec2 g10 = vec2(gx.y,gy.y); vec2 g01 = vec2(gx.z,gy.z); vec2 g11 = vec2(gx.w,gy.w); vec4 norm = taylorInvSqrt(vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11))); g00 *= norm.x; g01 *= norm.y; g10 *= norm.z; g11 *= norm.w; float n00 = dot(g00, vec2(fx.x, fy.x)); float n10 = dot(g10, vec2(fx.y, fy.y)); float n01 = dot(g01, vec2(fx.z, fy.z)); float n11 = dot(g11, vec2(fx.w, fy.w)); vec2 fade_xy = quintic(Pf.xy); vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x); float n_xy = mix(n_x.x, n_x.y, fade_xy.y); return 2.3 * n_xy; } float pnoise(in vec3 P, in vec3 rep) { vec3 Pi0 = mod(floor(P), rep); vec3 Pi1 = mod(Pi0 + vec3(1.0), rep); Pi0 = mod289(Pi0); Pi1 = mod289(Pi1); vec3 Pf0 = fract(P); vec3 Pf1 = Pf0 - vec3(1.0); vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x); vec4 iy = vec4(Pi0.yy, Pi1.yy); vec4 iz0 = Pi0.zzzz; vec4 iz1 = Pi1.zzzz; vec4 ixy = permute(permute(ix) + iy); vec4 ixy0 = permute(ixy + iz0); vec4 ixy1 = permute(ixy + iz1); vec4 gx0 = ixy0 * (1.0 / 7.0); vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5; gx0 = fract(gx0); vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0); vec4 sz0 = step(gz0, vec4(0.0)); gx0 -= sz0 * (step(0.0, gx0) - 0.5); gy0 -= sz0 * (step(0.0, gy0) - 0.5); vec4 gx1 = ixy1 * (1.0 / 7.0); vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5; gx1 = fract(gx1); vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1); vec4 sz1 = step(gz1, vec4(0.0)); gx1 -= sz1 * (step(0.0, gx1) - 0.5); gy1 -= sz1 * (step(0.0, gy1) - 0.5); vec3 g000 = vec3(gx0.x,gy0.x,gz0.x); vec3 g100 = vec3(gx0.y,gy0.y,gz0.y); vec3 g010 = vec3(gx0.z,gy0.z,gz0.z); vec3 g110 = vec3(gx0.w,gy0.w,gz0.w); vec3 g001 = vec3(gx1.x,gy1.x,gz1.x); vec3 g101 = vec3(gx1.y,gy1.y,gz1.y); vec3 g011 = vec3(gx1.z,gy1.z,gz1.z); vec3 g111 = vec3(gx1.w,gy1.w,gz1.w); vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110))); g000 *= norm0.x; g010 *= norm0.y; g100 *= norm0.z; g110 *= norm0.w; vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111))); g001 *= norm1.x; g011 *= norm1.y; g101 *= norm1.z; g111 *= norm1.w; float n000 = dot(g000, Pf0); float n100 = dot(g100, vec3(Pf1.x, Pf0.yz)); float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z)); float n110 = dot(g110, vec3(Pf1.xy, Pf0.z)); float n001 = dot(g001, vec3(Pf0.xy, Pf1.z)); float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z)); float n011 = dot(g011, vec3(Pf0.x, Pf1.yz)); float n111 = dot(g111, Pf1); vec3 fade_xyz = quintic(Pf0); vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z); vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y); float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); return 2.2 * n_xyz; } float pnoise(in vec4 P, in vec4 rep) { vec4 Pi0 = mod(floor(P), rep); vec4 Pi1 = mod(Pi0 + 1.0, rep); Pi0 = mod289(Pi0); Pi1 = mod289(Pi1); vec4 Pf0 = fract(P); vec4 Pf1 = Pf0 - 1.0; vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x); vec4 iy = vec4(Pi0.yy, Pi1.yy); vec4 iz0 = vec4(Pi0.zzzz); vec4 iz1 = vec4(Pi1.zzzz); vec4 iw0 = vec4(Pi0.wwww); vec4 iw1 = vec4(Pi1.wwww); vec4 ixy = permute(permute(ix) + iy); vec4 ixy0 = permute(ixy + iz0); vec4 ixy1 = permute(ixy + iz1); vec4 ixy00 = permute(ixy0 + iw0); vec4 ixy01 = permute(ixy0 + iw1); vec4 ixy10 = permute(ixy1 + iw0); vec4 ixy11 = permute(ixy1 + iw1); vec4 gx00 = ixy00 * (1.0 / 7.0); vec4 gy00 = floor(gx00) * (1.0 / 7.0); vec4 gz00 = floor(gy00) * (1.0 / 6.0); gx00 = fract(gx00) - 0.5; gy00 = fract(gy00) - 0.5; gz00 = fract(gz00) - 0.5; vec4 gw00 = vec4(0.75) - abs(gx00) - abs(gy00) - abs(gz00); vec4 sw00 = step(gw00, vec4(0.0)); gx00 -= sw00 * (step(0.0, gx00) - 0.5); gy00 -= sw00 * (step(0.0, gy00) - 0.5); vec4 gx01 = ixy01 * (1.0 / 7.0); vec4 gy01 = floor(gx01) * (1.0 / 7.0); vec4 gz01 = floor(gy01) * (1.0 / 6.0); gx01 = fract(gx01) - 0.5; gy01 = fract(gy01) - 0.5; gz01 = fract(gz01) - 0.5; vec4 gw01 = vec4(0.75) - abs(gx01) - abs(gy01) - abs(gz01); vec4 sw01 = step(gw01, vec4(0.0)); gx01 -= sw01 * (step(0.0, gx01) - 0.5); gy01 -= sw01 * (step(0.0, gy01) - 0.5); vec4 gx10 = ixy10 * (1.0 / 7.0); vec4 gy10 = floor(gx10) * (1.0 / 7.0); vec4 gz10 = floor(gy10) * (1.0 / 6.0); gx10 = fract(gx10) - 0.5; gy10 = fract(gy10) - 0.5; gz10 = fract(gz10) - 0.5; vec4 gw10 = vec4(0.75) - abs(gx10) - abs(gy10) - abs(gz10); vec4 sw10 = step(gw10, vec4(0.0)); gx10 -= sw10 * (step(0.0, gx10) - 0.5); gy10 -= sw10 * (step(0.0, gy10) - 0.5); vec4 gx11 = ixy11 * (1.0 / 7.0); vec4 gy11 = floor(gx11) * (1.0 / 7.0); vec4 gz11 = floor(gy11) * (1.0 / 6.0); gx11 = fract(gx11) - 0.5; gy11 = fract(gy11) - 0.5; gz11 = fract(gz11) - 0.5; vec4 gw11 = vec4(0.75) - abs(gx11) - abs(gy11) - abs(gz11); vec4 sw11 = step(gw11, vec4(0.0)); gx11 -= sw11 * (step(0.0, gx11) - 0.5); gy11 -= sw11 * (step(0.0, gy11) - 0.5); vec4 g0000 = vec4(gx00.x,gy00.x,gz00.x,gw00.x); vec4 g1000 = vec4(gx00.y,gy00.y,gz00.y,gw00.y); vec4 g0100 = vec4(gx00.z,gy00.z,gz00.z,gw00.z); vec4 g1100 = vec4(gx00.w,gy00.w,gz00.w,gw00.w); vec4 g0010 = vec4(gx10.x,gy10.x,gz10.x,gw10.x); vec4 g1010 = vec4(gx10.y,gy10.y,gz10.y,gw10.y); vec4 g0110 = vec4(gx10.z,gy10.z,gz10.z,gw10.z); vec4 g1110 = vec4(gx10.w,gy10.w,gz10.w,gw10.w); vec4 g0001 = vec4(gx01.x,gy01.x,gz01.x,gw01.x); vec4 g1001 = vec4(gx01.y,gy01.y,gz01.y,gw01.y); vec4 g0101 = vec4(gx01.z,gy01.z,gz01.z,gw01.z); vec4 g1101 = vec4(gx01.w,gy01.w,gz01.w,gw01.w); vec4 g0011 = vec4(gx11.x,gy11.x,gz11.x,gw11.x); vec4 g1011 = vec4(gx11.y,gy11.y,gz11.y,gw11.y); vec4 g0111 = vec4(gx11.z,gy11.z,gz11.z,gw11.z); vec4 g1111 = vec4(gx11.w,gy11.w,gz11.w,gw11.w); vec4 norm00 = taylorInvSqrt(vec4(dot(g0000, g0000), dot(g0100, g0100), dot(g1000, g1000), dot(g1100, g1100))); g0000 *= norm00.x; g0100 *= norm00.y; g1000 *= norm00.z; g1100 *= norm00.w; vec4 norm01 = taylorInvSqrt(vec4(dot(g0001, g0001), dot(g0101, g0101), dot(g1001, g1001), dot(g1101, g1101))); g0001 *= norm01.x; g0101 *= norm01.y; g1001 *= norm01.z; g1101 *= norm01.w; vec4 norm10 = taylorInvSqrt(vec4(dot(g0010, g0010), dot(g0110, g0110), dot(g1010, g1010), dot(g1110, g1110))); g0010 *= norm10.x; g0110 *= norm10.y; g1010 *= norm10.z; g1110 *= norm10.w; vec4 norm11 = taylorInvSqrt(vec4(dot(g0011, g0011), dot(g0111, g0111), dot(g1011, g1011), dot(g1111, g1111))); g0011 *= norm11.x; g0111 *= norm11.y; g1011 *= norm11.z; g1111 *= norm11.w; float n0000 = dot(g0000, Pf0); float n1000 = dot(g1000, vec4(Pf1.x, Pf0.yzw)); float n0100 = dot(g0100, vec4(Pf0.x, Pf1.y, Pf0.zw)); float n1100 = dot(g1100, vec4(Pf1.xy, Pf0.zw)); float n0010 = dot(g0010, vec4(Pf0.xy, Pf1.z, Pf0.w)); float n1010 = dot(g1010, vec4(Pf1.x, Pf0.y, Pf1.z, Pf0.w)); float n0110 = dot(g0110, vec4(Pf0.x, Pf1.yz, Pf0.w)); float n1110 = dot(g1110, vec4(Pf1.xyz, Pf0.w)); float n0001 = dot(g0001, vec4(Pf0.xyz, Pf1.w)); float n1001 = dot(g1001, vec4(Pf1.x, Pf0.yz, Pf1.w)); float n0101 = dot(g0101, vec4(Pf0.x, Pf1.y, Pf0.z, Pf1.w)); float n1101 = dot(g1101, vec4(Pf1.xy, Pf0.z, Pf1.w)); float n0011 = dot(g0011, vec4(Pf0.xy, Pf1.zw)); float n1011 = dot(g1011, vec4(Pf1.x, Pf0.y, Pf1.zw)); float n0111 = dot(g0111, vec4(Pf0.x, Pf1.yzw)); float n1111 = dot(g1111, Pf1); vec4 fade_xyzw = quintic(Pf0); vec4 n_0w = mix(vec4(n0000, n1000, n0100, n1100), vec4(n0001, n1001, n0101, n1101), fade_xyzw.w); vec4 n_1w = mix(vec4(n0010, n1010, n0110, n1110), vec4(n0011, n1011, n0111, n1111), fade_xyzw.w); vec4 n_zw = mix(n_0w, n_1w, fade_xyzw.z); vec2 n_yzw = mix(n_zw.xy, n_zw.zw, fade_xyzw.y); float n_xyzw = mix(n_yzw.x, n_yzw.y, fade_xyzw.x); return 2.2 * n_xyzw; } #endif #ifndef RANDOM_SCALE #if defined(RANDOM_HIGHER_RANGE) #define RANDOM_SCALE vec4(.1031, .1030, .0973, .1099) #else #define RANDOM_SCALE vec4(443.897, 441.423, .0973, .1099) #endif #endif #ifndef FNC_RANDOM #define FNC_RANDOM float random(in float x) { #if defined(RANDOM_SINLESS) x = fract(x * RANDOM_SCALE.x); x *= x + 33.33; x *= x + x; return fract(x); #else return fract(sin(x) * 43758.5453); #endif } float random(in vec2 st) { #if defined(RANDOM_SINLESS) vec3 p3 = fract(vec3(st.xyx) * RANDOM_SCALE.xyz); p3 += dot(p3, p3.yzx + 33.33); return fract((p3.x + p3.y) * p3.z); #else return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453); #endif } float random(in vec3 pos) { #if defined(RANDOM_SINLESS) pos = fract(pos * RANDOM_SCALE.xyz); pos += dot(pos, pos.zyx + 31.32); return fract((pos.x + pos.y) * pos.z); #else return fract(sin(dot(pos.xyz, vec3(70.9898, 78.233, 32.4355))) * 43758.5453123); #endif } float random(in vec4 pos) { #if defined(RANDOM_SINLESS) pos = fract(pos * RANDOM_SCALE); pos += dot(pos, pos.wzxy+33.33); return fract((pos.x + pos.y) * (pos.z + pos.w)); #else float dot_product = dot(pos, vec4(12.9898,78.233,45.164,94.673)); return fract(sin(dot_product) * 43758.5453); #endif } vec2 random2(float p) { vec3 p3 = fract(vec3(p) * RANDOM_SCALE.xyz); p3 += dot(p3, p3.yzx + 19.19); return fract((p3.xx + p3.yz) * p3.zy); } vec2 random2(vec2 p) { vec3 p3 = fract(p.xyx * RANDOM_SCALE.xyz); p3 += dot(p3, p3.yzx + 19.19); return fract((p3.xx + p3.yz) * p3.zy); } vec2 random2(vec3 p3) { p3 = fract(p3 * RANDOM_SCALE.xyz); p3 += dot(p3, p3.yzx + 19.19); return fract((p3.xx + p3.yz) * p3.zy); } vec3 random3(float p) { vec3 p3 = fract(vec3(p) * RANDOM_SCALE.xyz); p3 += dot(p3, p3.yzx + 19.19); return fract((p3.xxy + p3.yzz) * p3.zyx); } vec3 random3(vec2 p) { vec3 p3 = fract(vec3(p.xyx) * RANDOM_SCALE.xyz); p3 += dot(p3, p3.yxz + 19.19); return fract((p3.xxy + p3.yzz) * p3.zyx); } vec3 random3(vec3 p) { p = fract(p * RANDOM_SCALE.xyz); p += dot(p, p.yxz + 19.19); return fract((p.xxy + p.yzz) * p.zyx); } vec4 random4(float p) { vec4 p4 = fract(p * RANDOM_SCALE); p4 += dot(p4, p4.wzxy + 19.19); return fract((p4.xxyz + p4.yzzw) * p4.zywx); } vec4 random4(vec2 p) { vec4 p4 = fract(p.xyxy * RANDOM_SCALE); p4 += dot(p4, p4.wzxy + 19.19); return fract((p4.xxyz + p4.yzzw) * p4.zywx); } vec4 random4(vec3 p) { vec4 p4 = fract(p.xyzx * RANDOM_SCALE); p4 += dot(p4, p4.wzxy + 19.19); return fract((p4.xxyz + p4.yzzw) * p4.zywx); } vec4 random4(vec4 p4) { p4 = fract(p4 * RANDOM_SCALE); p4 += dot(p4, p4.wzxy + 19.19); return fract((p4.xxyz + p4.yzzw) * p4.zywx); } #endif #ifndef SRGB_EPSILON #define SRGB_EPSILON 0.00000001 #endif #ifndef FNC_SRGB2RGB #define FNC_SRGB2RGB float srgb2rgb(float channel) { return (channel < 0.04045) ? channel * 0.0773993808 : pow((channel + 0.055) * 0.947867298578199, 2.4); } vec3 srgb2rgb(vec3 srgb) { return vec3(srgb2rgb(srgb.r + SRGB_EPSILON), srgb2rgb(srgb.g + SRGB_EPSILON), srgb2rgb(srgb.b + SRGB_EPSILON)); } vec4 srgb2rgb(vec4 srgb) { return vec4(srgb2rgb(srgb.rgb), srgb.a); } #endif #if !defined(FNC_SATURATE) && !defined(saturate) #define FNC_SATURATE #define saturate(x) clamp(x, 0.0, 1.0) #endif #ifndef SRGB_EPSILON #define SRGB_EPSILON 0.00000001 #endif #ifndef FNC_RGB2SRGB #define FNC_RGB2SRGB float rgb2srgb(float channel) { return (channel < 0.0031308) ? channel * 12.92 : 1.055 * pow(channel, 0.4166666666666667) - 0.055; } vec3 rgb2srgb(vec3 rgb) { return saturate(vec3(rgb2srgb(rgb.r - SRGB_EPSILON), rgb2srgb(rgb.g - SRGB_EPSILON), rgb2srgb(rgb.b - SRGB_EPSILON))); } vec4 rgb2srgb(vec4 rgb) { return vec4(rgb2srgb(rgb.rgb), rgb.a); } #endif #ifndef FNC_MIXOKLAB #define FNC_MIXOKLAB vec3 mixOklab( vec3 colA, vec3 colB, float h ) { #ifdef MIXOKLAB_COLORSPACE_SRGB colA = srgb2rgb(colA); colB = srgb2rgb(colB); #endif const mat3 kCONEtoLMS = mat3( 0.4121656120, 0.2118591070, 0.0883097947, 0.5362752080, 0.6807189584, 0.2818474174, 0.0514575653, 0.1074065790, 0.6302613616); const mat3 kLMStoCONE = mat3( 4.0767245293, -1.2681437731, -0.0041119885, -3.3072168827, 2.6093323231, -0.7034763098, 0.2307590544, -0.3411344290, 1.7068625689); vec3 lmsA = pow( kCONEtoLMS * colA, vec3(1.0/3.0) ); vec3 lmsB = pow( kCONEtoLMS * colB, vec3(1.0/3.0) ); vec3 lms = mix( lmsA, lmsB, h ); vec3 rgb = kLMStoCONE*(lms*lms*lms); #ifdef MIXOKLAB_COLORSPACE_SRGB return rgb2srgb(rgb); #else return rgb; #endif } vec4 mixOklab( vec4 colA, vec4 colB, float h ) { return vec4( mixOklab(colA.rgb, colB.rgb, h), mix(colA.a, colB.a, h) ); } #endif void main() { float distort = vDisplacement * u_intensity; vec2 val = abs(vUv - 0.5) * 3.0 * (1.0 - distort); vec4 color = vec4(vec3(val,u_colors[0].b),1.0); color = mixOklab(u_colors[0], u_colors[1], vDisplacement); gl_FragColor = color; } `, vertexShader: `//Geometry: plane //OrbitControls: false //Geometry-args: [1,1, 1024, 1024] //Mesh-scale: 26 //Mesh-rotation: [-0.8,0,0] //camera-position: [0.0, 0.0, 2.0] //camera-fov: 90 //camera-far: 2000 //camera-near: 0.01 uniform float u_intensity; uniform float u_time; uniform float u_speed; uniform bool u_rotate; uniform float u_scale; varying vec2 vUv; varying float vDisplacement; #ifndef FNC_MOD289 #define FNC_MOD289 float mod289(const in float x) { return x - floor(x * (1. / 289.)) * 289.; } vec2 mod289(const in vec2 x) { return x - floor(x * (1. / 289.)) * 289.; } vec3 mod289(const in vec3 x) { return x - floor(x * (1. / 289.)) * 289.; } vec4 mod289(const in vec4 x) { return x - floor(x * (1. / 289.)) * 289.; } #endif #ifndef FNC_PERMUTE #define FNC_PERMUTE float permute(const in float x) { return mod289(((x * 34.0) + 1.0) * x); } vec2 permute(const in vec2 x) { return mod289(((x * 34.0) + 1.0) * x); } vec3 permute(const in vec3 x) { return mod289(((x * 34.0) + 1.0) * x); } vec4 permute(const in vec4 x) { return mod289(((x * 34.0) + 1.0) * x); } #endif #ifndef FNC_TAYLORINVSQRT #define FNC_TAYLORINVSQRT float taylorInvSqrt(in float r) { return 1.79284291400159 - 0.85373472095314 * r; } vec2 taylorInvSqrt(in vec2 r) { return 1.79284291400159 - 0.85373472095314 * r; } vec3 taylorInvSqrt(in vec3 r) { return 1.79284291400159 - 0.85373472095314 * r; } vec4 taylorInvSqrt(in vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; } #endif #ifndef FNC_QUINTIC #define FNC_QUINTIC float quintic(const in float v) { return v*v*v*(v*(v*6.0-15.0)+10.0); } vec2 quintic(const in vec2 v) { return v*v*v*(v*(v*6.0-15.0)+10.0); } vec3 quintic(const in vec3 v) { return v*v*v*(v*(v*6.0-15.0)+10.0); } vec4 quintic(const in vec4 v) { return v*v*v*(v*(v*6.0-15.0)+10.0); } #endif #ifndef FNC_CNOISE #define FNC_CNOISE float cnoise(in vec2 P) { vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0); vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0); Pi = mod289(Pi); vec4 ix = Pi.xzxz; vec4 iy = Pi.yyww; vec4 fx = Pf.xzxz; vec4 fy = Pf.yyww; vec4 i = permute(permute(ix) + iy); vec4 gx = fract(i * (1.0 / 41.0)) * 2.0 - 1.0 ; vec4 gy = abs(gx) - 0.5 ; vec4 tx = floor(gx + 0.5); gx = gx - tx; vec2 g00 = vec2(gx.x,gy.x); vec2 g10 = vec2(gx.y,gy.y); vec2 g01 = vec2(gx.z,gy.z); vec2 g11 = vec2(gx.w,gy.w); vec4 norm = taylorInvSqrt(vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11))); g00 *= norm.x; g01 *= norm.y; g10 *= norm.z; g11 *= norm.w; float n00 = dot(g00, vec2(fx.x, fy.x)); float n10 = dot(g10, vec2(fx.y, fy.y)); float n01 = dot(g01, vec2(fx.z, fy.z)); float n11 = dot(g11, vec2(fx.w, fy.w)); vec2 fade_xy = quintic(Pf.xy); vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x); float n_xy = mix(n_x.x, n_x.y, fade_xy.y); return 2.3 * n_xy; } float cnoise(in vec3 P) { vec3 Pi0 = floor(P); vec3 Pi1 = Pi0 + vec3(1.0); Pi0 = mod289(Pi0); Pi1 = mod289(Pi1); vec3 Pf0 = fract(P); vec3 Pf1 = Pf0 - vec3(1.0); vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x); vec4 iy = vec4(Pi0.yy, Pi1.yy); vec4 iz0 = Pi0.zzzz; vec4 iz1 = Pi1.zzzz; vec4 ixy = permute(permute(ix) + iy); vec4 ixy0 = permute(ixy + iz0); vec4 ixy1 = permute(ixy + iz1); vec4 gx0 = ixy0 * (1.0 / 7.0); vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5; gx0 = fract(gx0); vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0); vec4 sz0 = step(gz0, vec4(0.0)); gx0 -= sz0 * (step(0.0, gx0) - 0.5); gy0 -= sz0 * (step(0.0, gy0) - 0.5); vec4 gx1 = ixy1 * (1.0 / 7.0); vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5; gx1 = fract(gx1); vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1); vec4 sz1 = step(gz1, vec4(0.0)); gx1 -= sz1 * (step(0.0, gx1) - 0.5); gy1 -= sz1 * (step(0.0, gy1) - 0.5); vec3 g000 = vec3(gx0.x,gy0.x,gz0.x); vec3 g100 = vec3(gx0.y,gy0.y,gz0.y); vec3 g010 = vec3(gx0.z,gy0.z,gz0.z); vec3 g110 = vec3(gx0.w,gy0.w,gz0.w); vec3 g001 = vec3(gx1.x,gy1.x,gz1.x); vec3 g101 = vec3(gx1.y,gy1.y,gz1.y); vec3 g011 = vec3(gx1.z,gy1.z,gz1.z); vec3 g111 = vec3(gx1.w,gy1.w,gz1.w); vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110))); g000 *= norm0.x; g010 *= norm0.y; g100 *= norm0.z; g110 *= norm0.w; vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111))); g001 *= norm1.x; g011 *= norm1.y; g101 *= norm1.z; g111 *= norm1.w; float n000 = dot(g000, Pf0); float n100 = dot(g100, vec3(Pf1.x, Pf0.yz)); float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z)); float n110 = dot(g110, vec3(Pf1.xy, Pf0.z)); float n001 = dot(g001, vec3(Pf0.xy, Pf1.z)); float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z)); float n011 = dot(g011, vec3(Pf0.x, Pf1.yz)); float n111 = dot(g111, Pf1); vec3 fade_xyz = quintic(Pf0); vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z); vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y); float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); return 2.2 * n_xyz; } float cnoise(in vec4 P) { vec4 Pi0 = floor(P); vec4 Pi1 = Pi0 + 1.0; Pi0 = mod289(Pi0); Pi1 = mod289(Pi1); vec4 Pf0 = fract(P); vec4 Pf1 = Pf0 - 1.0; vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x); vec4 iy = vec4(Pi0.yy, Pi1.yy); vec4 iz0 = vec4(Pi0.zzzz); vec4 iz1 = vec4(Pi1.zzzz); vec4 iw0 = vec4(Pi0.wwww); vec4 iw1 = vec4(Pi1.wwww); vec4 ixy = permute(permute(ix) + iy); vec4 ixy0 = permute(ixy + iz0); vec4 ixy1 = permute(ixy + iz1); vec4 ixy00 = permute(ixy0 + iw0); vec4 ixy01 = permute(ixy0 + iw1); vec4 ixy10 = permute(ixy1 + iw0); vec4 ixy11 = permute(ixy1 + iw1); vec4 gx00 = ixy00 * (1.0 / 7.0); vec4 gy00 = floor(gx00) * (1.0 / 7.0); vec4 gz00 = floor(gy00) * (1.0 / 6.0); gx00 = fract(gx00) - 0.5; gy00 = fract(gy00) - 0.5; gz00 = fract(gz00) - 0.5; vec4 gw00 = vec4(0.75) - abs(gx00) - abs(gy00) - abs(gz00); vec4 sw00 = step(gw00, vec4(0.0)); gx00 -= sw00 * (step(0.0, gx00) - 0.5); gy00 -= sw00 * (step(0.0, gy00) - 0.5); vec4 gx01 = ixy01 * (1.0 / 7.0); vec4 gy01 = floor(gx01) * (1.0 / 7.0); vec4 gz01 = floor(gy01) * (1.0 / 6.0); gx01 = fract(gx01) - 0.5; gy01 = fract(gy01) - 0.5; gz01 = fract(gz01) - 0.5; vec4 gw01 = vec4(0.75) - abs(gx01) - abs(gy01) - abs(gz01); vec4 sw01 = step(gw01, vec4(0.0)); gx01 -= sw01 * (step(0.0, gx01) - 0.5); gy01 -= sw01 * (step(0.0, gy01) - 0.5); vec4 gx10 = ixy10 * (1.0 / 7.0); vec4 gy10 = floor(gx10) * (1.0 / 7.0); vec4 gz10 = floor(gy10) * (1.0 / 6.0); gx10 = fract(gx10) - 0.5; gy10 = fract(gy10) - 0.5; gz10 = fract(gz10) - 0.5; vec4 gw10 = vec4(0.75) - abs(gx10) - abs(gy10) - abs(gz10); vec4 sw10 = step(gw10, vec4(0.0)); gx10 -= sw10 * (step(0.0, gx10) - 0.5); gy10 -= sw10 * (step(0.0, gy10) - 0.5); vec4 gx11 = ixy11 * (1.0 / 7.0); vec4 gy11 = floor(gx11) * (1.0 / 7.0); vec4 gz11 = floor(gy11) * (1.0 / 6.0); gx11 = fract(gx11) - 0.5; gy11 = fract(gy11) - 0.5; gz11 = fract(gz11) - 0.5; vec4 gw11 = vec4(0.75) - abs(gx11) - abs(gy11) - abs(gz11); vec4 sw11 = step(gw11, vec4(0.0)); gx11 -= sw11 * (step(0.0, gx11) - 0.5); gy11 -= sw11 * (step(0.0, gy11) - 0.5); vec4 g0000 = vec4(gx00.x,gy00.x,gz00.x,gw00.x); vec4 g1000 = vec4(gx00.y,gy00.y,gz00.y,gw00.y); vec4 g0100 = vec4(gx00.z,gy00.z,gz00.z,gw00.z); vec4 g1100 = vec4(gx00.w,gy00.w,gz00.w,gw00.w); vec4 g0010 = vec4(gx10.x,gy10.x,gz10.x,gw10.x); vec4 g1010 = vec4(gx10.y,gy10.y,gz10.y,gw10.y); vec4 g0110 = vec4(gx10.z,gy10.z,gz10.z,gw10.z); vec4 g1110 = vec4(gx10.w,gy10.w,gz10.w,gw10.w); vec4 g0001 = vec4(gx01.x,gy01.x,gz01.x,gw01.x); vec4 g1001 = vec4(gx01.y,gy01.y,gz01.y,gw01.y); vec4 g0101 = vec4(gx01.z,gy01.z,gz01.z,gw01.z); vec4 g1101 = vec4(gx01.w,gy01.w,gz01.w,gw01.w); vec4 g0011 = vec4(gx11.x,gy11.x,gz11.x,gw11.x); vec4 g1011 = vec4(gx11.y,gy11.y,gz11.y,gw11.y); vec4 g0111 = vec4(gx11.z,gy11.z,gz11.z,gw11.z); vec4 g1111 = vec4(gx11.w,gy11.w,gz11.w,gw11.w); vec4 norm00 = taylorInvSqrt(vec4(dot(g0000, g0000), dot(g0100, g0100), dot(g1000, g1000), dot(g1100, g1100))); g0000 *= norm00.x; g0100 *= norm00.y; g1000 *= norm00.z; g1100 *= norm00.w; vec4 norm01 = taylorInvSqrt(vec4(dot(g0001, g0001), dot(g0101, g0101), dot(g1001, g1001), dot(g1101, g1101))); g0001 *= norm01.x; g0101 *= norm01.y; g1001 *= norm01.z; g1101 *= norm01.w; vec4 norm10 = taylorInvSqrt(vec4(dot(g0010, g0010), dot(g0110, g0110), dot(g1010, g1010), dot(g1110, g1110))); g0010 *= norm10.x; g0110 *= norm10.y; g1010 *= norm10.z; g1110 *= norm10.w; vec4 norm11 = taylorInvSqrt(vec4(dot(g0011, g0011), dot(g0111, g0111), dot(g1011, g1011), dot(g1111, g1111))); g0011 *= norm11.x; g0111 *= norm11.y; g1011 *= norm11.z; g1111 *= norm11.w; float n0000 = dot(g0000, Pf0); float n1000 = dot(g1000, vec4(Pf1.x, Pf0.yzw)); float n0100 = dot(g0100, vec4(Pf0.x, Pf1.y, Pf0.zw)); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0