Cleanups: fix memory leak, update only on changes

Removed stats and animation loop, since scene needs update only on input. Fixed mesh memory leak.

Cleanups: fix memory leak, update only on changes
Removed stats and animation loop, since scene needs update only on input. Fixed mesh memory leak.
18637d25 · Eric Haines · afe6df1b · 18637d25
隐藏空白更改
内联并排

Showing with 45 addition and 55 deletion

examples/webgl_buffergeometry_teapot.html examples/webgl_buffergeometry_teapot.html +45 -55

未找到文件。
--- a/examples/webgl_buffergeometry_teapot.html
+++ b/examples/webgl_buffergeometry_teapot.html
@@ -28,9 +28,6 @@

 			a { color: blue; }

-			#stats #fps { background: transparent !important }
-			#stats #fps #fpsText { color: #444 !important }
-			#stats #fps #fpsGraph { display: none }
 		</style>
 	</head>
 	<body>
@@ -43,7 +40,6 @@
 		<script src="js/controls/OrbitControls.js"></script>

 		<script src="js/Detector.js"></script>
-		<script src="js/libs/stats.min.js"></script>

 		<script src='js/libs/dat.gui.min.js'></script>

@@ -54,14 +50,13 @@
 			////////////////////////////////////////////////////////////////////////////////
 			// Utah/Newell Teapot demo
 			////////////////////////////////////////////////////////////////////////////////
-			/*global THREE, requestAnimationFrame, Detector, container, Stats, dat, window */
+			/*global THREE, Detector, container, dat, window */

 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

-			var camera, scene, sceneCube, renderer, stats;
+			var camera, scene, sceneCube, renderer;
 			var cameraControls;
 			var effectController;
-			var clock = new THREE.Clock();
 			var teapotSize = 400;
 			var ambientLight, light;
 			var skybox;
@@ -75,12 +70,14 @@
 			var shading;
 			var wireMaterial, flatMaterial, gouraudMaterial, phongMaterial, texturedMaterial, reflectiveMaterial;

+			var teapot, teapotMesh;
+
 			// allocate these just once
 			var diffuseColor = new THREE.Color();
 			var specularColor = new THREE.Color();

 			init();
-			animate();
+			render();

 			function init() {

@@ -108,18 +105,13 @@
 				renderer.gammaOutput = true;
 				container.appendChild( renderer.domElement );

-				// STATS
-				stats = new Stats();
-				stats.domElement.style.position = 'absolute';
-				stats.domElement.style.top = '0px';
-				container.appendChild( stats.domElement );
-
 				// EVENTS
 				window.addEventListener( 'resize', onWindowResize, false );

 				// CONTROLS
 				cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
 				cameraControls.target.set( 0, 0, 0 );
+				cameraControls.addEventListener( 'change', render );

 				// TEXTURE MAP
 				var textureMap = THREE.ImageUtils.loadTexture( 'textures/UV_Grid_Sm.jpg' );
@@ -187,6 +179,8 @@
 				camera.aspect = canvasWidth / canvasHeight;
 				camera.updateProjectionMatrix();

+				render();
+
 			}

 			function setupGui() {
@@ -229,66 +223,54 @@

 				h = gui.addFolder( "Material control" );

-				h.add( effectController, "shininess", 1.0, 400.0, 1.0 ).name( "shininess" );
-				h.add( effectController, "kd", 0.0, 1.0, 0.025 ).name( "diffuse strength" );
-				h.add( effectController, "ks", 0.0, 1.0, 0.025 ).name( "specular strength" );
-				h.add( effectController, "metallic" );
+				h.add( effectController, "shininess", 1.0, 400.0, 1.0 ).name( "shininess" ).onChange( render );
+				h.add( effectController, "kd", 0.0, 1.0, 0.025 ).name( "diffuse strength" ).onChange( render );
+				h.add( effectController, "ks", 0.0, 1.0, 0.025 ).name( "specular strength" ).onChange( render );
+				h.add( effectController, "metallic" ).onChange( render );

 				// material (color)

 				h = gui.addFolder( "Material color" );

-				h.add( effectController, "hue", 0.0, 1.0, 0.025 ).name( "hue" );
-				h.add( effectController, "saturation", 0.0, 1.0, 0.025 ).name( "saturation" );
-				h.add( effectController, "lightness", 0.0, 1.0, 0.025 ).name( "lightness" );
+				h.add( effectController, "hue", 0.0, 1.0, 0.025 ).name( "hue" ).onChange( render );
+				h.add( effectController, "saturation", 0.0, 1.0, 0.025 ).name( "saturation" ).onChange( render );
+				h.add( effectController, "lightness", 0.0, 1.0, 0.025 ).name( "lightness" ).onChange( render );

 				// light (point)

 				h = gui.addFolder( "Lighting" );

-				h.add( effectController, "lhue", 0.0, 1.0, 0.025 ).name( "hue" );
-				h.add( effectController, "lsaturation", 0.0, 1.0, 0.025 ).name( "saturation" );
-				h.add( effectController, "llightness", 0.0, 1.0, 0.025 ).name( "lightness" );
-				h.add( effectController, "ka", 0.0, 1.0, 0.025 ).name( "ambient" );
+				h.add( effectController, "lhue", 0.0, 1.0, 0.025 ).name( "hue" ).onChange( render );
+				h.add( effectController, "lsaturation", 0.0, 1.0, 0.025 ).name( "saturation" ).onChange( render );
+				h.add( effectController, "llightness", 0.0, 1.0, 0.025 ).name( "lightness" ).onChange( render );
+				h.add( effectController, "ka", 0.0, 1.0, 0.025 ).name( "ambient" ).onChange( render );

 				// light (directional)

 				h = gui.addFolder( "Light direction" );

-				h.add( effectController, "lx", -1.0, 1.0, 0.025 ).name( "x" );
-				h.add( effectController, "ly", -1.0, 1.0, 0.025 ).name( "y" );
-				h.add( effectController, "lz", -1.0, 1.0, 0.025 ).name( "z" );
+				h.add( effectController, "lx", -1.0, 1.0, 0.025 ).name( "x" ).onChange( render );
+				h.add( effectController, "ly", -1.0, 1.0, 0.025 ).name( "y" ).onChange( render );
+				h.add( effectController, "lz", -1.0, 1.0, 0.025 ).name( "z" ).onChange( render );

 				h = gui.addFolder( "Tessellation control" );
-				h.add( effectController, "newTess", [ 2, 3, 4, 5, 6, 8, 10, 15, 20, 30, 40, 50 ] ).name( "Tessellation Level" );
-				h.add( effectController, "lid" ).name( "display lid" );
-				h.add( effectController, "body" ).name( "display body" );
-				h.add( effectController, "bottom" ).name( "display bottom" );
-				h.add( effectController, "fitLid" ).name( "snug lid" );
-				h.add( effectController, "nonblinn" ).name( "original scale" );
+				h.add( effectController, "newTess", [ 2, 3, 4, 5, 6, 8, 10, 15, 20, 30, 40, 50 ] ).name( "Tessellation Level" ).onChange( render );
+				h.add( effectController, "lid" ).name( "display lid" ).onChange( render );
+				h.add( effectController, "body" ).name( "display body" ).onChange( render );
+				h.add( effectController, "bottom" ).name( "display bottom" ).onChange( render );
+				h.add( effectController, "fitLid" ).name( "snug lid" ).onChange( render );
+				h.add( effectController, "nonblinn" ).name( "original scale" ).onChange( render );

 				// shading
-				h = gui.add( effectController, "newShading", [ "wireframe", "flat", "smooth", "glossy", "textured", "reflective" ] ).name( "Shading" );
+				h = gui.add( effectController, "newShading", [ "wireframe", "flat", "smooth", "glossy", "textured", "reflective" ] ).name( "Shading" ).onChange( render );

 			}


 			//

-			function animate() {
-
-				requestAnimationFrame( animate );
-				render();
-				stats.update();
-
-			}
-
 			function render() {

-				var delta = clock.getDelta();
-
-				cameraControls.update( delta );
-
 				if ( effectController.newTess !== tess ||
 					effectController.bottom !== bBottom ||
 					effectController.lid !== bLid ||
@@ -376,15 +358,23 @@

 				scene.add( ambientLight );
 				scene.add( light );
+				
+				if ( teapotMesh !== undefined ) {
+
+					teapotMesh.dispose();
+					
+				}
+
+				teapotMesh = new THREE.TeapotBufferGeometry( teapotSize,
+					tess,
+					effectController.bottom,
+					effectController.lid,
+					effectController.body,
+					effectController.fitLid,
+					! effectController.nonblinn );

-				var teapot = new THREE.Mesh(
-					new THREE.TeapotBufferGeometry( teapotSize,
-							tess,
-							effectController.bottom,
-							effectController.lid,
-							effectController.body,
-							effectController.fitLid,
-							! effectController.nonblinn ),
+				teapot = new THREE.Mesh(
+					teapotMesh,
 					shading === "wireframe" ? wireMaterial : (
 					shading === "flat" ? flatMaterial : (
 					shading === "smooth" ? gouraudMaterial : (