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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.