Custom shader behaves differently on WebGL deployment (correct) and editor view (incorrect)

I started working on shaders and lighting on Unity3D 5.2.1f1. I set up a scene where the sun object rotates the directional light (the only light in the scene) based on its position to simulate a light object orbiting around the model object while rotating the directional light accordingly.

screenshot1

Here, I have implemented Phong reflection model by writing the custom shader below.

Shader ".Tutorial/Phong"
{
	Properties
	{
		_Diffuse("Diffuse Color", Color) = (1, 1, 1, 1)
		_Specular("Specular Color", Color) = (1,1,1,1)
		_Ka("Ambient Light", Vector) = (0.3, 0.3, 0.3)
		_Shininess("Shininess", Float) = 1000
	}

	SubShader
	{
		Pass
		{
		CGPROGRAM
		#pragma vertex vert	
		#pragma fragment frag

		struct appdata
		{
			float4 vertex : POSITION;
			float3 normal : NORMAL;
			float2 texcoord : TEXCOORD0;
		};

		struct v2f
		{
			float4 pos : SV_POSITION;
			float3 normal : NORMAL;
			float2 texcoord: TEXCOORD0;
		};

		fixed4 _Diffuse;
		fixed4 _Specular;
		float4 _LightColor0;
		float4 _Ka;
		float _Shininess;

		v2f vert(appdata IN)
		{
			v2f OUT;
			OUT.pos = mul(UNITY_MATRIX_MVP, IN.vertex);
			OUT.texcoord = IN.texcoord;
			OUT.normal = mul(float4(IN.normal, 0.0), _Object2World).xyz; 
			return OUT;
		}

		fixed4 frag(v2f IN) : COLOR
		{
			float3 N = normalize(IN.normal);
			float3 L = normalize(_WorldSpaceLightPos0);
			float3 V = normalize(_WorldSpaceCameraPos - IN.pos.xyz);
			float3 R = 2 * max(0.0, dot(N, L)) * N - L;

			float4 Kd = _Diffuse * max(0.0, dot(N, L));
			float4 Ks = _Specular * pow( max(0.0, dot(R, V)) , _Shininess);

			float4 Illumination = Kd + Ks + _Ka;

			return _LightColor0*Illumination;
		}

		ENDCG
		}
	}
}

Here’s the issue: This shader works correct on the WebGL deployment but
looks like this in the editor scene and play views.

screenshot2

You can see the specular component is far off in the scene/play view in the Editor, but is right on the WebGL deployment.

If you want to give yourselves a try here are the links to


What causes this? How can I begin to debug such an issue? Anyone experienced this before?

To me this line doesn’t make sense:

float3 L = normalize(_WorldSpaceLightPos0);

“_WorldSpaceLightPos0” is a position relative to the world origin. normalizing it gives you the direction from the origin to the light source.

Further more this line:

float3 V = normalize(_WorldSpaceCameraPos - IN.pos.xyz);

also seems to be wrong. At least since you use pos here. “pos” is already in viewport coordinates since it got multiplied by the MVP matrix. However you would need the worldspace position of the fragment as well. So you have to pass another “pos” to the fragment shader which should contain the world position of the fragment.

The reason why it seemingly works in the WebGL build “could be” that the shader is somehow not supported and Unity uses a fallback shader which does display correctly. Have you tried putting a hardcoded constant color into the shader and see if you actually see that color in the webGL build?