Why does VolumetricLightScatteringPostProcess need a texture?

[qqdarren]

I am wondering what restrictions there on using VolumetricLightScatteringPostProcess?

After some trial and error, it seems the object needs a diffuseTexture to be defined - a diffuseColor is no good. E.g. here is my not working example:

 

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

 

But add a bit of grass, and it works:

 

   http://www.babylonjs-playground.com/#FVPCG#2

 

I like this effect, and am just trying to get some insight into what is going on!

 

[dbawel]

I don't see a result in chrome with either scene.

[jerome]

mmmhh... in the PG code, if you read what is marked with the tiny wavy green line under the "newMeshes[0]" parameter, you can notice the VLSLPP method expects here a Mesh type object while  newMeshes[0] is an Abstract mesh object.

[qqdarren]

@dbawel, you are right! I have only been testing in Firefox.  (BTW, why does it look like a green skull, rather than one covered in grass?)

 

@jerome, does that mean I should be using a cast? Or is it something more complicated?

[RaananW]

The mesh associated with the effect is usually different than the mesh in the scene. Setting the mesh to null will create a default mesh to be used as the effect's mesh. You can of course use a mesh in the scene, if it has a diffuse texture.
This mesh is important only for its position and material - this is the "light" that is actually emitted. So if you choose a picture of the sun as a texture, you will have the sun projecting good rays. Choose a picture of grass, you will have green rays.
The reason that the texture is not working well with this mesh is due to the fact that this specific mesh doesn't have texture (uv) coordinates. So the first pixel of this texture is selected as the entire color of the mesh.

Changing the newMeshes[0] to null in the constructor and to godrays.mesh afterwards will make it a grassy white skull :-) like this - http://www.babylonjs-playground.com/#FVPCG#4

[qqdarren]

Thanks RaananW for the "mesh is important only for its position and material" explanation. Should I read "material" here as meaning "diffuseTexture"? Actually, if not, then I am confused again ;-)

But if texture UV coords are needed, and this model doesn't have them, why did my second example work in Firefox?

(BTW, my own model has UV coords, and does indeed work in both Firefox and Chrome, as long as a I specify a diffuseTexture.)

[julien-moreau]

Hi guys !

 

RaananW is totally right, the VLS effect needs a mesh with a diffuseTexture set in its material (a default mesh can be created for you if the mesh parameter is null)

Nevertheless I'm going to add a feature in the effect :

If "diffuseTexture" is null then apply "diffuseColor" colorElse apply "diffuseTexture" color.

Then, no diffuseTexture needed anymore.

I come back when it's done

[RaananW]

Thanks RaananW for the "mesh is important only for its position and material" explanation. Should I read "material" here as meaning "diffuseTexture"? Actually, if not, then I am confused again ;-)

 

Just as Luaacro said, you are not confused  The material has the texture information, I therefore used the word material, but  the diffuse texture is the important one. 

 

The diffuse texture is important for the mesh that projects the light, not the one that is blocking it (the case of the skull I showed, and the one in the playground demos).

 

Both of your demos work on all browsers. Chrome users just need to be a bit more patient :-) It works, because the color of the first pixel of the texture is set as the color of the entire mesh. So the mesh is projecting constant green light. Which actually looks rather nice! If your own model has UV coordinates, and this is the object you want to use as your sun,  it would work as you want it to.

[julien-moreau]

I updated the VLS post-process, you can now use the diffuse color instead of the diffuse texture as the light color.

 

Usage to use material.diffuseColor :

// Use diffuse colorvlspp.useDiffuseColor = true;vlspp.mesh.material.diffuseColor = new BABYLON.Color3(1.0, 0.0, 0.0);// Use diffuse texturevlspp.useDiffuseColor = false; // Default is falsevlspp.mesh.material.diffuseTexture = new BABYLON.Texture(...);

[GameMonetize]

Doc need to be updated

[julien-moreau]

Updated !! 

[Wingnut]

Hi guys.  Good info, thanks all.

 

@luaacro - I'm curious if a fallback system could be used, instead of .useDiffuseColor.

 

if (radiatorMesh.material) {

    if (radiatorMesh.material.diffuseTexture) {

         use it;

    }

    else if (radiatorMesh.material.diffuseColor) {

         use it;

    }

    else {

        use white;  // NOT via installing a .diffuseColor on radiatorMesh

    }

}

else {

    use white;  // NOT via installing a .material and .diffuseColor on radiatorMesh

}

 

If you did it THIS way, the radiatorMesh needs no material at all, and thus, we're closer to activating a VLS with a single line of code.

 

Not sure if this idea is wise whatsoever, but it's a thought just the same.    Be well, guys/gals.

[qqdarren]

I like Wingnut's idea. The only downside could be that the current approach allows you set a diffuseTexture, but use difficuseColor for the light scattering effect. Would that ever be useful?

 

The code in question seems to start here:

 

https://github.com/BabylonJS/Babylon.js/blob/fb93561c1065fb0bc9ef7fc25810a1df58840e9d/Babylon/PostProcess/babylon.volumetricLightScatteringPostProcess.js#L200

 

Can it be rewritten:

 

if (material && (mesh === _this.mesh || material.needAlphaTesting() || material.opacityTexture !== undefined)) {
    var alphaTexture = material.getAlphaTestTexture();
    if(alphaTexture){
        _this._volumetricLightScatteringPass.setTexture("diffuseSampler", alphaTexture);
        _this._volumetricLightScatteringPass.setMatrix("diffuseMatrix", alphaTexture.getTextureMatrix());
    }
    else{
        _this._volumetricLightScatteringPass.setColor3("color", material.diffuseColor ? material.diffuseColor : WHITE);
    }
}
else{   //No material set
    _this._volumetricLightScatteringPass.setColor3("color", WHITE);
}
 

[Wingnut]

Hey, thanks for writing that code, qqd!  Cool!

 

I'm quite newbie to coding/bjs, as I spend most of my time dreaming and talking.  But, there have been times when I thought that a material.diffuseColor should be allowed to color the transparent areas of a texture with alpha.  With me?  If a diffuseColor is set, THAT color shows in the transparent areas of the diffuseTexture.

 

Such a thing is likely ridiculous.  I'm a dreamer and talker.    I don't think I have EVER seen a diffuseColor affect a diffuseTexture... but it's an interesting and dangerous thing to talk-about, eh? 

[julien-moreau]

Hey, I agree with that! But, what do you prefer ?

 

1. Using the diffuseColor only if diffuseTexture is undefined ? If you want to switch between the two mods you'll have to keep the texture reference somewhere.

2. Force using diffuseColor. I mean if you want to jump between the two mods you just have to switch the boolean.

3. If 2 is accepted, add a parameter to the constructor to use diffuseColor or diffuseTexture

 

[qqdarren]

Luaacro, for me, personally, I think all that is needed is: only use diffuseColor if no diffuseTexture has been defined. And that restriction is worth making object creation easier.

For more exotic use cases people can simply use two meshes, almost the same size, one inside the other.

[julien-moreau]

I'll keep the useDiffuseColor member to allow users to force diffuse color.

But I'll add your suggestion that is to use the diffuse color if there's no diffuse texture defined 

[dbawel]

RaananW is correct, your first scene loads so slow that I gave up.  But both scenes work - I'm losing confidence in Chrome.  Can anyone help boost my confidence to where I trust Chrome again?