Jump to content

Show Shadows on transparent material


Recommended Posts

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 ?




Have a nice day :)

Link to comment
Share on other sites

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


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

Link to comment
Share on other sites

Hello :)




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



Link to comment
Share on other sites



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:



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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

  • 3 months later...

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.

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.


  • Recently Browsing   0 members

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