Jump to content

Multimaterial Blended Texture Transitions


Recommended Posts

Hi All

I have been exploring multimaterial texturing today and its great.  However... I have encountered an issue that I can see no obvious solution to.  What I am wanting to do is have "smooth" blended transitions between each of the multi-textures that are applied to the shape.  Provided below is the 3D scene I have created which has the multimaterial textures applied:


As you can see there are two textures that are being alternated across the face of the 3D model - each transition is a "hard" transition whereby there is no blending. 

Question: What I am wanting is for each texture transition to be blended - is there an easy way to do that?

One solution "hack" is to create a 3rd texture that is a blended rendition of the two textures, then I could insert this blended texture between each of the transitions.  Hopefully there is a simple solution that prevents me from having to go down this route!

Thanks in advance...

Link to comment
Share on other sites

@Rolento -

Unfortunately, I don't see how you might apply a third texture to the mesh in your PG scene to accomplish your desired goal of smoothly blending the texture channels in your multi-materials. The simplest solution I can think of doing quickly and easily is to "generate" a seperate mesh duplicating the faces of your existing mesh which you wish to blend materials, and apply a texture to this duplicate mesh which by masking blends the multi-materials on your current PG mesh, or - you can create a simple shader to accomplish this. Take a look at ShaderBuilder in BJS, and you should have all you need to accomplish this - however, there are issues with shaders and lights (such as shadows) in BJS, so be aware of the limitations in utilizing shaders before you try and impliment - so you don't perhaps waste your time. So in my opinion, the first suggestion is the quickest and most flexible I'm personally aware of.


Link to comment
Share on other sites

  • 2 weeks later...

Hi @dbawel

Sorry for the delayed reply, work keeps jumping in the way of me getting my teeth into BabylonJS at the moment *sigh*. 

Thanks for your guidance, from my perspective I need a little hand holding because some of these concepts you proposed are unknown to me.  My biggest challenge at the moment is finding examples that illustrate the basics - then I can proceed to start building out my solution.  If you are aware of any tutorials/samples that explain the concepts you are proposing I should adopt then I would really appreciate if you could share.

At the moment I am trying to get my head around this workflow:

> The simplest solution I can think of doing quickly and easily is to "generate" a seperate mesh duplicating the faces of your existing mesh which you wish to blend materials, and apply a texture to this duplicate mesh which by masking blends the multi-materials on your current PG mesh

Im not 100% sure I follow the above process, but im guessing you are saying something like the following illustration I created:

<< see attachement >>

* I dont suppose you could create a diagram to illustrate what you exactly mean assuming the above process illustration is incorrect?

If on the off chance the above is correct can you point me the in right direction to explain how:

1) how do I "clone" / "copy" a region of a mesh as per the above?

2) how do I apply a transparency mask as per the above?

3) how do I blend the new mesh (i.e. mesh 2) to an existing as per the above?

I hate asking so many questions but im really lost on this one... Thanks in advance for any help you can provide.

mesh fade illustration.png

Link to comment
Share on other sites

  • 2 weeks later...

Hi @NasimiAsl

Wow!  The solution you provided is exactly what I am trying to acheive.  Looking at the code, its is pretty amazing to see that you have been able to implement the solution in just a few lines!  Would you be so kind to answer a few more questions?

1) Looking at your code I have "tried" to understand what it is doing but I have to admit I am lost.  Could you possibly add some comments to your code that explain what each line is doing?  Also, if there is a website that you could recommend to enable me to learn more about how to use the ShaderBuilder library that would be great.  I am a newbie in the realm of shaders therefore I need some hand holding...

2) With respect to the solution you provided can you possibly explain how I could apply it to my playground example?


If you look at lines 86~94 you can see the code for making the transtions (i.e. between grass and rock texture).  However, what I am wanting is to specify an exact location along the face of a shape where I want the texture transition(s) to occur (e.g. see the attachment).

3) How do I blend 3+ textures?

4) How do I specify the length of the texture / blend transition region?

Thanks in adavnce...


Link to comment
Share on other sites


hi and thanks ( @Wingnut too )


1)  have 2 question

1-1 :

 attach shader Builder for PG http://www.babylonjs-playground.com/#1BKTOH

make new normal map : http://www.babylonjs-playground.com/#1BKTOH#4

attach some effect for normal map  ( optional ): http://www.babylonjs-playground.com/#1BKTOH#5

attach lights (in custom shader you can have any info form engine lights so need define it) http://www.babylonjs-playground.com/#1BKTOH#5

** i work in some shaderBuilder part for mix it with standard material for fix that problem

make final result http://www.babylonjs-playground.com/#1BKTOH#7


and change your condition : http://www.babylonjs-playground.com/#1BKTOH#8  

1-2 :

learn about shader in webgl 

and matematical ( recommanded )


 and http://cdn.rawgit.com/RNasimiAsl/Extensions/master/ShaderBuilder/Documentation/ShaderBuilderReferences.html

and research shaderBuilder in this froum


2 : answerd in 1-1

3 : make more reference [ this is advance step in shader Builder ]


4 : all about your condition and mathematical

you have UV and World Position Parameters you can manage that with any function you want



make some fun : http://www.babylonjs-playground.com/#1IAR36#12


Link to comment
Share on other sites

I understand in another post that you could change one color for another. But maybe I misunderstood.

In my case I want to use the 8 textures possible. but I have to use black or white. so I can use that 7 (not 8) ? it's me who is perhaps not very well understood. :(


new BABYLONX.ShaderBuilder().[ ].ReplaceColor(index, color, material, option).[ ]

is that one can replace one color with other?

that white becomes purle? or it is not possible.

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