iiceman Posted June 28, 2015 Share Posted June 28, 2015 Hey folks, I just wanted to place an svg with transparency over a green base material. I added the diffuseColor and the diffuseTexture and then set the diffsueTexture.hasAlpha to true. I assumed the texture would be over the color... but it ain't. The texture gets tinted and where the texture has transparency the mesh is transparent... but that's not what I want Here is a playground where I tired. What I want: a green sphere with leaves drawn on top without having to create a second slightly bigger sphere or something like that. http://www.babylonjs-playground.com/#1JW2TH How could I achieve that? Should be easy, right? But I have no idea what I am doing wrong Quote Link to comment Share on other sites More sharing options...
jahow Posted June 28, 2015 Share Posted June 28, 2015 Hi, Diffuse color & texture are multiplied (including vertices colors since recently) to obtain the final diffuse color. So you cannot simply obtain what you want the way you planned it. Basically you want to have two different layers. I think the simplest solution would be to have two spheres, one slightly bigger than the other. I thought there would be a workaround by putting the svg shape in the emissiveTexture slot so that it renders on top of the background, but I don't think it would work for you: http://www.babylonjs-playground.com/#1JW2TH#1 As you can see, the emissive texture is blended additively to the diffuse layer (which means no way to have black parts for example). Quote Link to comment Share on other sites More sharing options...
iiceman Posted June 28, 2015 Author Share Posted June 28, 2015 Hmm, I see. Well, I guess I'll use the extra mesh then to overlay the texture. Wouldn't it be nice if it could be configured with an extra parameter when creating the texture if it is blended by multiplying or additively? Or is that not possible? Quote Link to comment Share on other sites More sharing options...
jahow Posted June 28, 2015 Share Posted June 28, 2015 Well I guess you can always suggest it here: https://babylonjs.uservoice.com/forums/267546-general But I have to say it would feel 'non-canonical' (as well as probably hard to code). A material's emissive color is supposed to be added to the diffuse one, just as the diffuse color is multiplied by the received light. I believe the StandardMaterial should stick to its role of providing a realistic rendition of any kind of real world material. Another solution would be to create your own shader for this specific use, which can probably be a good thing if you don't need all the StandarMaterial bells&whistles. You'll then be able to merge different layers exactly in the way you want it! Quote Link to comment Share on other sites More sharing options...
iiceman Posted June 29, 2015 Author Share Posted June 29, 2015 Well, I gave it a shot with the extra mesh (a plane since I needed the texture only on one side of a hexagon)... looking okay I guess. Thanks for the help GameMonetize and jahow 2 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.