t0ltec Posted June 17, 2015 Share Posted June 17, 2015 Hello! I just registered but I have been a silent user of babylon.js for a little more than a year now, reading everything there is about this awesome engine and soaking up knowledge like a sponge. But there's one detail that I can't find any info about, maybe I just missed it... but it's been driving me crazy the last couple of days! I think I have visited every single page on the interwebs mentioning anything about materials and textures in babylon.js by now. Is it possible to apply two, or more, texture images on the same faces of a mesh? Let me give you an example:I have a large piece of cloth and the base diffuseColor is made up of a small cotton texture that is tiled into oblivion.On top of this I need to add stitches at specific places, using a larger texture image as an alpha and a regular diffuseColor for the color of the stitches. The point is to be able to change the color of the stitches just by changing the diffuseColor. Right now I can accomplish this by adding another mesh slightly above the cloth and texturing the stitches to that, but that makes the babylon file bigger with all the extra meshes and faces, on top of managing the model in Blender much more complicated. Just to give you an idea of what I want to do I'm attaching a screenshot of a test i made using the extra mesh. Wingnut 1 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted June 17, 2015 Share Posted June 17, 2015 Yes you can You have to use multimaterials and submeshes like in this demo:https://github.com/BabylonJS/Samples/blob/master/Scenes/Customs/multimat.js More info also here:http://blogs.msdn.com/b/eternalcoding/archive/2013/07/10/babylon-js-using-multi-materials.aspx Quote Link to comment Share on other sites More sharing options...
Wingnut Posted June 17, 2015 Share Posted June 17, 2015 Hi t0ltec, good to see a lurker finally come visit and say hi! Welcome! Yep, I agree. Awesome engine and awesome people playing with it, too. Ya know... hmm. What if... your stitches... were precisely placed particles? Particles are fast and lightweight, and they would allow you to set stitch color, size, spacing, and they could even be "blown-off" the material with a simulated windstorm! Wow, huh? Creating 5000 stitch-shaped particles nearly-instantly, is easy, in BJS. Placing those stitches along the edges of a Blender-imported mesh... using a program... that will be a challenge. But, man, talk about stitching power, eh? You will have built... the Babylon sewing machine... stitches the edges of ANY mesh! Wow! A mesh edge-following particle-stitch planting machine. It also puts striped lines on highways! WOW! Quote Link to comment Share on other sites More sharing options...
jerome Posted June 17, 2015 Share Posted June 17, 2015 does multimaterial allow to superpose/blend textures on the same place ? Quote Link to comment Share on other sites More sharing options...
t0ltec Posted June 18, 2015 Author Share Posted June 18, 2015 Thanks for your replies guys! Much appreciated. @Deltakosh: I've read about multimaterials in the documentation a dozen times, but if I'm not mistaken all examples show how to add different materials to different faces, not the same? Or maybe I'm missing something? I'm already using multimaterials and submeshes to separate the inside and outside of the mesh that you see in my first post. I applied two different materials in Blender and the cotton texture works perfectly in babylon. I've been doing some tests after reading your answers to my post, but I just can't get the stitches in place using a second texture. I even tried adding more materials to the same faces in Blender and then added the stitches texture to those, and that kind of worked... I got stitches magically floating in the air! But no cotton underneath the stitches. It seems like the textures don't blend so that the first textures shows under the second. Jeromes question gets straight to the point of my initial question: can I superimpose/blend textures on the same faces?(thanks Jerome, you clarified my problem in just a sentence!) @Wingnut: I like the way you think, you're my kind of crazy! I'll have a look at particles and see if I can make use of them somehow later on, it's an interesting idea. But right now I'm pressed for time and need to get a working version of this project done. Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted June 18, 2015 Share Posted June 18, 2015 Sorry I read too quickly:( So, you have three choices here:- Either you add a second mesh on top of the first one and you use mat.zOffset to get rid off z-fighting- Either you write your own shader that will do all the blending you want: http://blogs.msdn.com/b/eternalcoding/archive/2014/04/17/learning-shaders-create-your-own-shaders-with-babylon-js.aspx- Either you try to use the standardmaterial by playing with diffuseTexture and ambiantTexture (They are both applied to the same mesh simultaneously) jerome 1 Quote Link to comment Share on other sites More sharing options...
t0ltec Posted June 18, 2015 Author Share Posted June 18, 2015 Darn it, but I guess I can stop pulling my hair out over this then, that's a plus I think I'll start off with the second mesh and mat.zOffset, seems to be the quickest way. When I have the time I'll look at creating a shader, looks interesting.The Ambient texture could work if it wasn't for the fact that the colors get multiplied, I guess there's no easy way to turn of the multiplying or you would've mentioned it already Anyway, thanks for the input, saved a few hairs on my head! I have some questions about morphing and shapekeys from blender, I can't seem to find any documentation about it, but I'll get to that later in another post. Quote Link to comment Share on other sites More sharing options...
t0ltec Posted June 18, 2015 Author Share Posted June 18, 2015 Haha! Solved it! I clone the mesh that I want the stitches on, and apply the stitches texture to the clone and use material.zOffset, done. This way I don't have to add a lot of extra faces to the meshes, and the file size is the same.Thanks for pointing me in the right direction! Quote Link to comment Share on other sites More sharing options...
iiceman Posted June 19, 2015 Share Posted June 19, 2015 Wouldn't ambientTexture be perfect for that? Or am I just imagining it wrong/too easy? Quote Link to comment Share on other sites More sharing options...
t0ltec Posted June 20, 2015 Author Share Posted June 20, 2015 Hey iiceman, As I understand it the ambientTexture is multiplied onto the diffuse texture, which in my case would lead to semi transparent stitching. Not ideal.But cloning the part that needs stitches and using material.zOffset on the stitches material does the trick. Here's a screenshot of my latest test if somebody's curious. The texture for the stitches needs some adjusting, but it'll work fine. iiceman 1 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted June 20, 2015 Share Posted June 20, 2015 If you want additive then use emissive texture:https://github.com/BabylonJS/Babylon.js/blob/master/Babylon/Shaders/default.fragment.fx#L757 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.