示例

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/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">
    // By Liam Egan
    // 2018
  
    uniform vec2 u_resolution;
    uniform float u_time;
    uniform bool u_coloured;
    uniform float u_coloured_time;
  
    const float PI = 3.14159265359;
    const float TAU = 6.28318530718;
    const int octaves = 5;
    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.1;
  float r2 = 0.4;
  
  // 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));
  }
  
    mat2 rotate2d(float _angle){
        return mat2(cos(_angle),sin(_angle),
                    -sin(_angle),cos(_angle));
    }
  
    vec3 plotCircle(vec2 pos, vec2 uv, float size) {
      return vec3(smoothstep(size, size + 0.02, length(uv - pos)));
    }
  
    float raysSDF(vec2 uv, int N, inout float stepnum) {
      // uv -= .5;
      float step = atan(uv.y, uv.x) / TAU * float(N);
      stepnum = floor(step);
      return fract( step );
    }
  
    vec3 hsv2rgb(vec3 c) {
      vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
      vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
      return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
    }
  
  vec2 Droste(in 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)); 
    // 3. this simulates zooming in the tile
    uv += u_time;
    // 2. Tile the strips
    uv.x = mod(uv.x,log(r2/r1)); 
    // 1. Take the annulus to a strip
    uv = cExp(uv)*r1;
    
    return uv;
  }

    void main() {
      vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / u_resolution.y;
      
      uv = rotate2d(u_time / 100.) * uv;
      
      float positionOnCircle = 0.;
      // float positionOnCircle = .5 + raysSDF(uv, 1);
      
      vec2 _uv = uv;
      // _uv.x += cos(u_time) * .05;
      // _uv.y += sin(u_time) * .05;
      
      uv *= 5.;
    // uv = Droste(uv);
      
      
      int num = 100;
      
      float stepnum = 0.;
      float steps = raysSDF(uv, num, stepnum);
      // float rand = random(stepnum + .5);
      float w = clamp((length(_uv)) * (sin(u_time / 10.) * .30 + 1.5), 0.45, 0.92) - .05;
      float step = smoothstep(w, w + .4, steps) + smoothstep(1. - w, 1. - w - .5, steps);
      // float step = smoothstep(w, w + .5, steps) + smoothstep(.93, .999, steps);
      
      vec3 spot = plotCircle(vec2(0.,0.), uv, .6 + sin(u_time / 10.) * .2);
      spot = 1. - spot;
      
      vec3 colour = vec3(0.);
      
      if(u_coloured) {
        colour = vec3(steps / 5.); // The blades
        colour += vec3(step * 5.); // The spikes
        colour = clamp(colour, 0., 1.); // Clamp it to 0 - 1
        colour -= spot; // The Iris
        colour = clamp(colour, 0., 1.); // Clamp it to 0 - 1
        vec3 col = hsv2rgb(vec3(stepnum / float(num), 1., 1.));
        colour += col * clamp(u_coloured_time / 5., 0., 1.);
        colour -= spot; // The Iris
      } else {
        colour = vec3(steps / 5.); // The blades
        colour += vec3(step * 5.); // The spikes
        
        // colour = clamp(colour, 0., 1.); // Clamp it to 0 - 1
        // float rand = random(stepnum + .5);
        // colour += hsv2rgb(rand, 1., 1.);
        
        colour = clamp(colour, 0., 1.); // Clamp it to 0 - 1
        colour -= spot; // The Iris
      }
      
      gl_FragColor = vec4(colour, 1.);
    }
</script>


<div id="container"></div>

CSS

body {
  margin: 0;
  padding: 0;
}

#container {
  position: fixed;
}

JS

/*
Most of the stuff in here is just bootstrapping. Essentially it's just
setting ThreeJS up so that it renders a flat surface upon which to draw 
the shader. The only thing to see here really is the uniforms sent to 
the shader. Apart from that all of the magic happens in the HTML view
under the fragment shader.
*/

let container;
let camera, scene, renderer;
let uniforms;

function init() {
  container = document.getElementById( 'container' );

  camera = new THREE.Camera();
  camera.position.z = 1;

  scene = new THREE.Scene();

  var geometry = new THREE.PlaneBufferGeometry( 2, 2 );

  uniforms = {
    u_time: { type: "f", value: -10000.0 },
    u_resolution: { type: "v2", value: new THREE.Vector2() },
    u_mouse: { type: "v2", value: new THREE.Vector2() },
    u_coloured: { type: 'b', value: false },
    u_coloured_time: { type: "f", value: 0.0 },
  };

  var material = new THREE.ShaderMaterial( {
    uniforms: uniforms,
    vertexShader: document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent
  } );

  var mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( window.devicePixelRatio );

  container.appendChild( renderer.domElement );

  onWindowResize();
  window.addEventListener( 'resize', onWindowResize, false );
  window.addEventListener( 'click', onClick, false );

  document.onmousemove = function(e){
    uniforms.u_mouse.value.x = e.pageX
    uniforms.u_mouse.value.y = e.pageY
  }
}

function onWindowResize( event ) {
  renderer.setSize( window.innerWidth, window.innerHeight );
  uniforms.u_resolution.value.x = renderer.domElement.width;
  uniforms.u_resolution.value.y = renderer.domElement.height;
}

function onClick( event ) {
  uniforms.u_coloured.value = !uniforms.u_coloured.value;
  uniforms.u_coloured_time.value = 0.0;
}

function animate() {
  requestAnimationFrame( animate );
  render();
}
function render() {
  uniforms.u_time.value += 0.01;
  uniforms.u_coloured_time.value += 0.05;
  renderer.render( scene, camera );
}
init();
animate();