Lens Flare hide by a Mesh

[Uohcnam]

Hi ! It's the first time i post and i actually develop an application for a website. For this application i use Babylon.js. But i've got a problem.

i don't know how to hide a Lens Effect behind a Mesh ... I follow the document in checking Collision to true ... but it doesn't work! Somoene have any idea?! Thanks a lot!

[Dad72]

Hello and welcome,

did you try to add a renderingGroupId on your mesh. This works as a z-index in html

 

 

[Uohcnam]

Hi !

Thanks for your advice !! No i don't try to add this, i didn't know its existence ^^ i look at on the documentation, but ... how it's work???

In the LensFlare tutorial, it write :

Quote

 

Babylon.js can also detect occlusions for you. A mesh can occlude the lens flares if the following conditions are met:

• has a material
• isVisible === true
• isEnabled() === true
• checkCollisions === true

 

So, my mesh have a meterial, it's visible, it's enable and it check collision ... but nothing happen!

 

 

(je peux parler en français aussi ...)

 

[julien-moreau]

An easy method shoud be to test if you can see the mesh by using a ray starting from the camera position

// Something like that, 99.99999% sure that copy/past will not work, adapt it to your scene
var ray = BABYLON.Ray.CreateNewFromTo(camera.position, notVisibleBillboard.getAbsolutePosition());
var rayResult = scene.pickWithRay(ray, null, false);

if (rayResult.pickedMesh === notVisibleBillboard) {
	lensFlareSystem.stopDraw();
}

the "notVisibleBillboard" can be a plane, rendered as a billboard on XYZ and at the same position of the lens flare system. (please check if picking rays can test the not visible meshes before testing)

This method works, in lack of precision but can be a solution. The perfect solution should be to have the support of occlusion queries (I asked myself to implement it or not in Babylon.js as a present for deltakosh, but have to check if it is supported on enough platforms including mobiles)

[julien-moreau]

What is the link to the documentation you quoted ?

[Uohcnam]

Thanks luaacro for your response.

So i try to write something like that:

 

var sphere2 = new BABYLON.Mesh.CreateSphere('sphere2', 3, 0.01, scene);

sphere2.checkCollisions = true;
sphere2.isPickable = true;
sphere2.isVisible = true;
sphere2.material = material;
sphere2.position = light.position;
sphere2.wireframe = true;

var getFlareVisible = function(){
	var ray = BABYLON.Ray.CreateNewFromTo(camera.position, sphere2.position);
	var pickInfo = scene.pickWithRay(ray, function(mesh){return mesh == sphere2;});
	if(pickInfo.hit) { return pickInfo.pickedMesh; }
	return null;
}
		
if(getFlareVisible !== sphere2)
{
	//scene.lensFlaresEnabled = false;
	lensFlareSystem.isEnabled = false;
}

but ... when i run the application, the LensFlare doen't appeard...

The link to the documentation : http://doc.babylonjs.com/tutorials/How_to_use_Lens_Flares

[Uohcnam]

No body? I've tried some other way ... but it's doen't work

I write this :

engine.runRenderLoop(function(){
	scene.render();
	var ray = BABYLON.Ray.CreateNewFromTo(scene.activeCamera.position, scene.meshes[1].getAbsolutePosition());
	var rayResult = scene.pickWithRay(ray, null, false);
	if(rayResult.hit)
	{
		alert(rayResult.pickedMesh.name + ' : ' + scene.meshes[1].name);
	}
});

It's just to analyse how the code work. scene.meshes[1] is a mesh called 'VolumetricLightScatteringMesh'.

and in the alert, rayResult.pickedMesh.name display 'sphere2' and scene.meshed[1].name display 'VolumetricLightScatteringMesh' ... the problem ... rayResult.pickedMesh return a not visible mesh in the Field of view of the camera ... so i think the ray don't care the camera's field of view. But when i replace :

if(rayResult.hit)
{
	alert(rayResult.pickedMesh.name + ' : ' + scene.meshes[1].name);
}

BY :

if(!rayResult.hit)
{
	scene.lensFlaresEnabled = false;
			
}

it happened nothing when the 'VolumetricLightScatteringMesh' is hide by an another mesh !

[GameMonetize]

Hello, can you provide a repro on the playground? This is the fastest way to get help

[Uohcnam]

Hi !!

Yes of course, over here : http://www.babylonjs-playground.com/#MUBSS#6

[Uohcnam]

Excuse me for the double post.

I sucess something. when the light is hidden by a mesh, but when the light is visible again, the invers don't work!

http://playground.babylonjs.com/#1ADXVQ#0

[julien-moreau]

I get an error in the second playground: Error while trying to load texture: /wordpress/wp-content/themes/cantoshyperion/images/lens3.png .

Also, at line 66, you should access the .mesh property of godrays to setup your properties, like:

godrays.mesh.collisionsEnabled = true;
godrays.mesh.checkCollisions = true,
godrays.mesh.checkCollisions = true;
godrays.mesh.isPickable = true;

 

[Uohcnam]

yes, that's normal, i copy/past my code, so image can't be loaded.

Hum, you think the oder is not right ? i've just test to put in primary CollisionsEnabled then checkCollisions then isPickable. It change nothing but it's more clear like that.

It is in this function, the problem:

scene.registerBeforeRender(function(){
			var ray = new BABYLON.Ray.CreateNewFromTo(camera.position, godrays.mesh.position);
			var pickInfo = scene.pickWithRay(ray, null, false);
			if(pickInfo.hit)
			{
				if(pickInfo.pickedMesh.name !== "VolumetricLightScatteringMesh")
				{
					material.diffuseColor = new BABYLON.Color3(1,0,0);
				}
				if(pickInfo.pickedMesh.name === "VolumetricLightScatteringMesh")
				{
					material.diffuseColor = new BABYLON.Color3(0,1,0);
				}
			}
		});

 

[julien-moreau]

I think that setting

godrays.mesh.collisionsEnabled = true;
godrays.mesh.checkCollisions = true,
godrays.mesh.checkCollisions = true;
godrays.mesh.isPickable = true;

You should try to test directly the mesh instance too:

if (pickInfo.pickedMesh === godrays.mesh) {
    // Etc.
}

Can you reproduce the code in the playground with the texture ?

Anyway, can you test this ?:

...
if(pickInfo.hit)
{
	if(pickInfo.pickedMesh !== godrays.mesh)
	{
		material.diffuseColor = new BABYLON.Color3(1,0,0);
	}
	else // Instead of testing if picking ray picked the godrays mesh
	{
		material.diffuseColor = new BABYLON.Color3(0,1,0);
	}
}

Let's tell me if it works

[Uohcnam]

Nop it doesn't work ..

when the godrays.mesh is hidden a first time, the material.diffuseTexture became red, but when the sun appeared again, the material.diffuseTexture don't became green, like if the scene doesn't update the material.

[julien-moreau]

Hum, can you reproduce the problem in the playground but with the textures please ? You can set the URL to your textures on your server

like "var tex = new BABYLON.Texture("https://www.mywebsite.com/texturesPlayground/lens1.jpg", scene);" for example. I'll be able to help you in this case, it looks complicated without the result in the playground

[Uohcnam]

Hi !!

http://www.babylonjs-playground.com/#KF6CH

I upload image on imgur, they're was in local!

[julien-moreau]

Okay, I found the problem  : http://www.babylonjs-playground.com/#KF6CH#1

The fact is: the picking ray will never reach the godrays mesh (because it stops just at the mesh position, no enough to test the collision I guess). So the method consists on checking if the picking ray picked a mesh. If true, the lens flare should be occluded because there are an obstacle. If false, there are no obstacle and the lens flare should be drawn

[Uohcnam]

ooooooh yes! I'm a fool ... a big thanks to you !!