Multimaterial Blended Texture Transitions

[Rolento]

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:

http://www.babylonjs-playground.com/#RF9W9#479

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

[dbawel]

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

DB

[Rolento]

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.

[NasimiAsl]

@Rolento hi

what condition you have for set Texture ?

http://www.babylonjs-playground.com/#1IAR36#2

[Wingnut]

Excellent, Naz!  You are a professional blend-meister!

[Rolento]

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?

http://www.babylonjs-playground.com/#RF9W9#479

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

 

[NasimiAsl]

@Rolento

hi and thanks ( @Wingnut too )

answers

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 )

https://github.com/BabylonJS/Extensions/tree/master/ShaderBuilder

 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 ]

http://www.babylonjs-playground.com/#1IAR36#9

4 : all about your condition and mathematical

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

http://www.babylonjs-playground.com/#1IAR36#10

 

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

 

[Dad72]

Can we do the same thing on the material field ShaderBuilder. This is really excellent.

I wish I could do the same in this PG:

http://www.babylonjs-playground.com/#6ZUPU

[NasimiAsl]

13 minutes ago, Dad72 said:

Can we do the same thing on the material field ShaderBuilder. This is really excellent.

I wish I could do the same in this PG:

http://www.babylonjs-playground.com/#6ZUPU

Use  bias:5. in your pattern

and rangeStep : -0.49 (fully fade)

http://www.babylonjs-playground.com/#6ZUPU#1

[Dad72]

@NasimiAsl This will create a small problem if used 8 textures. 

http://www.babylonjs-playground.com/#6ZUPU#3

[NasimiAsl]

1 minute ago, Dad72 said:

@NasimiAsl This will create a small problem if used 8 textures. 

http://www.babylonjs-playground.com/#6ZUPU#3

you can make blured texture with bias :0 maybe that fix that

[Dad72]

I do not understand blured. what's this ?

[NasimiAsl]

5 minutes ago, Dad72 said:

I do not understand blured. what's this ?

http://www.babylonjs-playground.com/#6ZUPU#4

[Dad72]

Ok I see. I go do like that. thank you Nasimi

[NasimiAsl]

4 minutes ago, Dad72 said:

Ok I see. I go do like that. thank you Nasimi

Order Of Color is Important

http://www.babylonjs-playground.com/#6ZUPU#5

http://www.babylonjs-playground.com/#6ZUPU#6

Black

Red Green Blue

Pink Cyan Yellow

White

 

[Dad72]

Ah, yes, I had not paid attention to this. What is it Adviser for order of colors. darker > clearest for example?

[NasimiAsl]

0   0   0  black

255 0  0  red

0 255 0 green

0   0   255 blue

255 255 0 yellow

0 255 255 cyan

255 0 255 pink

255 255 255 white 

[Dad72]

Ok,I had black after white. but the rest was in order.

[NasimiAsl]

both most be set but  if you have background You most set it like start material

and replace other color http://www.babylonjs-playground.com/#6ZUPU#7

and order important in colors 

[Dad72]

You mean I should use either Black or White. or change the color white so that it becomes a different color? But it is how to change the color white?

[NasimiAsl]

actully Black and white is a one color

0 0 0 to 255 255 255

so close when you use gradient between them

[Dad72]

How to make white becomes another color? purlpe for exemple

[NasimiAsl]

i dont understand? 

[Dad72]

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. 

this:

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.

[NasimiAsl]

replace color can replace color from reference with material never change reference