qqdarren

Why does VolumetricLightScatteringPostProcess need a texture?

Recommended Posts

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!

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.)

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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  :D 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.

Share this post


Link to post
Share on other sites

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(...);

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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);
}

 

Share this post


Link to post
Share on other sites

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?  :)

Share this post


Link to post
Share on other sites

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

 

:)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

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.