# Contact hardening shadow error in chrome x android

**URL:** https://forum.babylonjs.com/t/contact-hardening-shadow-error-in-chrome-x-android/10511
**Category:** Bugs
**Created:** [May 3, 2020, 4:27pm UTC](https://forum.babylonjs.com/t/contact-hardening-shadow-error-in-chrome-x-android/10511 "2020-05-03T16:27:59Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![paoloz](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@paoloz](https://forum.babylonjs.com/u/paoloz)
#### Post date: [May 3, 2020, 4:27pm UTC](https://forum.babylonjs.com/t/contact-hardening-shadow-error-in-chrome-x-android/10511/1 "2020-05-03T16:27:59Z")

</div>

Hi guys, I love babylon.js and his community. Thanks in advance for any help about my problem.

In my project, i use Contact hardening shadow, but a problem with android chrome is stopping me.

You can see this problem in even in your simple sample PG from doc [https://playground.babylonjs.com/#B48X7G#2](https://playground.babylonjs.com/#B48X7G#2)

if this PG is called in chrome for android, it doesn’t run, and if inspected with remote console, this is the content:

Babylon.js v4.2.0-alpha.12 - WebGL2  
babylon.js:16 BJS - [17:49:17]: Unable to compile effect:  
e.\_ErrorEnabled @ babylon.js:16  
babylon.js:16 BJS - [17:49:17]: Uniforms: world, view, viewProjection, vEyePosition, vLightsType, vAmbientColor, vDiffuseColor, vSpecularColor, vEmissiveColor, visibility, vFogInfos, vFogColor, pointSize, vDiffuseInfos, vAmbientInfos, vOpacityInfos, vReflectionInfos, vEmissiveInfos, vSpecularInfos, vBumpInfos, vLightmapInfos, vRefractionInfos, mBones, vClipPlane, vClipPlane2, vClipPlane3, vClipPlane4, vClipPlane5, vClipPlane6, diffuseMatrix, ambientMatrix, opacityMatrix, reflectionMatrix, emissiveMatrix, specularMatrix, bumpMatrix, normalMatrix, lightmapMatrix, refractionMatrix, diffuseLeftColor, diffuseRightColor, opacityParts, reflectionLeftColor, reflectionRightColor, emissiveLeftColor, emissiveRightColor, refractionLeftColor, refractionRightColor, vReflectionPosition, vReflectionSize, logarithmicDepthConstant, vTangentSpaceParams, alphaCutOff, boneTextureWidth, vLightData0, vLightDiffuse0, vLightSpecular0, vLightDirection0, vLightFalloff0, vLightGround0, lightMatrix0, shadowsInfo0, depthValues0, viewFrustumZ0, cascadeBlendFactor0, lightSizeUVCorrection0, depthCorrection0, penumbraDarkness0, frustumLengths0, diffuseSampler, ambientSampler, opacitySampler, reflectionCubeSampler, reflection2DSampler, emissiveSampler, specularSampler, bumpSampler, lightmapSampler, refractionCubeSampler, refraction2DSampler, boneSampler, shadowSampler0, depthSampler0  
e.\_ErrorEnabled @ babylon.js:16  
babylon.js:16 BJS - [17:49:17]: Attributes: position, normal, uv  
e.\_ErrorEnabled @ babylon.js:16  
babylon.js:16 BJS - [17:49:17]: Defines:  
#define MAINUV1  
#define DIFFUSE  
#define DIFFUSEDIRECTUV 1  
#define AMBIENTDIRECTUV 0  
#define OPACITYDIRECTUV 0  
#define EMISSIVEDIRECTUV 0  
#define SPECULARDIRECTUV 0  
#define BUMPDIRECTUV 0  
#define SPECULARTERM  
#define NORMAL  
#define UV1  
#define NUM\_BONE\_INFLUENCERS 0  
#define BonesPerMesh 0  
#define LIGHTMAPDIRECTUV 0  
#define SHADOWFLOAT  
#define NUM\_MORPH\_INFLUENCERS 0  
#define ALPHABLEND  
#define VIGNETTEBLENDMODEMULTIPLY  
#define SAMPLER3DGREENDEPTH  
#define SAMPLER3DBGRMAP  
#define LIGHT0  
#define SPOTLIGHT0  
#define SHADOW0  
#define SHADOWPCSS0  
#define SHADOWS

e.\_ErrorEnabled @ babylon.js:16  
babylon.js:16 BJS - [17:49:17]: Vertex code:  
e.\_ErrorEnabled @ babylon.js:16  
babylon.js:16 BJS - [17:49:17]: #version 300 es  
#define WEBGL2  
#define MAINUV1  
#define DIFFUSE  
#define DIFFUSEDIRECTUV 1  
#define AMBIENTDIRECTUV 0  
#define OPACITYDIRECTUV 0  
#define EMISSIVEDIRECTUV 0  
#define SPECULARDIRECTUV 0  
#define BUMPDIRECTUV 0  
#define SPECULARTERM  
#define NORMAL  
#define UV1  
#define NUM\_BONE\_INFLUENCERS 0  
#define BonesPerMesh 0  
#define LIGHTMAPDIRECTUV 0  
#define SHADOWFLOAT  
#define NUM\_MORPH\_INFLUENCERS 0  
#define ALPHABLEND  
#define VIGNETTEBLENDMODEMULTIPLY  
#define SAMPLER3DGREENDEPTH  
#define SAMPLER3DBGRMAP  
#define LIGHT0  
#define SPOTLIGHT0  
#define SHADOW0  
#define SHADOWPCSS0  
#define SHADOWS

#define SHADER\_NAME vertex:default  
precision highp float;  
layout(std140,column\_major) uniform;  
uniform Material  
{  
vec4 diffuseLeftColor;  
vec4 diffuseRightColor;  
vec4 opacityParts;  
vec4 reflectionLeftColor;  
vec4 reflectionRightColor;  
vec4 refractionLeftColor;  
vec4 refractionRightColor;  
vec4 emissiveLeftColor;  
vec4 emissiveRightColor;  
vec2 vDiffuseInfos;  
vec2 vAmbientInfos;  
vec2 vOpacityInfos;  
vec2 vReflectionInfos;  
vec3 vReflectionPosition;  
vec3 vReflectionSize;  
vec2 vEmissiveInfos;  
vec2 vLightmapInfos;  
vec2 vSpecularInfos;  
vec3 vBumpInfos;  
mat4 diffuseMatrix;  
mat4 ambientMatrix;  
mat4 opacityMatrix;  
mat4 reflectionMatrix;  
mat4 emissiveMatrix;  
mat4 lightmapMatrix;  
mat4 specularMatrix;  
mat4 bumpMatrix;  
vec2 vTangentSpaceParams;  
float pointSize;  
mat4 refractionMatrix;  
vec4 vRefractionInfos;  
vec4 vSpecularColor;  
vec3 vEmissiveColor;  
float visibility;  
vec4 vDiffuseColor;  
};  
uniform Scene {  
mat4 viewProjection;  
mat4 view;  
};  
#define CUSTOM\_VERTEX\_BEGIN  
in vec3 position;  
in vec3 normal;  
in vec2 uv;  
const float PI=3.1415926535897932384626433832795;  
const float LinearEncodePowerApprox=2.2;  
const float GammaEncodePowerApprox=1.0/LinearEncodePowerApprox;  
const vec3 LuminanceEncodeApprox=vec3(0.2126,0.7152,0.0722);  
const float Epsilon=0.0000001;  
#define saturate(x) clamp(x,0.0,1.0)  
#define absEps(x) abs(x)+Epsilon  
#define maxEps(x) max(x,Epsilon)  
#define saturateEps(x) clamp(x,Epsilon,1.0)  
mat3 transposeMat3(mat3 inMatrix) {  
vec3 i0=inMatrix[0];  
vec3 i1=inMatrix[1];  
vec3 i2=inMatrix[2];  
mat3 outMatrix=mat3(  
vec3(i0.x,i1.x,i2.x),  
vec3(i0.y,i1.y,i2.y),  
vec3(i0.z,i1.z,i2.z)  
);  
return outMatrix;  
}  
mat3 inverseMat3(mat3 inMatrix) {  
float a00=inMatrix[0][0],a01=inMatrix[0][1],a02=inMatrix[0][2];  
float a10=inMatrix[1][0],a11=inMatrix[1][1],a12=inMatrix[1][2];  
float a20=inMatrix[2][0],a21=inMatrix[2][1],a22=inMatrix[2][2];  
float b01=a22_a11-a12_a21;  
float b11=-a22_a10+a12_a20;  
float b21=a21_a10-a11_a20;  
float det=a00_b01+a01_b11+a02_b21;  
return mat3(b01,(-a22_a01+a02_a21),(a12_a01-a02_a11),  
b11,(a22_a00-a02_a20),(-a12_a00+a02_a10),  
b21,(-a21_a00+a01_a20),(a11_a00-a01_a10))/det;  
}  
vec3 toLinearSpace(vec3 color)  
{  
return pow(color,vec3(LinearEncodePowerApprox));  
}  
vec4 toLinearSpace(vec4 color)  
{  
return vec4(pow(color.rgb,vec3(LinearEncodePowerApprox)),color.a);  
}  
vec3 toGammaSpace(vec3 color)  
{  
return pow(color,vec3(GammaEncodePowerApprox));  
}  
vec4 toGammaSpace(vec4 color)  
{  
return vec4(pow(color.rgb,vec3(GammaEncodePowerApprox)),color.a);  
}  
float toGammaSpace(float color)  
{  
return pow(color,GammaEncodePowerApprox);  
}  
float square(float value)  
{  
return value_value;  
}  
float pow5(float value) {  
float sq=value_value;  
return sq_sq_value;  
}  
float getLuminance(vec3 color)  
{  
return clamp(dot(color,LuminanceEncodeApprox),0.,1.);  
}  
float getRand(vec2 seed) {  
return fract(sin(dot(seed.xy ,vec2(12.9898,78.233)))43758.5453);  
}  
float dither(vec2 seed,float varianceAmount) {  
float rand=getRand(seed);  
float dither=mix(-varianceAmount/255.0,varianceAmount/255.0,rand);  
return dither;  
}  
const float rgbdMaxRange=255.0;  
vec4 toRGBD(vec3 color) {  
float maxRGB=maxEps(max(color.r,max(color.g,color.b)));  
float D=max(rgbdMaxRange/maxRGB,1.);  
D=clamp(floor(D)/255.0,0.,1.);  
vec3 rgb=color.rgbD;  
rgb=toGammaSpace(rgb);  
return vec4(rgb,D);  
}  
vec3 fromRGBD(vec4 rgbd) {  
rgbd.rgb=toLinearSpace(rgbd.rgb);  
return rgbd.rgb/rgbd.a;  
}  
uniform mat4 world;  
out vec2 vMainUV1;  
out vec3 vPositionW;  
out vec3 vNormalW;  
uniform Light0  
{  
vec4 vLightData;  
vec4 vLightDiffuse;  
vec4 vLightSpecular;  
vec4 vLightDirection;  
vec4 vLightFalloff;  
vec4 shadowsInfo;  
vec2 depthValues;  
} light0;  
out vec4 vPositionFromLight0;  
out float vDepthMetric0;  
uniform highp sampler2DShadow shadowSampler0;  
uniform highp sampler2D depthSampler0;  
uniform mat4 lightMatrix0;  
 #define CUSTOM\_VERTEX\_DEFINITIONS  
void main(void) {  
 #define CUSTOM\_VERTEX\_MAIN\_BEGIN  
vec3 positionUpdated=position;  
vec3 normalUpdated=normal;  
vec2 uvUpdated=uv;  
 #define CUSTOM\_VERTEX\_UPDATE\_POSITION  
 #define CUSTOM\_VERTEX\_UPDATE\_NORMAL  
mat4 finalWorld=world;  
vec4 worldPos=finalWorld_vec4(positionUpdated,1.0);  
mat3 normalWorld=mat3(finalWorld);  
vNormalW=normalize(normalWorld_normalUpdated);  
 #define CUSTOM\_VERTEX\_UPDATE\_WORLDPOS  
gl\_Position=viewProjection_worldPos;  
vPositionW=vec3(worldPos);  
vec2 uv2=vec2(0.,0.);  
vMainUV1=uvUpdated;  
vPositionFromLight0=lightMatrix0\*worldPos;  
vDepthMetric0=((vPositionFromLight0.z+light0.depthValues.x)/(light0.depthValues.y));  
#define CUSTOM\_VERTEX\_MAIN\_END  
}

e.\_ErrorEnabled @ babylon.js:16  
babylon.js:16 BJS - [17:49:17]: Fragment code:  
e.\_ErrorEnabled @ babylon.js:16  
babylon.js:16 BJS - [17:49:17]: #version 300 es  
#define WEBGL2  
#define MAINUV1  
#define DIFFUSE  
#define DIFFUSEDIRECTUV 1  
#define AMBIENTDIRECTUV 0  
#define OPACITYDIRECTUV 0  
#define EMISSIVEDIRECTUV 0  
#define SPECULARDIRECTUV 0  
#define BUMPDIRECTUV 0  
#define SPECULARTERM  
#define NORMAL  
#define UV1  
#define NUM\_BONE\_INFLUENCERS 0  
#define BonesPerMesh 0  
#define LIGHTMAPDIRECTUV 0  
#define SHADOWFLOAT  
#define NUM\_MORPH\_INFLUENCERS 0  
#define ALPHABLEND  
#define VIGNETTEBLENDMODEMULTIPLY  
#define SAMPLER3DGREENDEPTH  
#define SAMPLER3DBGRMAP  
#define LIGHT0  
#define SPOTLIGHT0  
#define SHADOW0  
#define SHADOWPCSS0  
#define SHADOWS

#define SHADER\_NAME fragment:default  
precision highp float;  
layout(std140,column\_major) uniform;  
uniform Material  
{  
vec4 diffuseLeftColor;  
vec4 diffuseRightColor;  
vec4 opacityParts;  
vec4 reflectionLeftColor;  
vec4 reflectionRightColor;  
vec4 refractionLeftColor;  
vec4 refractionRightColor;  
vec4 emissiveLeftColor;  
vec4 emissiveRightColor;  
vec2 vDiffuseInfos;  
vec2 vAmbientInfos;  
vec2 vOpacityInfos;  
vec2 vReflectionInfos;  
vec3 vReflectionPosition;  
vec3 vReflectionSize;  
vec2 vEmissiveInfos;  
vec2 vLightmapInfos;  
vec2 vSpecularInfos;  
vec3 vBumpInfos;  
mat4 diffuseMatrix;  
mat4 ambientMatrix;  
mat4 opacityMatrix;  
mat4 reflectionMatrix;  
mat4 emissiveMatrix;  
mat4 lightmapMatrix;  
mat4 specularMatrix;  
mat4 bumpMatrix;  
vec2 vTangentSpaceParams;  
float pointSize;  
mat4 refractionMatrix;  
vec4 vRefractionInfos;  
vec4 vSpecularColor;  
vec3 vEmissiveColor;  
float visibility;  
vec4 vDiffuseColor;  
};  
uniform Scene {  
mat4 viewProjection;  
mat4 view;  
};  
#define CUSTOM\_FRAGMENT\_BEGIN  
#define RECIPROCAL\_PI2 0.15915494  
uniform vec3 vEyePosition;  
uniform vec3 vAmbientColor;  
in vec3 vPositionW;  
in vec3 vNormalW;  
in vec2 vMainUV1;  
const float PI=3.1415926535897932384626433832795;  
const float LinearEncodePowerApprox=2.2;  
const float GammaEncodePowerApprox=1.0/LinearEncodePowerApprox;  
const vec3 LuminanceEncodeApprox=vec3(0.2126,0.7152,0.0722);  
const float Epsilon=0.0000001;  
#define saturate(x) clamp(x,0.0,1.0)  
#define absEps(x) abs(x)+Epsilon  
#define maxEps(x) max(x,Epsilon)  
#define saturateEps(x) clamp(x,Epsilon,1.0)  
mat3 transposeMat3(mat3 inMatrix) {  
vec3 i0=inMatrix[0];  
vec3 i1=inMatrix[1];  
vec3 i2=inMatrix[2];  
mat3 outMatrix=mat3(  
vec3(i0.x,i1.x,i2.x),  
vec3(i0.y,i1.y,i2.y),  
vec3(i0.z,i1.z,i2.z)  
);  
return outMatrix;  
}  
mat3 inverseMat3(mat3 inMatrix) {  
float a00=inMatrix[0][0],a01=inMatrix[0][1],a02=inMatrix[0][2];  
float a10=inMatrix[1][0],a11=inMatrix[1][1],a12=inMatrix[1][2];  
float a20=inMatrix[2][0],a21=inMatrix[2][1],a22=inMatrix[2][2];  
float b01=a22_a11-a12_a21;  
float b11=-a22_a10+a12_a20;  
float b21=a21_a10-a11_a20;  
float det=a00_b01+a01_b11+a02_b21;  
return mat3(b01,(-a22_a01+a02_a21),(a12_a01-a02_a11),  
b11,(a22_a00-a02_a20),(-a12_a00+a02_a10),  
b21,(-a21_a00+a01_a20),(a11_a00-a01_a10))/det;  
}  
vec3 toLinearSpace(vec3 color)  
{  
return pow(color,vec3(LinearEncodePowerApprox));  
}  
vec4 toLinearSpace(vec4 color)  
{  
return vec4(pow(color.rgb,vec3(LinearEncodePowerApprox)),color.a);  
}  
vec3 toGammaSpace(vec3 color)  
{  
return pow(color,vec3(GammaEncodePowerApprox));  
}  
vec4 toGammaSpace(vec4 color)  
{  
return vec4(pow(color.rgb,vec3(GammaEncodePowerApprox)),color.a);  
}  
float toGammaSpace(float color)  
{  
return pow(color,GammaEncodePowerApprox);  
}  
float square(float value)  
{  
return value_value;  
}  
float pow5(float value) {  
float sq=value_value;  
return sq_sq\*value;  
}  
float getLuminance(vec3 color)  
{  
return clamp(dot(color,LuminanceEncodeApprox),0.,1.);  
}  
float getRand(vec2 seed) {  
return fract(sin(dot(seed.xy ,vec2(12.9898,78.233)))_43758.5453);  
}  
float dither(vec2 seed,float varianceAmount) {  
float rand=getRand(seed);  
float dither=mix(-varianceAmount/255.0,varianceAmount/255.0,rand);  
return dither;  
}  
const float rgbdMaxRange=255.0;  
vec4 toRGBD(vec3 color) {  
float maxRGB=maxEps(max(color.r,max(color.g,color.b)));  
float D=max(rgbdMaxRange/maxRGB,1.);  
D=clamp(floor(D)/255.0,0.,1.);  
vec3 rgb=color.rgb_D;  
rgb=toGammaSpace(rgb);  
return vec4(rgb,D);  
}  
vec3 fromRGBD(vec4 rgbd) {  
rgbd.rgb=toLinearSpace(rgbd.rgb);  
return rgbd.rgb/rgbd.a;  
}  
uniform Light0  
{  
vec4 vLightData;  
vec4 vLightDiffuse;  
vec4 vLightSpecular;  
vec4 vLightDirection;  
vec4 vLightFalloff;  
vec4 shadowsInfo;  
vec2 depthValues;  
} light0;  
in vec4 vPositionFromLight0;  
in float vDepthMetric0;  
uniform highp sampler2DShadow shadowSampler0;  
uniform highp sampler2D depthSampler0;  
uniform mat4 lightMatrix0;  
struct lightingInfo  
{  
vec3 diffuse;  
vec3 specular;  
};  
lightingInfo computeLighting(vec3 viewDirectionW,vec3 vNormal,vec4 lightData,vec3 diffuseColor,vec3 specularColor,float range,float glossiness) {  
lightingInfo result;  
vec3 lightVectorW;  
float attenuation=1.0;  
if (lightData.w == 0.)  
{  
vec3 direction=lightData.xyz-vPositionW;  
attenuation=max(0.,1.0-length(direction)/range);  
lightVectorW=normalize(direction);  
}  
else  
{  
lightVectorW=normalize(-lightD  
e.\_ErrorEnabled @ babylon.js:16  
babylon.js:16 BJS - [17:49:17]: Error: FRAGMENT SHADER 0:97: S0032: no default precision defined for parameter ‘webgl\_4aeb46af4241331f’

---

<div class="post-metadata">

### Author: ![gbz](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/gbz/32/23780_2.png) [@gbz](https://forum.babylonjs.com/u/gbz)
#### Post date: [May 3, 2020, 10:16pm UTC](https://forum.babylonjs.com/t/contact-hardening-shadow-error-in-chrome-x-android/10511/2 "2020-05-03T22:16:03Z")

</div>

I’m able to open your Playground (with 9 FPS) in Chrome on a Note 8 with Android version 9.

---

<div class="post-metadata">

### Author: ![paoloz](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@paoloz](https://forum.babylonjs.com/u/paoloz)
#### Post date: [May 4, 2020, 9:23am UTC](https://forum.babylonjs.com/t/contact-hardening-shadow-error-in-chrome-x-android/10511/3 "2020-05-04T09:23:04Z")

</div>

My tests with PG from doc ([https://playground.babylonjs.com/#B48X7G#2](https://playground.babylonjs.com/#B48X7G#2)) fail with:  
Android 9 Huawei P20 lite chrome 81  
Android 6.0 Lenovo A10-70L chrome 81  
Android 4.4.4

The problem is that javascript errors fron BJS are not managed and page crashes

---

<div class="post-metadata">

### Author: ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [May 4, 2020, 3:32pm UTC](https://forum.babylonjs.com/t/contact-hardening-shadow-error-in-chrome-x-android/10511/4 "2020-05-04T15:32:41Z")

</div>

Pinging @sebavan

---

<div class="post-metadata">

### Author: ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)
#### Post date: [May 4, 2020, 4:28pm UTC](https://forum.babylonjs.com/t/contact-hardening-shadow-error-in-chrome-x-android/10511/5 "2020-05-04T16:28:24Z")

</div>

Unfortunately, it looks like a driver issue 🙂  
babylon.js:16 BJS - [17:49:17]: Error: FRAGMENT SHADER 0:97: S0032: no default precision defined for parameter ‘webgl\_4aeb46af4241331f’

The error message fits with the default opengl driver and the parameter name with the Angle shader generated code.

I think you could try to create an issue on Android for those.

Nevertheless you can use your own error handler on materials:

```auto
material.onError = (effect: Effect, errors: string) => {
...
};

```

---

<div class="post-metadata">

### Author: ![paoloz](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@paoloz](https://forum.babylonjs.com/u/paoloz)
#### Post date: [May 5, 2020, 9:53am UTC](https://forum.babylonjs.com/t/contact-hardening-shadow-error-in-chrome-x-android/10511/6 "2020-05-05T09:53:27Z")

</div>

thank you very much!