Félix Flores

How to turn off and turn on lights, correctly

Recommended Posts

 

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

Share this post


Link to post
Share on other sites

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 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.