Contact hardening shadow error in chrome x android

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

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=a22a11-a12a21;
float b11=-a22a10+a12a20;
float b21=a21a10-a11a20;
float det=a00b01+a01b11+a02b21;
return mat3(b01,(-a22
a01+a02a21),(a12a01-a02a11),
b11,(a22
a00-a02a20),(-a12a00+a02a10),
b21,(-a21
a00+a01a20),(a11a00-a01a10))/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=valuevalue;
return sq
sqvalue;
}
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 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(normalWorldnormalUpdated);
#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=a22a11-a12a21;
float b11=-a22a10+a12a20;
float b21=a21a10-a11a20;
float det=a00b01+a01b11+a02b21;
return mat3(b01,(-a22
a01+a02a21),(a12a01-a02a11),
b11,(a22
a00-a02a20),(-a12a00+a02a10),
b21,(-a21
a00+a01a20),(a11a00-a01a10))/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=valuevalue;
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’

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

My tests with PG from doc (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

Pinging @sebavan

Unfortunately, it looks like a driver issue :slight_smile:
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:

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

thank you very much!