solved StandardMaterial and ShaderMaterial Texture Color show different brightness.

[klaude]

Hello!

I'm upgrading my code, StandardMaterial to ShaderMeterial.

my scene colors are

scene.clearColor = new BABYLON.Color3(0,0,0);

scene.ambientColor = new BABYLON.Color3(1,1,1);

and before standardMaterial  initializing is like

mat = new BABYLON.StandardMaterial('material', scene);
mat.ambientColor = new BABYLON.Color3(1,1,1);
mat.diffuseTexture = texture.texture;
mat.opacityTexture = texture.texture;

 

and new shaderMeterial initializing is like

var route = {
	vertex: "custom",
	fragment: "custom",
};
var options = {
	needAlphaBlending : true,
	needAlphaTesting: true,
	attributes: ["position", "normal", "uv"],
	uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"]
};
mat = new BABYLON.ShaderMaterial('shader', scene, route, options);
mat.backFaceCulling = false;
mat.setTexture('map', texture.texture);

 

shader code is below

BABYLON.Effect.ShadersStore["customVertexShader"]=                "precision highp float;\r\n"+
    "// Attributes\r\n"+
    "attribute vec3 position;\r\n"+
    "attribute vec2 uv;\r\n"+
    "attribute vec4 color;\r\n"+

    "// Uniforms\r\n"+
    "uniform mat4 worldViewProjection;\r\n"+

    "// Varying\r\n"+
    "varying vec2 vUv;\r\n"+
    "varying vec4 vColor;\r\n"+

    "void main() {\r\n"+
    "    vUv = uv;\r\n"+
    "    vColor = color;\r\n"+
    "    vec4 p = vec4( position, 1. );\r\n"+
    "    gl_Position = worldViewProjection * p;\r\n"+
    "}\r\n";

  BABYLON.Effect.ShadersStore["customFragmentShader"]=                "precision highp float;\r\n"+

    "varying vec2 vUv;\r\n"+
    "varying vec4 vColor;\r\n"+

    "uniform sampler2D map;\r\n"+

    "void main(void) {\r\n"+
    "    gl_FragColor = texture2D(map, vUv)*vColor;\r\n"+
    "}\r\n";

but results are different.

before vs after

how to make shaderMaterial color like standardMaterial color?

[Blax]

Hi, @klaude !

Perhaps i miss, but in you shader not used specular and emissive factors (some other's factors?), which used by default in Standard Material Shader and change color result for every pixel. M?

 

[klaude]

Hi, @Blax

My project is not usual. mixing 2d and 3d.

so entire meshes use only diffuseTexture, opacityTexture and ambientColor without light.

basically, meshes use StandardMaterial.

and now shaderMaterial is used only for character.

but new trial of shaderMaterial shows lighter color than before.

 

[Guest]

What happens if you do not multiply by vColor?

[klaude]

Hello, @Deltakosh

then, black color turns white.

[Guest]

Can you create a repro on the Playground? It would be easier (please add one with stdmat and one with your mat)

[klaude]

@Deltakosh

it's complicate to create same thing on the Playground, so made simple one.

multiplying vColor makes plane2 disappear.

is it related?

https://playground.babylonjs.com/#H05KJ1

[klaude]

@Deltakosh

My faults.

It's because not vColor and shader.

It's because ImageProcessingPostProcess

 https://playground.babylonjs.com/#H05KJ1#1

 

and now, how to set meshes to have same brightness?

[klaude]

I'm using ImageProcessingPostProcess for brightness of scene.

and configure it with .exposure property.

by default, ImageProcessingPostProcess makes brighter than non-use even set exposure to 1.

in my case it does not affect meshes with ambientColor, under exposure value 1 of postprocess.

and it does affect with exposure less than 1.

it works well before.

but now, shaderMaterial is affected by ImageProcessingPostProcess exposure 1.

https://playground.babylonjs.com/#H05KJ1#3

so, please let me know if there are any method to change brightness of entire scene.

thanks.

 

 

[klaude]

finally, i found the solution with BABYLON.FilterPostProcess.

please let me share, if there is better method or code.

https://playground.babylonjs.com/#H05KJ1#4

 

many thanks

[Guest]

Lol and you found it by yourself so congrats!! I appreciate self solving questions