ShaderBuilder with dynamicTexture

[Dad72]

@NasimiAsl,

I use your ShaderBuilder, and I need advice please:

BABYLONX.ShaderBuilder.InitializeEngine();
var terrainMaterial = new BABYLONX.ShaderBuilder()            
.Map({ path: textureGround })
.Reference(1).Map({ path: 'images/textures/ground_0.png' , uv:'vec2(vuv*10.)' })
.Blue(1, BABYLONX.Helper().Map({ path: 'images/textures/grass_4.jpg' , uv:'vec2(vuv*10.)' }).Build(), {rangeStep:-0.05,rangePower:0.05})
.Red(1, BABYLONX.Helper().Map({ path: 'images/textures/rock_4.jpg' , uv:'vec2(vuv*10.)' }).Build(), {rangeStep:-0.05,rangePower:0.05}) 
.BuildMaterial(global.scene);		

terrain.material = terrainMaterial;
terrain.material.specularColor = new BABYLON.Color3(0.5, 0.5, 0.5);
terrain.material.specularPower = 64;

In line 3: .Map({ path: textureGround })

I would like to use a dynamic texture instead of a path.

var textureGround = new BABYLON.DynamicTexture("DynamicTexture", 1024, scene, true);				
var textureSize = textureGround.getSize();			
var textureContext = textureGround.getContext();

How can I do ?

Thanks

[NasimiAsl]

9 hours ago, Dad72 said:

@NasimiAsl,

I use your ShaderBuilder, and I need advice please:

BABYLONX.ShaderBuilder.InitializeEngine();
var terrainMaterial = new BABYLONX.ShaderBuilder()            
.Map({ path: textureGround })
.Reference(1).Map({ path: 'images/textures/ground_0.png' , uv:'vec2(vuv*10.)' })
.Blue(1, BABYLONX.Helper().Map({ path: 'images/textures/grass_4.jpg' , uv:'vec2(vuv*10.)' }).Build(), {rangeStep:-0.05,rangePower:0.05})
.Red(1, BABYLONX.Helper().Map({ path: 'images/textures/rock_4.jpg' , uv:'vec2(vuv*10.)' }).Build(), {rangeStep:-0.05,rangePower:0.05}) 
.BuildMaterial(global.scene);		

terrain.material = terrainMaterial;
terrain.material.specularColor = new BABYLON.Color3(0.5, 0.5, 0.5);
terrain.material.specularPower = 64;

In line 3: .Map({ path: textureGround })

I would like to use a dynamic texture instead of a path.

var textureGround = new BABYLON.DynamicTexture("DynamicTexture", 1024, scene, true);				
var textureSize = textureGround.getSize();			
var textureContext = textureGround.getContext();

How can I do ?

Thanks

http://www.babylonjs-playground.com/#E6OZX#89

hi

you can use SetUniform for define your new texture or any new uniform

and with .material.setTexture you can set your wanted texture (any kind of texture ) 

and for use This material in Shader Builder use .Map function 

sample

        .SetUniform('dyTexture1','sampler2D')          
        .Map({ index: 'dyTexture1',bias : 2.})
        .Reference(1)
         ...
        .BuildMaterial(scene);


//  set dynamic texture

        var textureGround = new BABYLON.DynamicTexture("DynamicTexture", 1024, scene, true);				
         ground.material.setTexture('dyTexture1',textureGround);
       

 

[Dad72]

Thanks for the advice and the PG

[Dad72]

I have another Nasimi question. I would like to be able to modify the textures after loading and the uvscale. How do you do it please.

I put in bold what I would like to be able to modify after the loading of the ground.

.Blue(1, BABYLONX.Helper().Map({ path: global.elevation.texture1, uv:'vec2(vuv*'+global.elevation.uvScale+')' }).Build(), {rangeStep:-0.48,rangePower:0})
.Red(1, BABYLONX.Helper().Map({ path: global.elevation.texture2, uv:'vec2(vuv*'+global.elevation.uvScale+')' }).Build(), {rangeStep:-0.48,rangePower:0})   
.Green(1, BABYLONX.Helper().Map({ path: global.elevation.texture3, uv:'vec2(vuv*'+global.elevation.uvScale+')' }).Build(), {rangeStep:-0.48,rangePower:0})

And another question, can we add another color after loading loading of ground ?

for exemple:

terrainMaterial.Yellow(1, BABYLONX.Helper().Map({ path: global.elevation.texture4, uv:'vec2(vuv*'+global.elevation.uvScale+')' }).Build(), {rangeStep:-0.48,rangePower:0})

or 

terrainMaterial.add(Yellow(1, BABYLONX.Helper().Map({ path: global.elevation.texture4, uv:'vec2(vuv*'+global.elevation.uvScale+')' }).Build(), {rangeStep:-0.48,rangePower:0}))

I start with ShaderBuilder which seems complex, but incredibly powerful. 

Thanks for help

[NasimiAsl]

http://www.babylonjs-playground.com/#E6OZX#90

you need define another Uniform

for example .SetUniform('scaleTxt','vec3')      

i define Vector 3 because we can manage 3 text scale with that

you can def mat4 for manage 12 parameter with one uniform

but if you just wanna manage 1 you use float

anyway you change that with setUniform

 

[NasimiAsl]

about color replace

let me make a sample for explain full color replace in shader Builder in this post

http://www.babylonjs-playground.com/#E6OZX#92

you just have 8 color    [red,green,blue,cyan,pink,yellow,white,black]  in one reference

you can separated any colors to any Step (0-255  recommend use 0-25 in max) 

so if you use separated color  for all you have 80 color in one reference

you can define others pattern in other reference too and use that too

 after loading you can not change base custom shader but you can redifine your shaderBuilder and add your wanted color for that

if you wanna use this stuff you can use ReplaceColor method

ReplaceColor(index: number, color: number, mat: string, option: IReplaceColor) // for example .ReplaceColor(reference index, BABYLONX.Helper.Blue, ... , option).

this is complicated stuff in ShaderBuilder but try to make sample for fully understand this

 

 

 

[Dad72]

2 hours ago, NasimiAsl said:

you can separated any colors to any Step (0-255  recommend use 0-25 in max) 

I did not understand that. I notice that I have color confusion between blue and cyan that create a mixture of the two textures. I think its two colors are too close.

I also have a confusion between green and black that gives the same texture.

I use all colors disponnible and you can see that the green that should be a texture of rock, gives me sand that is black:

And pink gives a mixture with white.

You can test it here:

http://www.babylon.actifgames.com/TerrainEditor/index.php

 

[NasimiAsl]

check you painting  color value

pink = #FF00FF

cyan =  #00FFFF

Yellow = #FFFF00

red = #FF0000

blue = #0000FF

green = #00FF00

white = #FFFFFF

black = #000000 

 

[Dad72]

pink = #FF00FF (= fuchsia) => #ffc0cb = pink

cyan =  #00FFFF => #00ffff

Yellow = #FFFF00 => #ffff00

red = #FF0000 => #ff0000

blue = #0000FF => #0000ff

green = #00FF00 (= lime) => #008000 = green

white = #FFFFFF => #FFFFFF

black = #000000  => #000000

I have a different color for pink and green. But when I create colors by name, it gives me this result for pink and green.

 

[Dad72]

Your pink color is in fact 'fuchsia'
And your green color is actually 'lime'

[NasimiAsl]

i know but you most set it 00ff00 and ff00ff

[Dad72]

Ok, this perfect :

For edges how to remove to create a fade?

[NasimiAsl]

{rangeStep: [ for control fade  -0.49  ..  0.49 ] , rangePower: [ control opacity -1. ..  1.] }

[Dad72]

Ok, thanks Nasimi

[Dad72]

@NasimiAsl, I have one last problem that I do not get. When I load the terrain with the ShaderBuilder material and its 8 defined textures. I can not change textures for one of the 8 textures.

I try to make dispose() on the material, assign another textures and then reload the shaderBuilder, but it does not work.

I would like to be able to redefine a textures after loading, how to do it?

Or how to redefine the path of an image in a SetUniform('pathvar', ???) . sampler2D is for new BABYLON.Texture. But for the "Path", I do not know.

Thanks 

[NasimiAsl]

http://www.babylonjs-playground.com/#E6OZX#93

any dynamic changes most be define by SetUniform

[Dad72]

Ok, that's the way I thought, but I imagined there might be another way to redefine only the path of the textures.

So I will do that. Thanks Nasimi for your help with ShaderBuilder.