# Unity — 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.

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
}

{
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.

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?

• Looks like you're transforming the normals incorrectly. See how the matrix goes in the first argument for the position? It should be the same for the normal (matrix multiplication is non-commutative so order matters). No idea why this would show correctly in one of the players though, unless it's falling back on another shader somehow. – DMGregory Oct 18 '15 at 12:48

The problem is that IN.pos is not in world space. I think you need to do something like

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

v2f vert(appdata IN)
{
v2f OUT;
OUT.pos = mul(UNITY_MATRIX_MVP, IN.vertex);
OUT.posWorldSpace = mul(_Object2World, 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.xyz);
float3 V = normalize(_WorldSpaceCameraPos.xyz-IN.posWorldSpace.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;
}

• That's it. Thanks. I forgot that I converted position to screen coords. I couldn't figure out why WebGL works correct even though shader is at fault tho. – Varaquilex Oct 19 '15 at 11:41