BABYLONX
Namespace of Babylonjs Extensions.
BABYLONX.ShaderBuilder
Javascript function (Fluent interface) For Make
Shader (vertex and Fragment) | String Builder
implemanted for BabylonJs
implemanted for BabylonJs
ShaderBuilder Usage Terms
we need define some terms we used in shader
1. shader string | string with part of c language we used in shader
2. shader string : vec4 | for define a vector4 {x,y,z,w} or {r,g,b,a} | 'vec4(0.)' or 'result'
3. shader string : vec3 | for define a vector3 {x,y,z} or {r,g,b} | 'vec3(0.)' or 'vuv' or 'vuv * sin(time)'
4. shader string : vec2 | for define a vector2 {x,y} | 'vec2(0.)' or 'vuv' or 'vuv * sin(time)'
5. shader string : float | float number * use always . in your output | '0.' or '.1' or '0.1'
6. string result part of source you make with shader language and need fill result variable
result is a vec4 varialbe and definded befor you source and all methods use that like resource of before
samples : 'result = vec4(1.,0.,0.,1.);' or 'float v = noise(pos);result = vec4(vec3(v),1.);'
7. Fluent Usage learn
2. shader string : vec4 | for define a vector4 {x,y,z,w} or {r,g,b,a} | 'vec4(0.)' or 'result'
3. shader string : vec3 | for define a vector3 {x,y,z} or {r,g,b} | 'vec3(0.)' or 'vuv' or 'vuv * sin(time)'
4. shader string : vec2 | for define a vector2 {x,y} | 'vec2(0.)' or 'vuv' or 'vuv * sin(time)'
5. shader string : float | float number * use always . in your output | '0.' or '.1' or '0.1'
6. string result part of source you make with shader language and need fill result variable
result is a vec4 varialbe and definded befor you source and all methods use that like resource of before
samples : 'result = vec4(1.,0.,0.,1.);' or 'float v = noise(pos);result = vec4(vec3(v),1.);'
7. Fluent Usage learn
BABYLONX.ShaderBuilder().InitializeEngine();
!requirment :
you need call this Like static Method befor you starting material builder
new BABYLONX.ShaderBuilder().[ Fluent Usage ].BuildMaterial(scene);
!Finished Fluent interface
this return a shaderMaterial and Prepare all Material Need (uniforms , samplers , etc )
this method Make a shaderMaterial in ShaderStore Array
this method Make a shaderMaterial in ShaderStore Array
parameters
| Name | Type | Description |
|---|---|---|
| scene !requirment | scene | BabylonJS scene |
BABYLONX.Helper().[ Fluent Usage ].Build()
Helper() method Used Deep Side Of Fluent Usage.
When We Need Make New Fluent Struct And Use it Like Parameter for Current Method we Used this.
sample : new BABYLONX.ShaderBuilder().Multi([
BABYLONX.Helper().Solid({r:1}).Build(),
BABYLONX.Helper().Solid({g:1}).Build()])
.BuildMaterial(scene);
When We Need Make New Fluent Struct And Use it Like Parameter for Current Method we Used this.
sample : new BABYLONX.ShaderBuilder().Multi([
BABYLONX.Helper().Solid({r:1}).Build(),
BABYLONX.Helper().Solid({g:1}).Build()])
.BuildMaterial(scene);
BABYLONX.Helper().[ Fluent Usage ].Build();
!Finished Fluent interface
return 'string result' see ShaderBuilder Terms
this method Make a Inner Source and return string
this method Make a Inner Source and return string
new BABYLONX.ShaderBuilder().[ ].Event(index, material).[ ]
we can define 20 flag (for control) AND set it by
mesh.material.flagUp(flagNumber) and .flagDown(flagNumber)
this method make your wanted material when index flag is Up .
method used only in fragment shader
.Solid({r:1}) // Default Material
.Event(1, // flag Number
BABYLONX.Helper() // Deep Start Fluent
.Solid({g:1})// Hover Material
.Build())// Build Result
.BuildMaterial(scene);// Build Shader
mesh.material.flagUp(1);// Call When You Want See Hover Material
mesh.material.flagDown(1);// Call When You Want See Default Material
this method make your wanted material when index flag is Up .
method used only in fragment shader
parameters
| Name | Type | Description |
|---|---|---|
| index !requirment | integer Number | 1 to 20 flag |
| material !requirment | material | the event material 'string result' see ShaderBuilder Terms |
Sample For Hover
mesh.material = new BABYLONX.ShaderBuilder().Solid({r:1}) // Default Material
.Event(1, // flag Number
BABYLONX.Helper() // Deep Start Fluent
.Solid({g:1})// Hover Material
.Build())// Build Result
.BuildMaterial(scene);// Build Shader
mesh.material.flagUp(1);// Call When You Want See Hover Material
mesh.material.flagDown(1);// Call When You Want See Default Material
new BABYLONX.ShaderBuilder().[ ].EventVertex(index, material).[ ]
we can define 20 flag (for control) AND set it by
mesh.material.flagUp(flagNumber) and .flagDown(flagNumber)
this method make your wanted material when index flag is Up .
method used only in vertex shader
.Solid({r:1}) // Default Material
.VertexShader('result = vec4(pos,1.);') // Default Vertex Definition
.EventVertex(1, // flag Number
BABYLONX.Helper() // Deep Start Fluent
.InLine('result = vec4(pos+nrm*2.,1.);')// Hover Material
.Build())// Build Result
.BuildMaterial(scene);// Build Shader
mesh.material.flagUp(1);// Call When You Want See Hover Material
mesh.material.flagDown(1);// Call When You Want See Default Material
this method make your wanted material when index flag is Up .
method used only in vertex shader
parameters
| Name | Type | Description |
|---|---|---|
| index !requirment | integer Number | 1 to 20 flag |
| material !requirment | material | the event material 'string result' see ShaderBuilder Terms |
Sample For Hover
mesh.material = new BABYLONX.ShaderBuilder().Solid({r:1}) // Default Material
.VertexShader('result = vec4(pos,1.);') // Default Vertex Definition
.EventVertex(1, // flag Number
BABYLONX.Helper() // Deep Start Fluent
.InLine('result = vec4(pos+nrm*2.,1.);')// Hover Material
.Build())// Build Result
.BuildMaterial(scene);// Build Shader
mesh.material.flagUp(1);// Call When You Want See Hover Material
mesh.material.flagDown(1);// Call When You Want See Default Material
new BABYLONX.ShaderBuilder().[ ].VertexShader(material).[ ]
For Define Vertex Position in Vertex Shader
.Wired()
.Solid({r:1}) // Default Material
.VertexShader('pos = r_y(pos,time*0.01,vec3(0.)); result = vec4(pos,1.);') // Default Vertex Definition And Rotate around y
.BuildMaterial(scene);// Build Shader
parameters
| Name | Type | Description |
|---|---|---|
| material !requirment | material | the 'string result' see ShaderBuilder Terms |
Sample For Vertex , Wired , Rotation Vertex
mesh.material = new BABYLONX.ShaderBuilder().Wired()
.Solid({r:1}) // Default Material
.VertexShader('pos = r_y(pos,time*0.01,vec3(0.)); result = vec4(pos,1.);') // Default Vertex Definition And Rotate around y
.BuildMaterial(scene);// Build Shader
new BABYLONX.ShaderBuilder().[ ].Wired().[ ]
Show Wired Mode
you Just Need Used One Time in All Level Fluent Usage
you Just Need Used One Time in All Level Fluent Usage
new BABYLONX.ShaderBuilder().[ ].Transparency().[ ]
Enable Transparency Mode for Material
you Just Need Used One Time in All Level Fluent Usage
you Just Need Used One Time in All Level Fluent Usage
new BABYLONX.ShaderBuilder().[ ].Back(material).[ ]
For Define Back Face Material
parameters
| Name | Type | Description |
|---|---|---|
| material | material | the 'string result' see ShaderBuilder Terms if You dont set last result used for Back Face |
new BABYLONX.ShaderBuilder().[ ].Front(material).[ ]
Front Face Defined By Default But You Can Manage That From This
Special Usage for Hide Front Face You Just Need Set Material like 'discard;' For Define Back Face Material
Special Usage for Hide Front Face You Just Need Set Material like 'discard;' For Define Back Face Material
parameters
| Name | Type | Description |
|---|---|---|
| material | material | the 'string result' see ShaderBuilder Terms if You dont set last result used for Front Face |
new BABYLONX.ShaderBuilder().[ ].InLine(material).[ ]
Useful method For Make your custom shader in here.
if you can fill 'result' variable in your custom shader after this method result set like Inline Method
.Back('if(nrm.x > 0.) discard;') // Hide Back Single Face
.Front(' discard;') // hid Front All Face
.Light({ phonge: 1.,specular:18, normal:BABYLONX.Normals.Flat, direction: 'camera' })
.Transparency()
.InLine('result = vec4( length(result.xyz)/3.);') // change last result
.BuildMaterial(scene); // Build Shader
if you can fill 'result' variable in your custom shader after this method result set like Inline Method
parameters
| Name | Type | Description |
|---|---|---|
| material !requirment | material | the 'string result' see ShaderBuilder Terms |
Sample For Inline , Back , Front , Transparency
mesh.material = = new BABYLONX.ShaderBuilder() .Solid({r:1}) // Default Material.Back('if(nrm.x > 0.) discard;') // Hide Back Single Face
.Front(' discard;') // hid Front All Face
.Light({ phonge: 1.,specular:18, normal:BABYLONX.Normals.Flat, direction: 'camera' })
.Transparency()
.InLine('result = vec4( length(result.xyz)/3.);') // change last result
.BuildMaterial(scene); // Build Shader
new BABYLONX.ShaderBuilder().[ ].Multi(mats, combine).[ ]
Useful method For combine or Mix Materials
BABYLONX.Helper().Solid({r:1}).Build(),
BABYLONX.Helper().Solid({g:1}).Build()])
.BuildMaterial(scene);
parameters
| Name | Type | Description |
|---|---|---|
| mats !requirment | array string or struct |
the 'string result' see ShaderBuilder Terms ['mat1','mat2',...] or [{result:'mat1',opacity:0.} , 'mat2' ,...] |
| combine | boolean | combine materials or Mix Materials |
Sample For Multi
mesh.material = new BABYLONX.ShaderBuilder().Multi([BABYLONX.Helper().Solid({r:1}).Build(),
BABYLONX.Helper().Solid({g:1}).Build()])
.BuildMaterial(scene);
new BABYLONX.ShaderBuilder().[ ].Range(material1, material2, option).[ ]
Useful method For Control Range or Mix Materials
BABYLONX.Helper().Solid({r:1}).Build(),
BABYLONX.Helper().Map({ path:'imagepath' }).Build() ,{start:1.5,end:-1.5,direction:'pos.x'})
.BuildMaterial(scene);
parameters
| Name | Type | Description |
|---|---|---|
| material1 | material | the 'string result' see ShaderBuilder Terms |
| material2 | material | the 'string result' see ShaderBuilder Terms |
| option | IRange |
interface IRange { start: float shader string ; end: float shader string; direction: float shader string; } |
Sample For Range
mesh.material = new BABYLONX.ShaderBuilder().Range(BABYLONX.Helper().Solid({r:1}).Build(),
BABYLONX.Helper().Map({ path:'imagepath' }).Build() ,{start:1.5,end:-1.5,direction:'pos.x'})
.BuildMaterial(scene);
new BABYLONX.ShaderBuilder().[ ].Reference(index, material).[ ]
Useful method For Keep Your Result Material In A Reference And You Can Use That For Change Color(Replace Color)
See Sample In ColorReplace
See Sample In ColorReplace
parameters
| Name | Type | Description |
|---|---|---|
| index !requirment | Integer number | you need when you want change color |
| material | material | the 'string result' see ShaderBuilder Terms if you set it null your last result referenced in index |
new BABYLONX.ShaderBuilder().[ ].ReplaceColor(index, color, material, option).[ ]
new BABYLONX.ShaderBuilder().[ ].Red(index, material, option).[ ]
new BABYLONX.ShaderBuilder().[ ].Green(index, material, option).[ ]
new BABYLONX.ShaderBuilder().[ ].Blue(index, material, option).[ ]
new BABYLONX.ShaderBuilder().[ ].Cyan(index, material, option).[ ]
new BABYLONX.ShaderBuilder().[ ].Yellow(index, material, option).[ ]
new BABYLONX.ShaderBuilder().[ ].Pink(index, material, option).[ ]
new BABYLONX.ShaderBuilder().[ ].White(index, material, option).[ ]
new BABYLONX.ShaderBuilder().[ ].Black(index, material, option).[ ]
you Can Replace any Color to Your wanted material with This Method You Most Reference Your Result Befor Use This
We Defined All Kind of Color You can Replace ( 8 Color red,green,blue,cyan,pink,yellow,white,black )
.Map({ path: 'imagePath1' }) // Make a Material
.Reference(1) // reference last material to index 1
.Red(1, BABYLONX.Helper().Solid({ g: 1 }).Build()) // replace red referenced color to green color
.Black(1, BABYLONX.Helper().Solid({ g: 1 , b:1 }).Build()) // replace Black referenced color to cyan
.BuildMaterial(scene);
.Map({ path: 'imagePath1' })
.Reference(1)
.Event(1, // hover
BABYLONX.Helper().Red(1,
BABYLONX.Helper()
.Map({ path: 'imagepath2', scaleX: 3., scaleY: 3 })
.Reference(2)
.Red(2,
BABYLONX.Helper()
.Map({ path: 'imagepath3', scaleX: 9., scaleY: 9 })
.Reference(3)
.Red(3,
BABYLONX.Helper()
.Map({ path: 'imagepath3', scaleX: 9., scaleY: 9 })
.Build())
.Build())
.Build())
.Build()).BuildMaterial(scene);
We Defined All Kind of Color You can Replace ( 8 Color red,green,blue,cyan,pink,yellow,white,black )
parameters
| Name | Type | Description |
|---|---|---|
| index | referenced index | |
| color | color Name (recommand Use Other Methods we Define All Color Type) | the solid color |
| material | material | the reference-target material |
| option | IReplaceColor interface |
interface IReplaceColor { rangeStep: any, // you can select color Step, this is between -0.488 and 0.488 rangePower: any,// you can select color Opacity when that wanna set aterial Power, this is between -0.488 and 0.488 colorIndex: number, // advance Usage you can use that for devided your color this is your Color Index colorStep: number, // advance Usage you can use that for devided your color all Your Color Devided Parts indexToEnd: boolean, // advance Usage you can use that for devided your color Fill To end } |
Sample For Range
mesh.material = new BABYLONX.ShaderBuilder().Map({ path: 'imagePath1' }) // Make a Material
.Reference(1) // reference last material to index 1
.Red(1, BABYLONX.Helper().Solid({ g: 1 }).Build()) // replace red referenced color to green color
.Black(1, BABYLONX.Helper().Solid({ g: 1 , b:1 }).Build()) // replace Black referenced color to cyan
.BuildMaterial(scene);
Sample For Reference and Deep Fluent
mesh.material = new BABYLONX.ShaderBuilder().Map({ path: 'imagePath1' })
.Reference(1)
.Event(1, // hover
BABYLONX.Helper().Red(1,
BABYLONX.Helper()
.Map({ path: 'imagepath2', scaleX: 3., scaleY: 3 })
.Reference(2)
.Red(2,
BABYLONX.Helper()
.Map({ path: 'imagepath3', scaleX: 9., scaleY: 9 })
.Reference(3)
.Red(3,
BABYLONX.Helper()
.Map({ path: 'imagepath3', scaleX: 9., scaleY: 9 })
.Build())
.Build())
.Build())
.Build()).BuildMaterial(scene);