Rolento Posted February 18, 2017 Share Posted February 18, 2017 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... Quote Link to comment Share on other sites More sharing options...
dbawel Posted February 18, 2017 Share Posted February 18, 2017 @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 1 Quote Link to comment Share on other sites More sharing options...
Rolento Posted March 1, 2017 Author Share Posted March 1, 2017 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. Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted March 11, 2017 Share Posted March 11, 2017 @Rolento hi what condition you have for set Texture ? http://www.babylonjs-playground.com/#1IAR36#2 JohnK, Rolento, Wingnut and 1 other 4 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted March 11, 2017 Share Posted March 11, 2017 Excellent, Naz! You are a professional blend-meister! NasimiAsl 1 Quote Link to comment Share on other sites More sharing options...
Rolento Posted March 12, 2017 Author Share Posted March 12, 2017 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... Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted March 13, 2017 Share Posted March 13, 2017 @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 Wingnut and Dad72 2 Quote Link to comment Share on other sites More sharing options...
Dad72 Posted March 13, 2017 Share Posted March 13, 2017 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 Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted March 13, 2017 Share Posted March 13, 2017 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 Quote Link to comment Share on other sites More sharing options...
Dad72 Posted March 13, 2017 Share Posted March 13, 2017 @NasimiAsl This will create a small problem if used 8 textures. http://www.babylonjs-playground.com/#6ZUPU#3 Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted March 13, 2017 Share Posted March 13, 2017 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 Quote Link to comment Share on other sites More sharing options...
Dad72 Posted March 13, 2017 Share Posted March 13, 2017 I do not understand blured. what's this ? Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted March 13, 2017 Share Posted March 13, 2017 5 minutes ago, Dad72 said: I do not understand blured. what's this ? http://www.babylonjs-playground.com/#6ZUPU#4 Dad72 1 Quote Link to comment Share on other sites More sharing options...
Dad72 Posted March 13, 2017 Share Posted March 13, 2017 Ok I see. I go do like that. thank you Nasimi Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted March 13, 2017 Share Posted March 13, 2017 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 Wingnut 1 Quote Link to comment Share on other sites More sharing options...
Dad72 Posted March 13, 2017 Share Posted March 13, 2017 Ah, yes, I had not paid attention to this. What is it Adviser for order of colors. darker > clearest for example? Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted March 13, 2017 Share Posted March 13, 2017 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 1 Quote Link to comment Share on other sites More sharing options...
Dad72 Posted March 13, 2017 Share Posted March 13, 2017 Ok,I had black after white. but the rest was in order. Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted March 13, 2017 Share Posted March 13, 2017 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 Quote Link to comment Share on other sites More sharing options...
Dad72 Posted March 13, 2017 Share Posted March 13, 2017 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? Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted March 13, 2017 Share Posted March 13, 2017 actully Black and white is a one color 0 0 0 to 255 255 255 so close when you use gradient between them Quote Link to comment Share on other sites More sharing options...
Dad72 Posted March 13, 2017 Share Posted March 13, 2017 How to make white becomes another color? purlpe for exemple Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted March 13, 2017 Share Posted March 13, 2017 i dont understand? Quote Link to comment Share on other sites More sharing options...
Dad72 Posted March 13, 2017 Share Posted March 13, 2017 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. Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted March 13, 2017 Share Posted March 13, 2017 replace color can replace color from reference with material never change reference 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.