Added progress reporting to scene loader.

examples/scene_test.html

@@ -44,13 +44,26 @@
 				padding:0.1em 0.3em;
 				width:3em;
 				text-align: center;
-				/*
-				font-size:0.8em;
+				display:none;
+			}
+			
+			.shadow {
 				-moz-box-shadow: 0px 0px 5px #000;
 				-webkit-box-shadow: 0px 0px 5px #000;
 				box-shadow: 0px 0px 5px #000;
-				*/
-				display:none;
+			}
+			
+			#progressbar {
+				text-align: center;
+				background: white;
+				width: 250px;
+				height: 10px;
+			}
+			
+			#bar {
+				background:#d00;
+				width:50px;
+				height:10px;
 			}
 			
 			.enabled {
@@ -80,7 +93,11 @@
 
 		<div id="progress">
 			<span id="message">Loading ...</span>
-			<center><div id="start" class="disabled">Start</div></center>
+			
+			<center>
+				<div id="progressbar" class="shadow"><div id="bar" class="shadow"></div></div>
+				<div id="start" class="disabled">Start</div>
+			</center>
 		</div>
 		
 		<pre id="log"></pre>
@@ -133,6 +150,16 @@
 
 				setInterval( loop, 1000/60 );
 
+				var callback_progress = function( progress ) {
+				
+					var bar = 250;
+					if ( progress.total_models + progress.total_textures ) 
+						bar = Math.floor( 250 * ( progress.loaded_models + progress.loaded_textures ) / ( progress.total_models + progress.total_textures ) );
+					
+					$( "bar" ).style.width = bar + "px";
+					
+				}
+				
 				var callback_sync = function( result ) {
 				
 					/*
@@ -162,13 +189,14 @@
 					mat_veyron[ 5 ][ 0 ] = result.materials[ "chrome" ];
 					
 					$( "message" ).style.display = "none";
+					$( "progressbar" ).style.display = "none";
 					$( "start" ).style.display = "block";
 					$( "start" ).className = "enabled";
 					
 				}
 				
 				$( "progress" ).style.display = "block";
-				SceneUtils.loadScene( "scenes/test_scene.js", callback_sync, callback_async );
+				SceneUtils.loadScene( "scenes/test_scene.js", callback_sync, callback_async, callback_progress );
 
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';

src/extras/SceneUtils.js

@@ -1,6 +1,6 @@
 var SceneUtils = {
 	
-	loadScene : function( url, callback_sync, callback_async ) {
+	loadScene : function( url, callback_sync, callback_async, callback_progress ) {
 
 		var worker = new Worker( url );
 		worker.postMessage( 0 );
@@ -14,6 +14,7 @@ var SceneUtils = {
 				materials,
 				data, loader, 
 				counter_models, counter_textures,
+				total_models, total_textures,
 				result;
 
 			data = event.data;
@@ -100,6 +101,17 @@ var SceneUtils = {
 			
 			function async_callback_gate() {
 				
+				var progress = {
+					
+					total_models: total_models,
+					total_textures: total_textures,
+					loaded_models: total_models - counter_models,
+					loaded_textures: total_textures - counter_textures
+					
+				};
+				
+				callback_progress( progress );
+				
 				if( counter_models == 0 && counter_textures == 0 ) {
 					
 					callback_async( result );
@@ -124,6 +136,8 @@ var SceneUtils = {
 				
 			}
 			
+			total_models = counter_models;
+			
 			for( dg in data.geometries ) {
 				
 				g = data.geometries[ dg ];
@@ -194,6 +208,8 @@ var SceneUtils = {
 				
 			}
 			
+			total_textures = counter_textures;
+			
 			var callback_texture = function( images ) {
 				
 				counter_textures -= 1;