Jump to content

Multiple textures on the same faces of a mesh?


Recommended Posts



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.


Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Haha! Solved it!  :D


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!

Link to comment
Share on other sites

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.

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.

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