[Three.js]shader_ripple_color_mod()

index.html

      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>

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

      <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">
      //参考　https://tympanus.net/Development/ScrollSpiral/


         	#define TWO_PI 6.2831853072
    	#define PI 3.14159265359

    	precision highp float;
    	uniform vec2 resolution;
    	uniform float time;

    	void main(void) {
    	vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y);
    	float t = time*0.05;
		float lineWidth = 0.002;

		vec3 color = vec3(0.0);
    for(int j = 0; j < 3; j++){
      for(int i=0; i < 5; i++){
        color[j] += lineWidth*float(i*i) / abs(fract(t - 0.01*float(j)+float(i)*0.01)*5.0 - length(uv) + mod(uv.x+uv.y, 0.2));
        
        
      }

    }

		
		    
			
        gl_FragColor = vec4(color[0],color[1],color[2],1.0);
    	}
</script>

script.js

      var container;
          var camera, scene, renderer;
          var uniforms;

          init();
          animate();

          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 = {
                  time: { type: "f", value: 1.0 },
                  resolution: { type: "v2", value: new THREE.Vector2() }
              };

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

          }

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

          function animate() {
              requestAnimationFrame( animate );
              render();
          }

          function render() {
              uniforms.time.value += 0.05;
              renderer.render( scene, camera );
          }

style.css

      *{
          padding: 0;
          margin: 0;
      }

three-js-shader_ripple_color_mod.markdown

[Three.js]shader_ripple_color_mod()

A Pen by masuwa on CodePen.

License.