Optimize webGL models reload. Handle WEBGL Context Lost

assets/www/huds/index.html

@@ -91,6 +91,8 @@ This three.js demo is part of a collection at
 	var gui, parameters;
 	var axis_x = new THREE.Vector3(1,0,0);
 	var axis_z = new THREE.Vector3(0,0,1);
+
+	var textureEarth, textureSun, textureSun2, textureSun3, textureSun4;
 	//-----------------------------------------------------------------------------------------------------------------------
 	//			SCENE PARAMS (Hard-coded parameters)
 	//-----------------------------------------------------------------------------------------------------------------------

assets/www/huds/index_orbit.html

@@ -470,6 +470,16 @@ function initScene(){
 	renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 	container = document.getElementById( 'ThreeJS' );
 	container.appendChild( renderer.domElement );
+	renderer.context.canvas.addEventListener("webglcontextlost", function(event) {
+	    event.preventDefault();
+	    // animationID would have been set by your call to requestAnimationFrame
+	    cancelAnimationFrame(); 
+	}, false);
+
+	renderer.context.canvas.addEventListener("webglcontextrestored", function(event) {
+	   // Do something 
+		alert("WebGL Context Lost");
+	}, false);
 	
 	// EVENTS
 	//THREEx.WindowResize(renderer, camera);

assets/www/huds/init.js

@@ -11,6 +11,26 @@ function init()
 	//***********************************************************************************************************************
 	//setLoadingProgress(35);
 	setLoadingProgress(5);
+
+	//-----------------------------------------------------------------------------------------------------------------------
+	//			SKY
+	//-----------------------------------------------------------------------------------------------------------------------
+	
+	if(show_sky){
+		// create the geometry sphere
+		var sky_geometry  = new THREE.SphereGeometry(1000, 32, 32);
+		// create the material, using a texture of startfield
+		var sky_material  = new THREE.MeshBasicMaterial();
+		sky_material.map   = THREE.ImageUtils.loadTexture('textures/sky/stars.jpg');
+		sky_material.map.wrapS = sky_material.map.wrapT = THREE.RepeatWrapping;
+		sky_material.map.repeat.set( 8, 8 ); 
+		sky_material.side  = THREE.BackSide;
+		// create the mesh based on geometry and material
+		var sky_mesh  = new THREE.Mesh(sky_geometry, sky_material);
+		sky_mesh.name = "SKY";
+		scene.add(sky_mesh);
+	}
+
 	initReference();
 	//***********************************************************************************************************************
 	//		DYNAMIC ELEMENTS

assets/www/huds/interface.js

@@ -31,13 +31,17 @@ function updateFPS(){
 function reloadModel(){
 	var l = scene.children.length;
 	setLoadingProgress(20);
+	getInitialization();
 	//remove everything
 	while (l--) {
 		if(scene.children[l] instanceof THREE.Camera) continue; //leave camera in the scene
 		if(scene.children[l] instanceof THREE.PointLight) continue; //leave light in the scene
+		if(scene.children[l].name == "SKY"){ 
+			scene.children[l].visible = show_sky;
+			continue; //leave sky
+		}
 		scene.remove(scene.children[l]);
 	}
-	getInitialization();
 	if(performance_level<=2)
 		canvasMode(performance_level);
 	else

assets/www/huds/modules/earth.js

@@ -5,7 +5,11 @@ function initEarth(){
 	if(show_earth){
 		var earth_geometry = new THREE.SphereGeometry( earth_radius, earth_seg, earth_seg ) ;
 		if(show_earth_texture){	 
-			var earth_material = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/earth/Land_ocean_ice_cloud_2048.jpg' ), overdraw: true } )
+			if(typeof textureEarth === 'undefined'){
+			   // your code here.
+				textureEarth= new THREE.ImageUtils.loadTexture( 'textures/earth/Land_ocean_ice_cloud_2048.jpg' );
+			};
+			var earth_material = new THREE.MeshBasicMaterial( { map: textureEarth, overdraw: true } )
 		}else{
 			if(!canvas_mode)
 				var earth_material = new THREE.MeshPhongMaterial( { color: earth_solid_color, metal: true } );

assets/www/huds/modules/reference.js

 function initReference() {
-	//-----------------------------------------------------------------------------------------------------------------------
-	//			SKY
-	//-----------------------------------------------------------------------------------------------------------------------
-	
-	if(show_sky){
-		// create the geometry sphere
-		var sky_geometry  = new THREE.SphereGeometry(1000, 32, 32);
-		// create the material, using a texture of startfield
-		var sky_material  = new THREE.MeshBasicMaterial();
-		sky_material.map   = THREE.ImageUtils.loadTexture('textures/sky/stars.jpg');
-		sky_material.map.wrapS = sky_material.map.wrapT = THREE.RepeatWrapping;
-		sky_material.map.repeat.set( 8, 8 ); 
-		sky_material.side  = THREE.BackSide;
-		// create the mesh based on geometry and material
-		var sky_mesh  = new THREE.Mesh(sky_geometry, sky_material);
-		scene.add(sky_mesh);
-	}
+
 	
 	//-----------------------------------------------------------------------------------------------------------------------
 	//			REFERENCE SPHERE

assets/www/huds/modules/scene.js

@@ -24,6 +24,16 @@ function initScene(){
 	renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 	container = document.getElementById( 'ThreeJS' );
 	container.appendChild( renderer.domElement );
+	renderer.context.canvas.addEventListener("webglcontextlost", function(event) {
+	    event.preventDefault();
+	    // animationID would have been set by your call to requestAnimationFrame
+	    cancelAnimationFrame(); 
+	}, false);
+
+	renderer.context.canvas.addEventListener("webglcontextrestored", function(event) {
+	   // Do something 
+		alert("WebGL Context Lost");
+	}, false);
 	
 	// EVENTS
 	//THREEx.WindowResize(renderer, camera);

assets/www/huds/modules/sun.js

@@ -4,20 +4,32 @@ function initSun(){
 	//-----------------------------------------------------------------------------------------------------------------------
 	if(show_sun){
 		if(show_sun_texture){
+			if(typeof textureSun === 'undefined'){
+			   // your code here.
+				textureSun= new THREE.ImageUtils.loadTexture( 'textures/lava/lava.jpg' );
+			};
+			if(typeof textureSun2 === 'undefined'){
+			   // your code here.
+				textureSun2= new THREE.ImageUtils.loadTexture( 'textures/lava/cloud.png' );
+			};
+			if(typeof textureSun3 === 'undefined'){
+			   // your code here.
+				textureSun3= new THREE.ImageUtils.loadTexture( 'textures/lava/lava.jpg' );
+			};
 			// base image texture for mesh
-			var lavaTexture = new THREE.ImageUtils.loadTexture( 'textures/lava/lava.jpg');
+			var lavaTexture = textureSun;
 			lavaTexture.wrapS = lavaTexture.wrapT = THREE.RepeatWrapping; 
 			// multiplier for distortion speed 		
 			var baseSpeed = 0.02;
 			// number of times to repeat texture in each direction
 			var repeatS = repeatT = 2.0;
 			// texture used to generate "randomness", distort all other textures
-			var noiseTexture = new THREE.ImageUtils.loadTexture( 'textures/lava/cloud.png' );
+			var noiseTexture = textureSun2;
 			noiseTexture.wrapS = noiseTexture.wrapT = THREE.RepeatWrapping; 
 			// magnitude of noise effect
 			var noiseScale = 0.5;
 			// texture to additively blend with base image texture
-			var blendTexture = new THREE.ImageUtils.loadTexture( 'textures/lava/lava.jpg' );
+			var blendTexture = textureSun3;
 			blendTexture.wrapS = blendTexture.wrapT = THREE.RepeatWrapping; 
 			// multiplier for distortion speed 
 			var blendSpeed = 0.08;
@@ -95,9 +107,13 @@ function initSun(){
 		}else{
 			// SUPER SIMPLE GLOW EFFECT
 			// use sprite because it appears the same from all angles
+			if(typeof textureSun4 === 'undefined'){
+			   // your code here.
+				textureSun4= new THREE.ImageUtils.loadTexture( 'textures/lava/glow.png' );
+			};
 			var spriteMaterial = new THREE.SpriteMaterial( 
 			{ 
-				map: new THREE.ImageUtils.loadTexture( 'textures/lava/glow.png' ), 
+				map: textureSun4, 
 				useScreenCoordinates: false,// alignment: THREE.SpriteAlignment.center,
 				color: 0xf79216, transparent: false, blending: THREE.AdditiveBlending
 			});