threejs实现三维虫洞旋涡动画效果代码

代码语言:html

所属分类:三维

代码描述:threejs实现三维虫洞旋涡动画效果代码

代码标签: three 旋涡 虫洞 三维

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>

<style>
body {
  margin: 0;
  padding: 0;
}

#container {
  position: fixed;
  touch-action: none;
}
</style>
</head>
<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/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">
        uniform vec2 u_resolution;
        uniform vec2 u_mouse;
        uniform float u_time;
        uniform sampler2D u_noise;

        #define PI 3.141592653589793
        #define TAU 6.283185307179586

        const int octaves = 2;
        const float seed = 43758.5453123;
        const float seed2 = 73156.8473192;

        // float r1 = 0.1 + ((u_mouse.y + 0.5) * .1);
        // float r2 = 0.4 + (u_mouse.x * .2);
        float r1 = 0.2;
        float r2 = 0.9;

        // These awesome complex Math functions curtesy of
        // https://github.com/mkovacs/reim/blob/master/reim.glsl
        vec2 cCis(float r);
        vec2 cLog(vec2 c); // principal value
        vec2 cInv(vec2 c);
        float cArg(vec2 c);
        float cAbs(vec2 c);

        vec2 cMul(vec2 a, vec2 b);
        vec2 cDiv(vec2 a, vec2 b);

        vec2 cCis(float r)
        {
        return vec2( cos(r), sin(r) );
        }
        vec2 cExp(vec2 c)
        {
        return exp(c.x) * cCis(c.y);
        }
        vec2 cConj(vec2 c)
        {
        return vec2(c.x, -c.y);
        }
        vec2 cInv(vec2 c)
        {
        return cConj(c) / dot(c, c);
        }
        vec2 cLog(vec2 c)
        {
        return vec2( log( cAbs(c) ), cArg(c) );
        }
        float cArg(vec2 c)
        {
        return atan(c.y, c.x);
        }
        float cAbs(vec2 c)
        {
        return length(c);
        }
        vec2 cMul(vec2 a, vec2 b)
        {
        return vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x);
        }
        vec2 cDiv(vec2 a, vec2 b)
        {
        return cMul(a, cInv(b));
        }

        float hash(float p)
        {
        vec2 o = texture2D( u_noise, vec2((p+0.5)/256.0), -100.0 ).xy;
        return o.x;
        }
        vec2 hash(vec2 p)
        {
        vec2 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).xy;
        return o - .5;
        }
        vec3 hash3(vec2 p)
        {
        vec3 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).xyz;
        return o;
        }
        vec4 hash4(vec2 p)
        {
        vec4 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 );
        return o;
        }

        // 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 );
        }

        vec2 hash2(vec2 p)
        {
        vec2 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).xy;
        return o;
        }

        vec3 hsb2rgb( in vec3 c ){
        vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
        6.0)-3.0)-1.0,
        0.0,
        1.0 );
        rgb = rgb*rgb*(3.0-2.0*rgb);
        return c.z * mix( vec3(1.0), rgb, c.y);
        }

        vec3 domain(vec2 z){
        return vec3(hsb2rgb(vec3(atan(z.y,z.x)/TAU,1.,1.)));
        }
        vec3 colour(vec2 z) {
        return domain(z);
        }

        vec2 Droste(vec2 uv) {

        // 5. Take the tiled strips back to ordinary space.
        uv = cLog(uv);
        // 4. Scale and rotate the strips
        float scale = log(r2/r1);
        float angle = atan(scale/(2.0*PI));
        uv = cDiv(uv, cExp(vec2(0,angle))*cos(angle)).........完整代码请登录后点击上方下载按钮下载查看

网友评论0