How to change mesh material to gray

[HenryPeng]

Hi, people. I have two problems.

(1) I want to make a mesh change its material color for gray, As a colorful person is changed to gray one. Maybe "Dude" can be used to be an example. I hope to change him .

(2)I want to put another material with a texture on a mesh, fix the material or add it?

Should I write a shader for it? then how should I do?

[aWeirdo]

Hi @HenryPeng

if the mesh doesn't have a material,

do;

mesh.material = new BABYLON.StandardMaterial('myMaterial', scene);

then;

mesh.material.diffuseColor = BABYLON.Color3.Grey();

 

More information can be found in the docs: http://doc.babylonjs.com/tutorials/Materials

[HenryPeng]

Here is the Dude ,  http://www.babylonjs-playground.com/#11BH6Z#103

,Make him gray please!

[HenryPeng]

55 minutes ago, aWeirdo said:

Hi @HenryPeng

if the mesh doesn't have a material,

do;

mesh.material = new BABYLON.StandardMaterial('myMaterial', scene);

then;

mesh.material.diffuseColor = BABYLON.Color3.Grey();

 

More information can be found in the docs: http://doc.babylonjs.com/tutorials/Materials

Hi, @aWeirdo,

haha, I hnow that , I want to make a mesh with material gray.  Dude is given out, change him

[aWeirdo]

@HenryPeng

mesh.material.diffuseColor = BABYLON.Color3.Grey();  does that..

[HenryPeng]

4 minutes ago, aWeirdo said:

@HenryPeng

mesh.material.diffuseColor = BABYLON.Color3.Grey();  does that..

I have tried it , but it doesn't work well.

[aWeirdo]

@HenryPeng Sorry, i forgot babylon spells it with an a, not an e. e.g. Gray instead of Grey.

But the dude is also made out of child meshes, the parent mesh is "empty".

here you go;

http://www.babylonjs-playground.com/#11BH6Z#105

 

If you want another shade of grey, you can change;

"BABYLON.Color3.Gray();"

to

"new BABYLON.Color3(0.2, 0.2, 0.2);"

//How it works; ( Red, Green, Blue)  Ranges from 0 to 1, so 0 = 0 in rgb value, 1 = 255 in rgb value.

http://www.babylonjs-playground.com/#11BH6Z#106

[HenryPeng]

13 hours ago, aWeirdo said:

@HenryPeng Sorry, i forgot babylon spells it with an a, not an e. e.g. Gray instead of Grey.

But the dude is also made out of child meshes, the parent mesh is "empty".

here you go;

http://www.babylonjs-playground.com/#11BH6Z#105

 

If you want another shade of grey, you can change;

"BABYLON.Color3.Gray();"

to

"new BABYLON.Color3(0.2, 0.2, 0.2);"

//How it works; ( Red, Green, Blue)  Ranges from 0 to 1, so 0 = 0 in rgb value, 1 = 255 in rgb value.

http://www.babylonjs-playground.com/#11BH6Z#106

Hi, @aWeirdo,

The example you gived has lost its texture, I hope it can save its texture and change gray to let it looks like a Black and white photo but not only one color photo.

[NasimiAsl]

for that you need make Custom Shader and you lost auto generated standard shader

but it is possible with postprocess too (it is not optimized plan )

http://www.babylonjs-playground.com/#11BH6Z#143

the other plan is you clone standard material (with all uniform and attribute ) and create a custom shader exactly like standard material and change your last color  ( need complicated hack code for this time ) 

[aWeirdo]

@HenryPeng 

In that case, you want to change the color saturation of the texture, not the color of the material  

Which is currently not possible to do live, without using a shader, as NasimiAsl did above.

The simplest solution however would be to change the saturation of the texture files in a image editor and use those texture.

[JCPalmer]

There is a postProcess which does the whole scene in the repo.  Maybe the fragment shader could be re-purposed to do only one mesh.  This is not my strongest area, but no one has specifically mentioned this & I have used it.  Think it looks better.

[NasimiAsl]

in my sample i just make grey a dude mesh and other scene still have current color

 

[Pryme8]

Just change the shaders color to vec4(color.r, color.r*0.8, color*0.6, 1.); 

on the output for a standard texture image shader and just mess with those values!

[Nabroski]

Noting against ShaderBuilder, or PostProcesses

I'm just playing around

http://www.babylonjs-playground.com/#11BH6Z#147

[HenryPeng]

3 minutes ago, Nabroski said:

Noting against ShaderBuilder, or PostProcesses

I'm just playing around

http://www.babylonjs-playground.com/#11BH6Z#147

I won't change light or camera, just change on mesh

[Nabroski]

http://www.babylonjs-playground.com/#11BH6Z#148

[NasimiAsl]

as i say just have 2 plan :

1 : Postprocess with Rendertarget

2. : Clone standard material (with all uniform and attribute ) and create a custom shader exactly like standard material and change your last color  

 or make new Changes in standard Material  

if i wrong  i like to know more about that 

 

[Pryme8]

I really don't have time today for much but this is super easy so I'll hop on cyos after my coffee and demonstrate.

[Pryme8]

http://www.babylonjs.com/cyos/#1EDLOM#1

    float luminance = dot(texture2D(textureSampler, vUV).rgb, vec3(0.3, 0.59, 0.11));
    gl_FragColor = vec4(luminance, luminance, luminance, 1.0);

would prolly work as well though...


Actually we are dumb... the black and white shader already does this, a dot product is the way to go... thats so simple and fast, and you could easily add color shifts.

[NasimiAsl]

that cool i use  this gl_FragColor = vec4(vec3( length( color.xyz ) ) ,1.); 

[Pryme8]

that's the fastest solution yet, but the least tailor-able.

[iiceman]

@HenryPeng If you don't like shaders you could modify the texture that the object uses. Just use your PhotoShop or wahtever you like to use and greyscale the textures. Then load the grey textures instead of the original ones. Of course you can switch textures at runtime, too (if you need the have it colored at one time and grey at another). 

And if you don't have the textures prepared yet (for what so ever reason) you can convert them to a dynamic texture and grey scale it on runtime:

http://www.html5canvastutorials.com/advanced/html5-canvas-grayscale-image-colors-tutorial/
https://doc.babylonjs.com/classes/2.4/DynamicTexture
http://p215008.mittwaldserver.info/space_paint/
http://www.babylonjs-playground.com/#9U086#4

Good luck!

 

[Sebavan]

No need for devs here :-)

Color Curves have been added in the standard material for such cases:

http://www.babylonjs-playground.com/#11BH6Z#158

Lookup table are also available if preferred in a special channel called cameraColorGradingTexture (I did not have black and white so I used red for demo purpose):

http://www.babylonjs-playground.com/#11BH6Z#159

The documentation for curves and LUT is working for both standard and PBR and is available here : http://doc.babylonjs.com/overviews/Physically_Based_Rendering_Master#camera-controls-color-grading-and-color-curves

 

[HenryPeng]

On 2016/10/28 at 4:14 PM, Sebavan said:

No need for devs here :-)

Color Curves have been added in the standard material for such cases:

http://www.babylonjs-playground.com/#11BH6Z#158

Lookup table are also available if preferred in a special channel called cameraColorGradingTexture (I did not have black and white so I used red for demo purpose):

http://www.babylonjs-playground.com/#11BH6Z#159

The documentation for curves and LUT is working for both standard and PBR and is available here : http://doc.babylonjs.com/overviews/Physically_Based_Rendering_Master#camera-controls-color-grading-and-color-curves

 

I think ColorCurves mybe a good way,

But I try to change it between color and black-and-white. it doesn't work wel, just change once.. And it also brings some errors

http://www.babylonjs-playground.com/#11BH6Z#163

[iiceman]

Try something like that: http://www.babylonjs-playground.com/#11BH6Z#164 Just change the curve.GlobalSaturation. No need to go trough all the materials again.

Edit: or a bit smoother: http://www.babylonjs-playground.com/#11BH6Z#165