Whitespace cleanup in manual mipmaps example.

See #2681

build/three.js

@@ -10813,6 +10813,7 @@ THREE.Texture = function ( image, mapping, wrapS, wrapT, magFilter, minFilter, f
 	this.name = '';
 
 	this.image = image;
+	this.mipmaps = null;
 
 	this.mapping = mapping !== undefined ? mapping : new THREE.UVMapping();
 
@@ -10848,6 +10849,7 @@ THREE.Texture.prototype = {
 		var texture = new THREE.Texture();
 
 		texture.image = this.image;
+		texture.mipmaps = this.mipmaps;
 
 		texture.mapping = this.mapping;
 
@@ -22273,7 +22275,28 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			} else {
 
-				_gl.texImage2D( _gl.TEXTURE_2D, 0, glFormat, glFormat, glType, texture.image );
+				var mipmap, mipmaps = texture.mipmaps;
+
+				if ( mipmaps && isImagePowerOfTwo ) {
+
+					// pre generated mipmaped regular texture
+
+					for ( var i = 0, il = mipmaps.length; i < il; i ++ ) {
+
+						mipmap = mipmaps[ i ];
+						_gl.texImage2D(_gl.TEXTURE_2D, i, glFormat, glFormat, glType, mipmap );
+
+					}
+
+					texture.generateMipmaps = false;
+
+				} else {
+
+					// regular texture
+
+					_gl.texImage2D( _gl.TEXTURE_2D, 0, glFormat, glFormat, glType, texture.image );
+
+				}
 
 			}
 

examples/webgl_materials_texture_manualmipmap.html

@@ -60,7 +60,7 @@
 		mag: <span class="c">Nearest</span><br/>
 		min: <span class="c">Nearest</span>
 		</div>
-        
+
 		<script src="../build/three.min.js"></script>
 
 		<script src="js/Detector.js"></script>
@@ -68,213 +68,215 @@
 
 		<script>
 
-		    if (!Detector.webgl) Detector.addGetWebGLMessage();
+			if ( !Detector.webgl ) Detector.addGetWebGLMessage();
 
-		    var SCREEN_WIDTH = window.innerWidth;
-		    var SCREEN_HEIGHT = window.innerHeight;
+			var SCREEN_WIDTH = window.innerWidth;
+			var SCREEN_HEIGHT = window.innerHeight;
 
-		    var container, stats;
+			var container, stats;
 
-		    var camera, scene, scene2, renderer;
+			var camera, scene, scene2, renderer;
 
-		    var mouseX = 0, mouseY = 0;
+			var mouseX = 0, mouseY = 0;
 
-		    var windowHalfX = window.innerWidth / 2;
-		    var windowHalfY = window.innerHeight / 2;
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
 
-		    init();
-		    animate();
+			init();
+			animate();
 
 
-		    function init() {
+			function init() {
 
-		        container = document.createElement('div');
-		        document.body.appendChild(container);
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
 
-		        camera = new THREE.PerspectiveCamera(35, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 5000);
-		        camera.position.z = 1500;
+				camera = new THREE.PerspectiveCamera( 35, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 5000 );
+				camera.position.z = 1500;
 
-		        scene = new THREE.Scene();
-		        scene.fog = new THREE.Fog(0x000000, 1500, 4000);
+				scene = new THREE.Scene();
+				scene.fog = new THREE.Fog( 0x000000, 1500, 4000 );
 
-		        scene2 = new THREE.Scene();
-		        scene2.fog = scene.fog;
+				scene2 = new THREE.Scene();
+				scene2.fog = scene.fog;
 
-		        // GROUND
+				// GROUND
 
-		        function mipmap(size, color) {
-		            var imageCanvas = document.createElement("canvas"),
-                        context = imageCanvas.getContext("2d");
+				function mipmap( size, color ) {
 
-		            imageCanvas.width = imageCanvas.height = size;
+					var imageCanvas = document.createElement( "canvas" ),
+						context = imageCanvas.getContext( "2d" );
 
-		            context.fillStyle = "#444";
-		            context.fillRect(0, 0, size, size);
+					imageCanvas.width = imageCanvas.height = size;
 
-		            context.fillStyle = color;
-		            context.fillRect(0, 0, size / 2, size / 2);
-		            context.fillRect(size / 2, size / 2, size / 2, size / 2);
-		            return imageCanvas;
-		        }
-		        var canvas = mipmap(128, '#f00');
-		        var textureCanvas = new THREE.Texture(canvas, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping);
-		        textureCanvas.mipmaps = [];
-		        textureCanvas.mipmaps[0] = canvas;
-		        textureCanvas.mipmaps[1] = mipmap(64, '#0f0');
-		        textureCanvas.mipmaps[2] = mipmap(32, '#00f');
-		        textureCanvas.mipmaps[3] = mipmap(16, '#400');
-		        textureCanvas.mipmaps[4] = mipmap(8, '#040');
-		        textureCanvas.mipmaps[5] = mipmap(4, '#004');
-		        textureCanvas.mipmaps[6] = mipmap(2, '#044');
-		        textureCanvas.mipmaps[7] = mipmap(1, '#404');
+					context.fillStyle = "#444";
+					context.fillRect( 0, 0, size, size );
 
-		        materialCanvas = new THREE.MeshBasicMaterial({ map: textureCanvas });
+					context.fillStyle = color;
+					context.fillRect( 0, 0, size / 2, size / 2 );
+					context.fillRect( size / 2, size / 2, size / 2, size / 2 );
+					return imageCanvas;
 
-		        textureCanvas.needsUpdate = true;
-		        textureCanvas.repeat.set(1000, 1000);
+				}
 
-		        canvas = mipmap(128, '#f00');
-		        var textureCanvas2 = new THREE.Texture(canvas, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping, THREE.NearestFilter, THREE.NearestMipMapNearestFilter);
-		        textureCanvas2.mipmaps = [];
-		        textureCanvas2.mipmaps[0] = canvas;
-		        textureCanvas2.mipmaps[1] = mipmap(64, '#0f0');
-		        textureCanvas2.mipmaps[2] = mipmap(32, '#00f');
-		        textureCanvas2.mipmaps[3] = mipmap(16, '#400');
-		        textureCanvas2.mipmaps[4] = mipmap(8, '#040');
-		        textureCanvas2.mipmaps[5] = mipmap(4, '#004');
-		        textureCanvas2.mipmaps[6] = mipmap(2, '#044');
-		        textureCanvas2.mipmaps[7] = mipmap(1, '#404');
-		        materialCanvas2 = new THREE.MeshBasicMaterial({ color: 0xffccaa, map: textureCanvas2 });
+				var canvas = mipmap( 128, '#f00' );
+				var textureCanvas = new THREE.Texture( canvas, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping );
+				textureCanvas.mipmaps = [];
+				textureCanvas.mipmaps[ 0 ] = canvas;
+				textureCanvas.mipmaps[ 1 ] = mipmap( 64, '#0f0' );
+				textureCanvas.mipmaps[ 2 ] = mipmap( 32, '#00f' );
+				textureCanvas.mipmaps[ 3 ] = mipmap( 16, '#400' );
+				textureCanvas.mipmaps[ 4 ] = mipmap( 8,  '#040' );
+				textureCanvas.mipmaps[ 5 ] = mipmap( 4,  '#004' );
+				textureCanvas.mipmaps[ 6 ] = mipmap( 2,  '#044' );
+				textureCanvas.mipmaps[ 7 ] = mipmap( 1,  '#404' );
 
-		        textureCanvas2.needsUpdate = true;
-		        textureCanvas2.repeat.set(1000, 1000);
+				materialCanvas = new THREE.MeshBasicMaterial( { map: textureCanvas } );
 
-		        var geometry = new THREE.PlaneGeometry(100, 100);
+				textureCanvas.needsUpdate = true;
+				textureCanvas.repeat.set( 1000, 1000 );
 
-		        var meshCanvas = new THREE.Mesh(geometry, materialCanvas);
-		        meshCanvas.rotation.x = -Math.PI / 2;
-		        meshCanvas.scale.set(1000, 1000, 1000);
+				canvas = mipmap( 128, '#f00' );
+				var textureCanvas2 = new THREE.Texture( canvas, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping, THREE.NearestFilter, THREE.NearestMipMapNearestFilter );
+				textureCanvas2.mipmaps = [];
+				textureCanvas2.mipmaps[ 0 ] = canvas;
+				textureCanvas2.mipmaps[ 1 ] = mipmap( 64, '#0f0' );
+				textureCanvas2.mipmaps[ 2 ] = mipmap( 32, '#00f' );
+				textureCanvas2.mipmaps[ 3 ] = mipmap( 16, '#400' );
+				textureCanvas2.mipmaps[ 4 ] = mipmap( 8,  '#040' );
+				textureCanvas2.mipmaps[ 5 ] = mipmap( 4,  '#004' );
+				textureCanvas2.mipmaps[ 6 ] = mipmap( 2,  '#044' );
+				textureCanvas2.mipmaps[ 7 ] = mipmap( 1,  '#404' );
+				materialCanvas2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: textureCanvas2 } );
 
-		        var meshCanvas2 = new THREE.Mesh(geometry, materialCanvas2);
-		        meshCanvas2.rotation.x = -Math.PI / 2;
-		        meshCanvas2.scale.set(1000, 1000, 1000);
+				textureCanvas2.needsUpdate = true;
+				textureCanvas2.repeat.set( 1000, 1000 );
 
+				var geometry = new THREE.PlaneGeometry( 100, 100 );
 
-		        // PAINTING
+				var meshCanvas = new THREE.Mesh( geometry, materialCanvas );
+				meshCanvas.rotation.x = -Math.PI / 2;
+				meshCanvas.scale.set(1000, 1000, 1000);
 
-		        var callbackPainting = function () {
+				var meshCanvas2 = new THREE.Mesh( geometry, materialCanvas2 );
+				meshCanvas2.rotation.x = -Math.PI / 2;
+				meshCanvas2.scale.set( 1000, 1000, 1000 );
 
-		            var image = texturePainting.image;
 
-		            texturePainting2.image = image;
-		            texturePainting2.needsUpdate = true;
+				// PAINTING
 
-		            scene.add(meshCanvas);
-		            scene2.add(meshCanvas2);
+				var callbackPainting = function () {
 
-		            var geometry = new THREE.PlaneGeometry(100, 100);
-		            var mesh = new THREE.Mesh(geometry, materialPainting);
-		            var mesh2 = new THREE.Mesh(geometry, materialPainting2);
+					var image = texturePainting.image;
 
-		            addPainting(scene, mesh);
-		            addPainting(scene2, mesh2);
+					texturePainting2.image = image;
+					texturePainting2.needsUpdate = true;
 
-		            function addPainting(zscene, zmesh) {
+					scene.add( meshCanvas );
+					scene2.add( meshCanvas2 );
 
-		                zmesh.scale.x = image.width / 100;
-		                zmesh.scale.y = image.height / 100;
+					var geometry = new THREE.PlaneGeometry( 100, 100 );
+					var mesh = new THREE.Mesh( geometry, materialPainting );
+					var mesh2 = new THREE.Mesh( geometry, materialPainting2 );
 
-		                zscene.add(zmesh);
+					addPainting( scene, mesh );
+					addPainting( scene2, mesh2 );
 
-		                var meshFrame = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0x000000, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 5 }));
-		                meshFrame.scale.x = 1.1 * image.width / 100;
-		                meshFrame.scale.y = 1.1 * image.height / 100;
+					function addPainting( zscene, zmesh ) {
 
-		                zscene.add(meshFrame);
+						zmesh.scale.x = image.width / 100;
+						zmesh.scale.y = image.height / 100;
 
-		                var meshShadow = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0x000000, opacity: 0.75, transparent: true }));
-		                meshShadow.position.y = -1.1 * image.height / 2;
-		                meshShadow.position.z = -1.1 * image.height / 2;
-		                meshShadow.rotation.x = -Math.PI / 2;
-		                meshShadow.scale.x = 1.1 * image.width / 100;
-		                meshShadow.scale.y = 1.1 * image.height / 100;
-		                zscene.add(meshShadow);
+						zscene.add( zmesh );
 
-		                var floorHeight = -1.117 * image.height / 2;
-		                meshCanvas.position.y = meshCanvas2.position.y = floorHeight;
+						var meshFrame = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 5 } ) );
+						meshFrame.scale.x = 1.1 * image.width / 100;
+						meshFrame.scale.y = 1.1 * image.height / 100;
 
-		            }
+						zscene.add( meshFrame );
 
+						var meshShadow = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.75, transparent: true } ) );
+						meshShadow.position.y = -1.1 * image.height / 2;
+						meshShadow.position.z = -1.1 * image.height / 2;
+						meshShadow.rotation.x = -Math.PI / 2;
+						meshShadow.scale.x = 1.1 * image.width / 100;
+						meshShadow.scale.y = 1.1 * image.height / 100;
+						zscene.add( meshShadow );
 
-		        };
+						var floorHeight = -1.117 * image.height / 2;
+						meshCanvas.position.y = meshCanvas2.position.y = floorHeight;
 
-		        var texturePainting = THREE.ImageUtils.loadTexture("textures/758px-Canestra_di_frutta_(Caravaggio).jpg", THREE.UVMapping, callbackPainting),
-					texturePainting2 = new THREE.Texture(),
-					materialPainting = new THREE.MeshBasicMaterial({ color: 0xffffff, map: texturePainting }),
-					materialPainting2 = new THREE.MeshBasicMaterial({ color: 0xffccaa, map: texturePainting2 });
+					}
 
-		        texturePainting2.minFilter = texturePainting2.magFilter = THREE.NearestFilter;
-		        texturePainting.minFilter = texturePainting.magFilter = THREE.LinearFilter;
 
+				};
 
-		        renderer = new THREE.WebGLRenderer({ antialias: true });
-		        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
-		        renderer.setClearColor(scene.fog.color, 1);
-		        renderer.autoClear = false;
+				var texturePainting = THREE.ImageUtils.loadTexture( "textures/758px-Canestra_di_frutta_(Caravaggio).jpg", THREE.UVMapping, callbackPainting ),
+					texturePainting2 = new THREE.Texture(),
+					materialPainting = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting } ),
+					materialPainting2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: texturePainting2 } );
 
-		        renderer.domElement.style.position = "relative";
-		        container.appendChild(renderer.domElement);
+				texturePainting2.minFilter = texturePainting2.magFilter = THREE.NearestFilter;
+				texturePainting.minFilter = texturePainting.magFilter = THREE.LinearFilter;
 
-		        stats = new Stats();
-		        stats.domElement.style.position = 'absolute';
-		        stats.domElement.style.top = '0px';
-		        stats.domElement.style.zIndex = 100;
-		        //container.appendChild( stats.domElement );
 
-		        document.addEventListener('mousemove', onDocumentMouseMove, false);
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setClearColor( scene.fog.color, 1 );
+				renderer.autoClear = false;
 
-		    }
+				renderer.domElement.style.position = "relative";
+				container.appendChild( renderer.domElement );
 
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				stats.domElement.style.zIndex = 100;
+				//container.appendChild( stats.domElement );
 
-		    function onDocumentMouseMove(event) {
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-		        mouseX = (event.clientX - windowHalfX);
-		        mouseY = (event.clientY - windowHalfY);
+			}
 
-		    }
 
+			function onDocumentMouseMove( event ) {
 
-		    function animate() {
+				mouseX = ( event.clientX - windowHalfX );
+				mouseY = ( event.clientY - windowHalfY );
 
-		        requestAnimationFrame(animate);
+			}
 
-		        render();
-		        stats.update();
 
-		    }
+			function animate() {
 
-		    function render() {
+				requestAnimationFrame( animate );
 
-		        camera.position.x += (mouseX - camera.position.x) * .05;
-		        camera.position.y += (-(mouseY - 200) - camera.position.y) * .05;
+				render();
+				stats.update();
 
-		        camera.lookAt(scene.position);
+			}
+
+			function render() {
 
-		        renderer.enableScissorTest(false);
-		        renderer.clear();
-		        renderer.enableScissorTest(true);
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
+				camera.position.y += ( -( mouseY - 200 ) - camera.position.y ) * .05;
 
-		        //renderer.setViewport( 0, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT );
-		        renderer.setScissor(0, 0, SCREEN_WIDTH / 2 - 2, SCREEN_HEIGHT);
-		        renderer.render(scene, camera);
+				camera.lookAt( scene.position );
 
+				renderer.enableScissorTest( false );
+				renderer.clear();
+				renderer.enableScissorTest( true );
 
-		        //renderer.setViewport( SCREEN_WIDTH/2, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT );
-		        renderer.setScissor(SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2 - 2, SCREEN_HEIGHT);
-		        renderer.render(scene2, camera);
+				//renderer.setViewport( 0, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT );
+				renderer.setScissor( 0, 0, SCREEN_WIDTH / 2 - 2, SCREEN_HEIGHT );
+				renderer.render( scene, camera );
 
 
-		    }
+				//renderer.setViewport( SCREEN_WIDTH/2, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT );
+				renderer.setScissor( SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2 - 2, SCREEN_HEIGHT );
+				renderer.render( scene2, camera );
+
+			}
 
 		</script>
 

src/renderers/WebGLRenderer.js

@@ -6648,18 +6648,26 @@ THREE.WebGLRenderer = function ( parameters ) {
 			} else {
 
 				var mipmap, mipmaps = texture.mipmaps;
-				if (mipmaps && isImagePowerOfTwo) {
+
+				if ( mipmaps && isImagePowerOfTwo ) {
+
 					// pre generated mipmaped regular texture
-					for (var i = 0, il = mipmaps.length; i < il; i++) {
-						mipmap = mipmaps[i];
-						_gl.texImage2D(_gl.TEXTURE_2D, i, glFormat, glFormat, glType, mipmap);
+
+					for ( var i = 0, il = mipmaps.length; i < il; i ++ ) {
+
+						mipmap = mipmaps[ i ];
+						_gl.texImage2D(_gl.TEXTURE_2D, i, glFormat, glFormat, glType, mipmap );
+
 					}
+
 					texture.generateMipmaps = false;
-				}
-				else
-				{
+
+				} else {
+
 					// regular texture
+
 					_gl.texImage2D( _gl.TEXTURE_2D, 0, glFormat, glFormat, glType, texture.image );
+
 				}
 
 			}