moxuse/gist:10b684943a87938c2afc

## gistfile1.txt
<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Ayu-Texture-Test</title>
  <script src="http://threejs.org/build/three.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
</head>

<script type="x-shader/x-vertex" id="vs">
  varying vec2 vUv;

  uniform int division;
  uniform vec3 mod_position;
  uniform float time;

  vec2 div;

  void main()
  {
    vUv = uv;
    vec3 mod = vec3(position.x + (mod_position.x * sin(time * 0.0125)), position.y + (mod_position.y * sin(time * 0.0125)), mod_position.z);
    vec4 mvPosition = modelViewMatrix * vec4(mod, 1.0);
    gl_Position = projectionMatrix * mvPosition;
  }
</script>

<script type="x-shader/x-fragment" id="fs">
  uniform sampler2D texture;
  varying vec2 vUv;

  void main()
  {
    gl_FragColor = texture2D(texture, vUv);
  }

</script>

<body>
  <div id="canvas">
  <script>

    $(document).ready(function() {
      var width  = 1200;
      var height = 800;

      var division = 64;
      var plane_size = 10;

      var timeCount = 0;

      var meshes = [];

      var camera = new THREE.PerspectiveCamera(40, width / height, 0.00001, 10000);
      camera.position.z = 2500;

      var scene = new THREE.Scene();

      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height);

      var texloader = new THREE.TextureLoader();
      texloader.load("./images/texture.jpg", function(tex) {

        var tex_ = tex;

        function makeMesh (index_i, index_j) {
          var material = new THREE.ShaderMaterial({
            fragmentShader: $('#fs').text(),
            vertexShader  : $('#vs').text(),
            blending: THREE.NormalBlending,
            //overdraw: true,
            depthTest: false,
            transparent: true,
            //attributes: {},
            uniforms: {
              texture: {type: 't', value: tex_},
              division: {type: 'i', value: division},
              mod_position: {type: 'v3', value: new THREE.Vector3(Math.random() * 1000.0 - 500.0, Math.random() * 1000.0 - 500.0, 0)},
              time: {type: 'f', value: timeCount},
            }

          });

          var geometry = new THREE.PlaneGeometry(plane_size, plane_size);

          var sect_ = 1.0 / division;
          var face_verts = [
            new THREE.Vector2(sect_ * index_i, sect_ * index_j + sect_),
            new THREE.Vector2(sect_ * index_i, sect_ * index_j),
            new THREE.Vector2(sect_ * index_i + sect_, sect_ * index_j),
            new THREE.Vector2(sect_ * index_i + sect_, sect_ * index_j + sect_),
          ];

          geometry.faceVertexUvs[0] = [];

          geometry.faceVertexUvs[0].push([
            face_verts[0],
            face_verts[1],
            face_verts[3]
          ]);
          geometry.faceVertexUvs[0].push([
            face_verts[1],
            face_verts[2],
            face_verts[3]
          ]);
          geometry.uvsNeedUpdate = true;

          var mesh_ = new THREE.Mesh(geometry, material);
          return mesh_;
        }

        for (var i = 0; i < division; i++) {
          for (var j = 0; j < division; j++) {
            var mesh = makeMesh(i, j);
            mesh.position.x = i * plane_size ;
            mesh.position.y = j * plane_size ;
            mesh.position.z = 0;
            scene.add(mesh);
            meshes.push(mesh);
          }
        }
      });

      renderer.render(scene, camera);
      $('#canvas')[0].appendChild(renderer.domElement);

      function animate() {
        window.requestAnimationFrame(function() {animate();});

        for (var i = 0; i < meshes.length; i++) {
          meshes[i].material.uniforms.time.value = timeCount;
        }

        timeCount++;
        render();
      }

      function render() {
        renderer.render(scene, camera);
      }

      animate();
    });

  </script>
</body>
</html>
	<!doctype html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>Ayu-Texture-Test</title>
	<script src="http://threejs.org/build/three.min.js"></script>
	<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
	</head>

	<script type="x-shader/x-vertex" id="vs">
	varying vec2 vUv;

	uniform int division;
	uniform vec3 mod_position;
	uniform float time;

	vec2 div;

	void main()
	{
	vUv = uv;
	vec3 mod = vec3(position.x + (mod_position.x * sin(time * 0.0125)), position.y + (mod_position.y * sin(time * 0.0125)), mod_position.z);
	vec4 mvPosition = modelViewMatrix * vec4(mod, 1.0);
	gl_Position = projectionMatrix * mvPosition;
	}
	</script>

	<script type="x-shader/x-fragment" id="fs">
	uniform sampler2D texture;
	varying vec2 vUv;

	void main()
	{
	gl_FragColor = texture2D(texture, vUv);
	}

	</script>

	<body>
	<div id="canvas">
	<script>

	$(document).ready(function() {
	var width = 1200;
	var height = 800;

	var division = 64;
	var plane_size = 10;

	var timeCount = 0;

	var meshes = [];

	var camera = new THREE.PerspectiveCamera(40, width / height, 0.00001, 10000);
	camera.position.z = 2500;

	var scene = new THREE.Scene();

	var renderer = new THREE.WebGLRenderer();
	renderer.setSize(width, height);

	var texloader = new THREE.TextureLoader();
	texloader.load("./images/texture.jpg", function(tex) {

	var tex_ = tex;

	function makeMesh (index_i, index_j) {
	var material = new THREE.ShaderMaterial({
	fragmentShader: $('#fs').text(),
	vertexShader : $('#vs').text(),
	blending: THREE.NormalBlending,
	//overdraw: true,
	depthTest: false,
	transparent: true,
	//attributes: {},
	uniforms: {
	texture: {type: 't', value: tex_},
	division: {type: 'i', value: division},
	mod_position: {type: 'v3', value: new THREE.Vector3(Math.random() * 1000.0 - 500.0, Math.random() * 1000.0 - 500.0, 0)},
	time: {type: 'f', value: timeCount},
	}

	});

	var geometry = new THREE.PlaneGeometry(plane_size, plane_size);

	var sect_ = 1.0 / division;
	var face_verts = [
	new THREE.Vector2(sect_ * index_i, sect_ * index_j + sect_),
	new THREE.Vector2(sect_ * index_i, sect_ * index_j),
	new THREE.Vector2(sect_ * index_i + sect_, sect_ * index_j),
	new THREE.Vector2(sect_ * index_i + sect_, sect_ * index_j + sect_),
	];

	geometry.faceVertexUvs[0] = [];

	geometry.faceVertexUvs[0].push([
	face_verts[0],
	face_verts[1],
	face_verts[3]
	]);
	geometry.faceVertexUvs[0].push([
	face_verts[1],
	face_verts[2],
	face_verts[3]
	]);
	geometry.uvsNeedUpdate = true;

	var mesh_ = new THREE.Mesh(geometry, material);
	return mesh_;
	}

	for (var i = 0; i < division; i++) {
	for (var j = 0; j < division; j++) {
	var mesh = makeMesh(i, j);
	mesh.position.x = i * plane_size ;
	mesh.position.y = j * plane_size ;
	mesh.position.z = 0;
	scene.add(mesh);
	meshes.push(mesh);
	}
	}
	});

	renderer.render(scene, camera);
	$('#canvas')[0].appendChild(renderer.domElement);

	function animate() {
	window.requestAnimationFrame(function() {animate();});

	for (var i = 0; i < meshes.length; i++) {
	meshes[i].material.uniforms.time.value = timeCount;
	}

	timeCount++;
	render();
	}

	function render() {
	renderer.render(scene, camera);
	}

	animate();
	});

	</script>
	</body>
	</html>