Jump to content

Ambient Light / Emissive texture


grire974
 Share

Recommended Posts

Hi All,

I would like to replicate what I've seen referred to in some other engines as ambient light; definition of which being - a light that evenly distributes across the whole scene; e.g. doesn't cast shadows, and no parts of the scene look darker / lighter than any other part.

My main reason for this is that some of my 3D content will need to have light maps baked into the texture images (for other non-babylon related reasons) & I don't want the default babylon lighting to affect this light mapping.  I noticed this topic asked a similar question: 

However the answer they got didn't seem to satisfy my requirements.  So far - the closest solution I've come up with is: 

for (i = 0; i < newScene.lights.length; i++){
    newScene.lights.setEnabled(false);
}
for (i = 0; i < newScene.materials.length; i++){
    newScene.materials.emissiveColor = newScene.materials.diffuseColor;
}

However this assumes that all my materials are solid colour; which they won't all be; some of them will have image textures.  Any advice would be greatly appreciated? Perhaps a shader effect might be of help?  Thanks!

Link to comment
Share on other sites

Hi Grire, good questions!

Prepare yourself, because BabylonJS has a very powerful materials system, and you will soon LOVE IT!  I promise.  :)

Here is an ambientColor testing playground...  http://playground.babylonjs.com/#29ADSV

See lines 4-5?  You can set scene.ambientColor, and it is "summed" with all diffuseColors (and maybe diffuseTextures) to derive ALL the colors of a scene.  More importantly, scene.ambientColor REALLY AFFECTS materials with .ambientColor values set.

But we are sort-of talking about lighting, right?  Well, lights = colors... in certain situations.  :)  Line 5 shows that we have set a real low-powered white color for our scene.ambientColor.  But notice line 14.  I added an ambientColor value to all the mesh material.

Most folk would treat a BABYLON.Color3() object with respect, and ONLY use values between 0 and +1 for its R, G, B.  But not me.  Line 14... look at that red value... set to 10!  What kind of idiot would do that, eh?  :)  But it sure makes the material turn red... with very little scene.ambientColor (light).  Strange, eh?  But, yes, you should keep the RGB values between 0 and +1 if you want to play it straight.

Play with this playground, adjust things, keep hitting RUN, make new saves, show us their URLs.  For textures, you might consider myMat.ambientTexture = myMat.diffuseTexture;  

Every texture used on BabyonJS materials... has a texture.level = [float].  You can make ambientTextures and emissiveTextures come alive with self-brightness... using levels.  DiffuseTexture can have a certain .level, and emissiveTexture can have a different .level, etc etc... IF you create a new BABYLON.Texture for each (but you can use the same URL).

And, don't forget about the cool HemisphericLight and it's light.groundColor = [Color3].  Again, in this case... color = light... so hemisphericLight.groundColor = BABYLON.Color3.Gray()... gives you a medium-powered white light, which equals gray.  :)  .groundColor is the amount of light-color on the bottom of your mesh.  Hemispheric lights are usually aimed 0, 1, 0 ...at the sky, and they reflect from the atmosphere.  :) Therefore, hemispheric lights tend to light everything in the scene, evenly, with no shadows.  (but remember to light the bottoms with hemilight.groundColor.  :)

Are ya still with me, G-man?  Should we take a little breather?  I'm kind-of pooped out.

Link to comment
Share on other sites

Wow - thanks wingnut; lots of great stuff to consider there.  I didn't notice material.ambientTexture or diffuseTexture in the API docs (in fact I'm not sure they're there at all - is that api intended to be private/internal?).  I'd used hemispheric in the past before however it creates reflection effects & wasn't exactly what I was looking for; however I'd glimpsed at the ground color stuff before & had forgotten about that.

Stupidly - I just assumed that my code above would only work for solid color models (e.g. ones without image textures); however actually in testing it - it works for both situations in the way that I hoped it would.  Thanks again.

Link to comment
Share on other sites

Good deal, Grire!  I'm glad to hear you are rolling. 

Yeah, all those textures are defined on "StandardMaterial" and you were probably looking at "Material".  But as far as "advanced docs" that tell what each kind of texture/color DOES... and how it interacts with other colors and textures that have been set on a standardMaterial... you are right.  We don't have that documentation.  Even if we did document it, it might become technical.

For example, I don't know if scene.ambientColor... affects the .levels of textures on a material.  Maybe it ONLY affects material.ambientTexture.  Maybe it also affects material.diffuseTexture intensity, too.  Maybe not.  There's SO MANY combinations!  Does a diffuseColor... act as the background color that shows through a transparent gif in the diffuseTexture?  Will a non-transparent texture in diffuseTexture... become transparent when the same URL is used for the opacityTexture?  How does a reflectionTexture react with the same URL used as an opacityTexture?  Holy cow, huh? 

A mad scientist could go crazy with all the demented experiments that are possible!  Fun!  :)  I love the BJS materials system, as you can tell.

The pros have memorized the "big 4" texture manipulators... wrap, scale, offset, and ang.  .wrapU and .wrapV (pretend U and V are X and Y)... they live on the baseTexture class.  The other guys (.uOffset, .vOffset, .uScale, .vScale, .uAng, .vAng, .wAng) all live on the Texture class.  They take single floats.  http://playground.babylonjs.com/?4  There you can see some offsets used in lines 48-49, and some scaling in lines 65-66.

There, now you are a professional texture slider, wrapper, spinner, and stretcher.  :)  Every BABYLON.Texture... has those properties (and lots more).  FUN!  See ya later! 

Link to comment
Share on other sites

Haha - yeh for sure; have only been working with this SDK for a few months & am enjoying it thoroughly.  Its a good point you raise about diffuse colour possible shining through a transparent region of a texture image; might not be one size fits all (as I'm hoping it to be).  Although it does seem to work for opaque image types (e.g. even jpegs).  Will post back if I have any revelations.

Link to comment
Share on other sites

Hi,

As Wingnut said, and to sumarize a little :P

Do not declare a diffuseTexture, simply declare an emissiveTexture, put diffuseColor to (1, 1, 1) and specularColor to (0,0,0). And tadaaa, you'll have your objects self illuminated by your lightmap, without any anoying specular.

You can also add an hemispheric light to boost the actual lighting or not put any light at all don't add any light (you can setEnabled false every previous lights already present in the scene).

Link to comment
Share on other sites

Hi grire974 :) As Vousk-prod suggests you can use a hemispheric light to just provide a flat light. But you do have a couple of additional options:

1. excludedMeshes - allows you to set a particular group of meshes that are not illuminated by a particular light.

2. includedOnlyMeshes - allows to to restrict a light to illuminating only a certain group of meshes.

So  for your meshes with baked textures use a hemi and includedOnlyMeshes  which have baked textures.. For all other lights in the scene, exclude those same meshes from those lights.

cheers, gryff :)

Link to comment
Share on other sites

  • 10 months later...
On 1/27/2016 at 6:16 AM, Vousk-prod. said:

Hi,

As Wingnut said, and to sumarize a little :P

Do not declare a diffuseTexture, simply declare an emissiveTexture, put diffuseColor to (1, 1, 1) and specularColor to (0,0,0). And tadaaa, you'll have your objects self illuminated by your lightmap, without any anoying specular.

You can also add an hemispheric light to boost the actual lighting or not put any light at all don't add any light (you can setEnabled false every previous lights already present in the scene).

Yo @Wingnut or @Vousk-prod. and don't forget @Deltakosh ... How would you do this with a PBR Material ???

I asking all three of guys... too make sure i get it right... I am adding a "Full Lightmap Baking" option that will simply put the mainTexture in emissiveTexture and set diffuse or albedo color to white... set specular color black (I don't know what the equivalent value to set to black for specular in PBR, if there is even one)... DONE USE diffuse or albedo Texture... because is in emissiveTexture and 'emitting' self-illuminating pixels from shader... the shadows are coming from lightmapTexture just like normal... So if i understand correctly ... Really the emissive part and the light map part have nothing to do with each other... if you put ANY texture in emissive instead of diffuse or albedo the shader will light those pixels for the texture there by "illuminating" the material... If you also happen to have a lightmapTexture applied ... You get shadows too ... Is that about right ???

 

 

Link to comment
Share on other sites

According to this... there should be something ini diffuse and ambient and emissive... Where does lightmapTexture come into play:

Ambient texture

The main goal of the ambient texture is to provide a support for lightmaps (textures that contains baked shadows). Mainly the value of the ambient texture is multiplied by the diffuse value to produce the final result:

material.diffuseColor = new BABYLON.Color3(1, 0, 0);
material.ambientTexture = new BABYLON.Texture("Tree.png", scene);

Or 

You can just use diffuseTexture and lightmapTexture for just shadows

And you can justus emissiveTexture and lightmapTexture for Full baked lighting

Can someone please clarify this???

And what about PBR Materials ... how would do the same thing if using PBR instead of Standard material???

Link to comment
Share on other sites

So lightmapTexture is for lightmaps :D

You can use in an additive or multiplicative way at the very end of the equation: https://github.com/BabylonJS/Babylon.js/blob/master/src/Shaders/default.fragment.fx#L393

Diffuse and ambient onthe contrary are computed inside the lighting equation: https://github.com/BabylonJS/Babylon.js/blob/master/src/Shaders/default.fragment.fx#L387

 

Link to comment
Share on other sites

Crap... I must be just really 'thick headed' this morning because i still don't quite understand all the different options for Lightmaps.

I get the basic SHADOW only mode because that is what the exporter is using now.

For Shadows only:

1... Put your main texture in diffuseTexture (std) or albedoTexture (pbr)

2... Put your lightmap (shadows only) in lightmapTexture and use material.useLightmapAsShadowmap = true

NO AMBIENTTEXTURE OR EMISSIVETEXTURE USAGE AT ALLL

Note: Although  i still see documentation that says put your light map in ambientTexture (So whats right ambientTexture or lightmapTexture)... I am using lightmapTexture (i don't understand why have a lightmapTexture AND ambientTexture that says light maps go here???)

OK KOOL... Whatever...That works for shadows only... So now i want to do FULL LIGHT BAKING as an option.

Now I'm really confused about all the different slots that are available .. Its says you could do this and you could do that... But what is the real, or preferred or the best way to do full light baking...  Where do i stick my regular texture and where do i stick my light map. And what NOT to set.

I guess i just need SUPER SIMPLE (child-like) explanation that says: If you wanna bake shadows only, put your texture here and your light map here AND WHAT NOT TO SET

If you wanna bake full lighting... put your main texture here and your light map here... AND AGAIN WHAT NOT SET (i.e. diffuse should NOT be set when using full light baking but use emissiveTexture instead... The emissiveTexture is ADDITIVE... Added to What if the is no DiffuseTexture set)

Crap.... Just really confused :(

 

 

 

Link to comment
Share on other sites

4 hours ago, Deltakosh said:

So lightmapTexture is for lightmaps :D

You can use in an additive or multiplicative way at the very end of the equation: https://github.com/BabylonJS/Babylon.js/blob/master/src/Shaders/default.fragment.fx#L393

Diffuse and ambient onthe contrary are computed inside the lighting equation: https://github.com/BabylonJS/Babylon.js/blob/master/src/Shaders/default.fragment.fx#L387

 

 

Docs Say:

The main goal of the ambient texture is to provide a support for lightmaps (textures that contains baked shadows)

If lightmapTexture is for light maps only.... Which is understandable... Should be ALL light maps GO HERE... BUT THEN Why have a field called ambientTexture that ALSO says this is for light maps ???

Link to comment
Share on other sites

OK... 

So for FULLY BAKED lighting with STANDARD material:

1... DO NOT SET diffuseTexture at all

2... SET diffuse color to white and specular color to black

3... SET main texture and main color to emissiveTexture AND emissive color (instead of diffuseTexture and diffuse color)

4... SET lightmapTexture to my unity produced lightmap.jpg

5... SET useLightmapAsShadowmap to false

IS THE EXACTLY CORRECT.. IF not please alter the steps above

 

Using PBR materials what are the steps:

1... DO NOT SET albedoTexture at all

2... SET albedo color to white (Don't know what would be specular equivalent to set to black???)

3... SET main texture and main color to emissiveTexture AND emissive color (instead of albedoTexture and albedo color)

4... SET lightmapTexture to my unity produced lightmap.jpg

5... SET useLightmapAsShadowmap to false

IS THE EXACTLY CORRECT.. IF not please alter the steps above

 

Link to comment
Share on other sites

23 minutes ago, Deltakosh said:

This is because lightmaps can be use after light computation (Lightmaptexture) or during light computation (ambientTexture).

In you case just use Lightmaptexture :)

@Deltakosh Ohhh i see for this issue... I Think... This MUST be why the exporter code only adds a light map if material.ambientTexture == null. Because then no need for a AFTER computational lightmap because the lightmap info is already computed (factored in) from the texture you set in ambientTexture (the same exact lightmap.jpg just either used by the shader to compute the pixel when set in ambientTexture or used AFTER the fact as kind of an overlay with lightmapTexture).

IS THAT CORRECT ???

Link to comment
Share on other sites

Crap... Im just not getting it :(

@Deltakosh I know your trying to 'pound' it thru... but ill be dammed if still not quite sure about ALL the stuff i need to setup to provide a full light baking solution. But thanks bro... I appreciate your time and effort in explaining though... that 4 sho :)

I will figure something out... eventually :)

Gonna grab some lunch then TOKE... Maui Style... Then i try again... Another Smiley Face :)

 

Link to comment
Share on other sites

1 hour ago, Deltakosh said:

let's proceed differently :)

What about creating a scene in unity and exporting it? then do a screen capture so we can discuss here 

TL;DR: Export only to lightmapTexture

 @Deltakosh Here is QUICK video showing my issue... PLEASE EXCUSE ME TALKING LOAD AND FAST... WAS TRYING TO MAKE REAL QUICK... 

You know me and my long videos :)

My baking issues

 

Please tell me what I'm doing wrong

Link to comment
Share on other sites

Hello

I think I understand the problem. 

You can use EmissiveTexture for color AND a LightmapTexture for shadows. So your initial assumption in your video is CORRECT

(when I said that you can use emissivetexture OR lightmaptexture, I was refering just in the context of a lightmap. You can put a lightmap in emissive if the lightmap contains LIGHTING info. So please just IGNORE what I said for simplicity sake :))

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...