taka75 · November 17, 2014 23:22
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>test float texture</title>
    <meta charset="UTF-8">
    <script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>
  </head>
  <body style="margin:0; overflow:hidden;">
    <script>
      var renderer = new THREE.WebGLRenderer({ antialias:true, alpha:false });
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setClearColor(0xccccff, 1);
      document.body.appendChild(renderer.domElement);
      
      var scene = new THREE.Scene();
      
      var camera = new THREE.PerspectiveCamera(15, 1.0 * window.innerWidth / window.innerHeight);
      camera.position.z = 8;
      camera.lookAt(new THREE.Vector3(0, 0, 0));
      
      // var texture = THREE.ImageUtils.loadTexture('images/earth_map_flat_2048_w.png');
      // var texture = THREE.ImageUtils.generateDataTexture(32, 32, new THREE.Color(0xff0000));
      var textureWidth = 2055;
      var textureHeight = 1027;
      var size = textureWidth * textureHeight;
      // var dataColor = new Uint8Array( size * 3 );
      // for (var i = 0; i < size; i ++) {
      //     dataColor[ i * 3 ]     = 0;
      //     dataColor[ i * 3 + 1 ] = 0;
      //     dataColor[ i * 3 + 2 ] = i % 256;
      // }
      var dataColor = new Float32Array( size * 2 );
      for (var i = 0; i < size; i ++) {
          dataColor[ i * 2 ]     = 1.0;
          dataColor[ i * 2 + 1 ] = (i % 256) / 255.0;
      }
      var texture = new THREE.DataTexture(dataColor, textureWidth, textureHeight, THREE.LuminanceAlphaFormat, THREE.FloatType);
      texture.needsUpdate = true;
      
      var geometry = new THREE.PlaneGeometry(1, 1);
      var material = new THREE.MeshBasicMaterial({
        map: texture,
        transparent: true
      });
      var mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
            
      function render() {
        requestAnimationFrame(render);
        
        renderer.render(scene, camera);
      };
      render();

    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>test float texture</title>
	<meta charset="UTF-8">
	<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>
	</head>
	<body style="margin:0; overflow:hidden;">
	<script>
	var renderer = new THREE.WebGLRenderer({ antialias:true, alpha:false });
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.setClearColor(0xccccff, 1);
	document.body.appendChild(renderer.domElement);

	var scene = new THREE.Scene();

	var camera = new THREE.PerspectiveCamera(15, 1.0 * window.innerWidth / window.innerHeight);
	camera.position.z = 8;
	camera.lookAt(new THREE.Vector3(0, 0, 0));

	// var texture = THREE.ImageUtils.loadTexture('images/earth_map_flat_2048_w.png');
	// var texture = THREE.ImageUtils.generateDataTexture(32, 32, new THREE.Color(0xff0000));
	var textureWidth = 2055;
	var textureHeight = 1027;
	var size = textureWidth * textureHeight;
	// var dataColor = new Uint8Array( size * 3 );
	// for (var i = 0; i < size; i ++) {
	// dataColor[ i * 3 ] = 0;
	// dataColor[ i * 3 + 1 ] = 0;
	// dataColor[ i * 3 + 2 ] = i % 256;
	// }
	var dataColor = new Float32Array( size * 2 );
	for (var i = 0; i < size; i ++) {
	dataColor[ i * 2 ] = 1.0;
	dataColor[ i * 2 + 1 ] = (i % 256) / 255.0;
	}
	var texture = new THREE.DataTexture(dataColor, textureWidth, textureHeight, THREE.LuminanceAlphaFormat, THREE.FloatType);
	texture.needsUpdate = true;

	var geometry = new THREE.PlaneGeometry(1, 1);
	var material = new THREE.MeshBasicMaterial({
	map: texture,
	transparent: true
	});
	var mesh = new THREE.Mesh(geometry, material);
	scene.add(mesh);

	function render() {
	requestAnimationFrame(render);

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

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