Shininess problem in fragment shader

Questions
1

Hello All,

I am new in threejs. I have implemented fragment shader below is the code. I want to add more shininess like 100 in my object. I tried lot but shininess is not reflecting. Can you check and let me know is there any calcuations or something is wrong.

float shininess = 100.0;

vec3 rgb = color0;
	
rgb = mix(rgb, color1, t1);
rgb = mix(rgb, color2, t2);
rgb = mix(rgb, color3, t3);
rgb = mix(rgb, color4, t4);
	
vec3 n = normalize(Normal);
vec3 s = normalize(vec3(LightPosition) - Position);
vec3 v = normalize(vec3(-Position));
vec3 r = reflect(-s, n);

vec3 ambient = Ka;
vec3 diffuse = Kd * max(dot(s, n), 0.0);
vec3 specularNew = Ks * pow(max(dot(r, v), 0.0), shininess);
vec3 result = LightIntensity * (ambient + diffuse + specularNew);

result += rgb.xyz; // (NOTE: There is some problems here. i don't understand how i can calculate the result variable with rgb)
gl_FragColor = vec4(rgb , 1.0 - cos(normal3.x) + 0.6);
2

Could you please share a codepen or jsfiddle with all uniforms and variables in place? It may be a bit easier to find the issue then.

3

Below are Uniforms

this.material = new THREE.ShaderMaterial({
uniforms: {
tOverlay: {type: “t”, value: this.shellModel.overlay},
tMask1: {type: “t”, value: this.shellModel.layers[1].mask},
tMask2: {type: “t”, value: this.shellModel.layers[2].mask},
tMask3: {type: “t”, value: this.shellModel.layers[3].mask},
tMask4: {type: “t”, value: this.shellModel.layers[4].mask},
tNormal2: {type: “t”, value: tNormal2},
tShellCustom: {type: “f”, value: shell_custom_info},
tShininess: {type: “f”, value: shell_shininess},
tNormalScale: {type: “f”, value: shell_normal_scale},
tShellSpecular: {type: “f”, value: shell_specular},
Ka: { value: new THREE.Vector3(0.9, 0.5, 0.3) },
Kd: { value: new THREE.Vector3(0.9, 0.5, 0.3) },
Ks: { value: new THREE.Vector3(0.8, 0.8, 0.8) },
LightPosition: { value: new THREE.Vector4(0.0, 2000.0, 0.0, 1.0) },
LightIntensity: { value: new THREE.Vector4(0.5, 0.5, 0.5, 1.0) },

            mGradient: {type: "m4"},

            colorA0: {type: "c"},
            colorA1: {type: "c"},
            colorA2: {type: "c"},
            colorA3: {type: "c"},
            colorA4: {type: "c"},

            highlight0: {type: "f"},
            highlight1: {type: "f"},
            highlight2: {type: "f"},
            highlight3: {type: "f"},
            highlight4: {type: "f"},

            overlay0: {type: "f", value:0},
            overlay1: {type: "f", value:0},
            overlay2: {type: "f", value:0},
            overlay3: {type: "f", value:0},
            overlay4: {type: "f", value:0},

            colorB0: {type: "c"},
            colorB1: {type: "c"},
            colorB2: {type: "c"},
            colorB3: {type: "c"},
            colorB4: {type: "c"},
        },

Below is void main function for fragment shader

float gradient = clamp((mGradient * vec4(vUv, 0, 1)).x, 0.0, 1.0);

float tOverlay = texture2D( tOverlay, vUv).r;
vec3 normal = normalize( vNormal );

vec3 viewDir = normalize( vViewPosition );

vec3 normal3 = perturbNormal2Arb(tNormal2, -vViewPosition, normal,vec2(-tNormalScale, -tNormalScale) , 9.0);

vec3 specular = vec3(tShellSpecular, tShellSpecular, tShellSpecular);
vec3 totalSpecularLight = vec3( 0.0 );

vec3 lightDir = normalize(vec3(-1.0, 1.0, -1.0));
vec3 lightColor = vec3(1.0, 1.0, 1.0);
float cosineTerm = cos(saturate( dot( normal, lightDir ) ));
vec3 brdf = BRDF_BlinnPhong( specular, tShininess, normal, lightDir, viewDir );

totalSpecularLight += brdf * specular * lightColor * cosineTerm;

vec3 lightDir1 = normalize(vec3(0, 0.25, 1.0));
float lambert1 = saturate( dot( normal3, lightDir1 ) );
float cosineTerm1 = saturate(sin(lambert1 * 12.6));

//smooth curve to avoid hard corners
gradient = exp(-4.0 * pow(gradient, 3.0));

vec3 colorHighlight0 = vec3(1, 1, 1) * ease(highlight0);
vec3 colorHighlight1 = vec3(1, 1, 1) * ease(highlight1);
vec3 colorHighlight2 = vec3(1, 1, 1) * ease(highlight2);
vec3 colorHighlight3 = vec3(1, 1, 1) * ease(highlight3);
vec3 colorHighlight4 = vec3(1, 1, 1) * ease(highlight4);

//create gradient
vec3 color0 = mix(colorA0, colorB0, gradient) + colorHighlight0;
vec3 color1 = mix(colorA1, colorB1, gradient) + colorHighlight1;
vec3 color2 = mix(colorA2, colorB2, gradient) + colorHighlight2;
vec3 color3 = mix(colorA3, colorB3, gradient) + colorHighlight3;
vec3 color4 = mix(colorA4, colorB4, gradient) + colorHighlight4;

//add overlays
color0 = mix(color0, vec3(overlay0), tOverlay);
color1 = mix(color1, vec3(overlay1), tOverlay);
color2 = mix(color2, vec3(overlay2), tOverlay);
color3 = mix(color3, vec3(overlay3), tOverlay);
color4 = mix(color4, vec3(overlay4), tOverlay);

//lookup masks
float t1 = texture2D( tMask1, vUv).r;
float t2 = texture2D( tMask2, vUv).r;
float t3 = texture2D( tMask3, vUv).r;
float t4 = texture2D( tMask4, vUv).r;

//mix colors over maks
vec3 rgb = color0;

rgb = mix(rgb, color1, t1);
rgb = mix(rgb, color2, t2);
rgb = mix(rgb, color3, t3);
rgb = mix(rgb, color4, t4);

vec3 n = normalize(Normal);
vec3 s = normalize(vec3(LightPosition) - Position);
vec3 v = normalize(vec3(-Position));
vec3 r = reflect(-s, n);

vec3 ambient = Ka;
vec3 diffuse = Kd * max(dot(s, n), 0.0);
vec3 specularNew = Ks * pow(max(dot(r, v), 0.0), 100.0);
vec3 result = LightIntensity * (ambient + diffuse + specularNew);

if (tShellCustom > 0.5)
{
	totalSpecularLight += rgb.xyz;
	gl_FragColor = vec4(totalSpecularLight , 1.0 - cos(normal3.x) + 0.6);
}
else
{
	gl_FragColor = vec4(rgb, 1);
}
4

I meant, like, a runnable sample for debugging. :’) (here’s a tiny shader boilerplate in codepen you can to plug the code into.)

5

It’s a magento dynamic website page so i am not be able to add that in codepen.