How to turn off and turn on lights, correctly

[Félix Flores]

 

Hello,
I am developing a 3d page, with babylonjs, I have the scene, that I am modeling and exporting in "blender" to a babylon file. In code I am adding shadows and lights, some of these lights I need turn on an turn off whe the lamp is clicked. I create the lights like this:

	//Luz global
	light[0] = new BABYLON.DirectionalLight("LuzGlobal", new BABYLON.Vector3(0, -1, 1), scene);
	light[0].diffuse = new BABYLON.Color3(1, 1, 1);
	light[0].specular = new BABYLON.Color3(1, 1, 1);
	light[0].direction = new BABYLON.Vector3(0, -1, 1);
	light[0].position.x = 27;
	light[0].position.y = 28;
	light[0].position.z = -89;
	light[0].intensity = 1.0;
	
	//createLensFlare();
 
	//Creamos las luces de las lamparas 
	
	light[1] = new BABYLON.SpotLight("lampara1", scene.getMeshByName("lamp1").position, new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene);
	light[1].diffuse = new BABYLON.Color3(1, 1, 1);
	light[1].specular = new BABYLON.Color3(1, 1, 1);
	
	light[2] = new BABYLON.SpotLight("lampara2", scene.getMeshByName("lamp2").position, new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene);
	light[2].diffuse = new BABYLON.Color3(1, 1, 1);
	light[2].specular = new BABYLON.Color3(1, 1, 1);
	
	light[3] = new BABYLON.SpotLight("lampara3", scene.getMeshByName("lamp3").position, new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene);
	light[3].diffuse = new BABYLON.Color3(1, 1, 1);
	light[3].specular = new BABYLON.Color3(1, 1, 1);
	
	light[4] = new BABYLON.SpotLight("lampara4", scene.getMeshByName("lamp4").position, new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene);
	light[4].diffuse = new BABYLON.Color3(1, 1, 1);
	light[4].specular = new BABYLON.Color3(1, 1, 1);

And I switch the state like this:

	// Apagamos o prendemos la luz de la lampara 1
	scene.getMeshByName("lamaparaCalle1").actionManager = new BABYLON.ActionManager(scene);
	scene.getMeshByName("lamaparaCalle1").actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function (evt) {
		if(light[1].isEnabled() == true){
			light[1].setEnabled(false);
			if(scene.getMeshByName("vlsT1") != null)
				scene.getMeshByName("vlsT1").setEnabled(false);
		}
		else{
			light[1].setEnabled(true);
			if(scene.getMeshByName("vlsT1") != null)
				scene.getMeshByName("vlsT1").setEnabled(true);
		}
	}));
	
	// Apagamos o prendemos la luz de la lampara 2
	scene.getMeshByName("lamaparaCalle2").actionManager = new BABYLON.ActionManager(scene);
	scene.getMeshByName("lamaparaCalle2").actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function (evt) {
		if(light[2].isEnabled() == true){
			light[2].setEnabled(false);
			if(scene.getMeshByName("vlsT2") != null)
				scene.getMeshByName("vlsT2").setEnabled(false);
		}
		else{
			light[2].setEnabled(true);
			if(scene.getMeshByName("vlsT2") != null)
				scene.getMeshByName("vlsT2").setEnabled(true);
		}
	}));
	
		// Apagamos o prendemos la luz de la lampara 3
	scene.getMeshByName("lamaparaCalle3").actionManager = new BABYLON.ActionManager(scene);
	scene.getMeshByName("lamaparaCalle3").actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function (evt) {
		if(light[3].isEnabled() == true){
			light[3].setEnabled(false);
			if(scene.getMeshByName("vlsT3") != null)
				scene.getMeshByName("vlsT3").setEnabled(false);
		}
		else{
			light[3].setEnabled(true);
			if(scene.getMeshByName("vlsT3") != null)
				scene.getMeshByName("vlsT3").setEnabled(true);
		}
	}));
	
		// Apagamos o prendemos la luz de la lampara 4
	scene.getMeshByName("lamaparaCalle4").actionManager = new BABYLON.ActionManager(scene);
	scene.getMeshByName("lamaparaCalle4").actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function (evt) {
		if(light[4].isEnabled() == true){
			light[4].setEnabled(false);
			if(scene.getMeshByName("vlsT4") != null)
				scene.getMeshByName("vlsT4").setEnabled(false);
		}
		else{
			light[4].setEnabled(true);
			if(scene.getMeshByName("vlsT4") != null)
				scene.getMeshByName("vlsT4").setEnabled(true);
		}
	}));

 

But the first time that i turn off the lights the scene is paused and then continue, what is the best way to do that? maybe I am doing something wrong.

the complete source is: https://github.com/flelix/entorno-models.git

the project path is: entorno-models/code/proyBabylon/p2/

thanks and regards

[GameMonetize]

You are doing things great:)

You are seeing a lag because when turning lights off the shaders have to be recompile

Unfortunately in webgl world shaders compilation is done on the main thread.

There is a tool to help you compile shaders beforehand: material.forceCompilation (if I remember correctly)

So the overall idea will be to setup lights, force compilation on materials then update lights and keep going 

[GameMonetize]

Doc: http://doc.babylonjs.com/tutorials/How_materials_work)

[Félix Flores]

Hey thanks for the advice, I will try do that, but the link that you share me doesn't works

[GameMonetize]

Sorry there was a parenthesis at the end

correct link: http://doc.babylonjs.com/resources/how_materials_work