Show Shadows on transparent material

[3Dlove]

Hello guys

 

I used a specific material for a ground with a black diffuseColor :

plan.material = new BABYLON.StandardMaterial("planMat", scene);                               plan.material.emissiveTexture = groundTexture;plan.material.bumpTexture = groundTexture;                plan.material.diffuseColor = BABYLON.Color3.Black();                plan.receiveShadows = true;

And I would like to show shadows on this ground, but no shadows are displayed.

I can't use another material because I use the same picture for the bumpTexture and emissiveTexture in order to have the same color as if I would use just a difusseTexture.

 

So I tried to use a second transparent plan above my ground in order to show shadows on this second plan, but I didn't suceed in.

 

Exists it a solution to show shadows with black diffuseColor ?

 

Thanks

 

Have a nice day

[Wingnut]

Hi again, 3DL.  I have no solution for you, but I was doing some testing.

http://playground.babylonjs.com/#1JROW4

(a slightly-modded BJS shadows demo)

I tried making TWO textures... same image source for each, but making two of them allows us to adjust the .level  and .hasAlpha and .alpha... differently on each one. 

I didn't learn much, but I am having fun trying to figure out WHAT will kill a shadow and what won't.    Maybe you and others (including me) can use this as a testing PG.  Sorry that I don't have more for you at this time.

[GameMonetize]

Hello, the problem is that shadows work like real shadows: They block the light. The light is used by the diffuse channel, so no diffuse, no shadow

[3Dlove]

Hello

 

Okay

 

Thanks for your test :-)

 

 

Here is a code example : http://www.babylonjs-playground.com/#14B8OQ

 

You can download the Sample.zip with my texture (in attachments)

 

if you turn the camera, you can see the specular light on the ground and see relief on the texture (due to bump), you can see it in the attached picture.

The problem is that I used emissiveTexture and black diffuseColor to have the same textures color, and bumpTexture to have relief.

If I just used diffuseTexture and bumpTexture, the colors are weird :S

 

Is it possible to have the same kind of view (color + relief) in order to show shadows ?

Maybe I would modify the texture for bump only ?

 

Other solution, maybe : is it possible to show shadows on a second transparent mesh ? or not because it's transparent =p ?

 

Summary : I would like use this texture for colors and show reliefs and shadows

Sample.zip

[jahow]

Hey,

 

If you do something like this, it doesn't look too bad: http://www.babylonjs-playground.com/#14B8OQ#1

Shadows should work there (haven't tested). I had to lower the light specular color to make the effect more "lifelike".

 

Basically I'd advise you to forget about using bumpTexture altogether, since you don't actually have one. This is what a bump texture, also known as normal map, looks like:

http://www.babylonjs-playground.com/textures/normalMap.jpg

 

Using your color texture (for example the planks one) as the specular map will still give a kind of relief to it, although it may not look great. This is what I've done in the PG. Take a look at this article if you haven't already, it might help you: http://doc.babylonjs.com/page.php?p=22161

 

Good luck!

[3Dlove]

Thanks for your idea with specularTexture

there is not a big difference between just a diffuseTexture AND a use of both diffuse and specularTexture I find. I don't really see a relief with my planks texture.

 

Yes, I've already saw it, I'm gonna read it more in details

 

 

Edit: I read it and I tried using your normalMap picture and that works with diffuseTexture =)

 

So the solution is to create a normalMap for my planks 

is somebody knowing how to do that ? =p

 

 

Thank you

[Wingnut]

http://www.babylonjs-playground.com/#14B8OQ#2  pretty.  3DL's wood planks gave me a hankerin' for some more of it. 

 

Plus, it's fun to tour Cors-clear Google IMAGE SEARCH returns... for "wood texture".  Love that wood!  Not all "labeled for re-use" images found with Google Image Search... are usable in the playground, but SOME are.  Sorry for the off-topic. 

[jahow]

Wow Wingnut, this actually looks great. Very subtle & convincing!

 

@3DLove: there's this site that looks ok: http://cpetry.github.io/NormalMap-Online/

Otherwise I've used this plugin for photoshop many times & it works great: https://developer.nvidia.com/nvidia-texture-tools-adobe-photoshop

[3Dlove]

Oh yeah =)

 

Thanks Wingnut, I didn't know this Google Search Tool "Usage Rights" => Awesome =)

 

"It's funny because French Google Image and English Google Image give not same results for same keywords (if you change url parameter &hl=en by fr ^^)"

 

Your wood texture is beautiful too

 

 

Thanks Jahow^^

 

It's funny too because I just tried the photoshop plugin that you mentioned

 

I'm working on that with my planks texture in order to have the same results (I don't know what trying, so I will try Black&White Filter, Negative Filter, applying before Normal Mapping =)

[3Dlove]

I don't find the good setting for the normal map :/

 

What I would like :

 

What I have currently :

=> in attachments

 

 

You can download the picture file here

[Wingnut]

Interesting pictures!  Ahh, artistry... ain't it great?  It might take you a week to get your bumps looking per your liking, but that's SOME of the fun of modeling, eh? 

 

Hehe... it looks like someone tried to make fake wood... out of porcelain.    I'm not making-fun of your material, 3DL.  Ok, yes I am, but it shows an interesting (and entertaining) effect.  (no offense meant)

[JCPalmer]

Way off topic, but they ARE starting to make porcelain tile flooring that looks like wood.  Saw it on 'This Old House' last Sat morning (browsing this site at the same time via tablet, of course)

[3Dlove]

Thank you guys

 

So the solution is to create a normalMap and a lightMap (specularMap)

That is another subject^^

[adam]

Here is how to create a normal map using Gimp:

 

https://developer.valvesoftware.com/wiki/Normal_Map_Creation_in_The_GIMP