Definitely unintended behaviour for SSR

As mentioned on this
https://doc.babylonjs.com/how_to/using_screenspacereflectionspostprocess#prerequisite
it required at least WebGL 2 which is understandable.
However on this
https://doc.babylonjs.com/babylon101/shadows#contact-hardening-shadow-webgl2-only
it also mentions that the devices need WebGL 2

I tested these features on my high-end device which is iPhone X.
It only works on shadow but not SSR. It got an error upon opening the scene which required the same WebGL 2.
any ideas?

Thank you.

Hey @Vr_Tech :slight_smile:
According to the documentation “Like PCF, they will automatically fallback to Poisson Sampling if the code is running on a WebGL 1 platform.”.

Unfortunately SSR can’t have any fallback. In case of WebGL 1 and no “draw buffers” extension available (not available on iPhone for sure), the post-process is working as a passthrough. That means it does not generate and error but just ignorates the effect.
Do you have an error? If yes, can’t you tell me what is the error?

Thanks :slight_smile:

1 Like

Appreciate your response!
Yes, the error is occurred when entering this demo via iPhone X

https://playground.babylonjs.com/#PIZ1GK

The error screenshot

However, is there any alternative coming to a mobile version soon?

Works fine in Chrome. Here is part of the console log error in Safari (WebGL1):

[Error] Failed to load resource: the server responded with a status of 404 () (split.min.js.map, line 0)
[Log] Babylon.js v4.2.0-alpha.26 - WebGL1 (babylon.js, line 16)
[Error] WebGL: ERROR: 0:260: 'HAS_REFLECTIVITY' : unexpected token after conditional expression
	compileShader
	(anonymous function) (babylon.js:16:412743)
	(anonymous function) (babylon.js:16:413257)
	(anonymous function) (babylon.js:16:130332)
	(anonymous function) (babylon.js:16:414798)
	(anonymous function) (babylon.js:16:23716)
	(anonymous function) (babylon.js:16:20088)
	(anonymous function) (babylon.js:16:19520)
	(anonymous function) (babylon.js:16:1588464)
	(anonymous function) (babylon.js:16:1592973)
	(anonymous function) (babylon.js:16:1588407)
	(anonymous function) (babylon.js:16:19464)
	(anonymous function) (babylon.js:16:1588464)
	(anonymous function) (babylon.js:16:1592973)
	(anonymous function) (babylon.js:16:1588407)
	(anonymous function) (babylon.js:16:19398)
	(anonymous function) (babylon.js:16:22144)
	(anonymous function) (babylon.js:16:19352)
	(anonymous function) (babylon.js:16:22080)
	e (babylon.js:16:19311)
	(anonymous function) (babylon.js:16:412245)
	(anonymous function) (babylon.js:16:1135822)
	r (babylon.js:16:1138439)
	(anonymous function) (babylon.js:16:1140670)
	(anonymous function) (babylon.js:16:1687599)
	(anonymous function) (babylon.js:16:1156736)
	(anonymous function) (babylon.js:16:549302)
	(anonymous function) (babylon.js:16:546224)
	(anonymous function) (babylon.js:16:249380)
	(anonymous function) (babylon.js:16:250655)
	(anonymous function) (babylon.js:16:255846)
	(anonymous function) (babylon.playground.js:16:25749)
	(anonymous function) (babylon.js:16:127393)
	(anonymous function) (babylon.js:16:127591)
	(anonymous function)
[Error] BJS - [16:29:15]: Unable to compile effect:
	(anonymous function) (babylon.js:16:37685)
	(anonymous function) (babylon.js:16:25285)
	(anonymous function) (babylon.js:16:24774)
	(anonymous function) (babylon.js:16:20088)
	(anonymous function) (babylon.js:16:19520)
	(anonymous function) (babylon.js:16:1588464)
	(anonymous function) (babylon.js:16:1592973)
	(anonymous function) (babylon.js:16:1588407)
	(anonymous function) (babylon.js:16:19464)
	(anonymous function) (babylon.js:16:1588464)
	(anonymous function) (babylon.js:16:1592973)
	(anonymous function) (babylon.js:16:1588407)
	(anonymous function) (babylon.js:16:19398)
	(anonymous function) (babylon.js:16:22144)
	(anonymous function) (babylon.js:16:19352)
	(anonymous function) (babylon.js:16:22080)
	e (babylon.js:16:19311)
	(anonymous function) (babylon.js:16:412245)
	(anonymous function) (babylon.js:16:1135822)
	r (babylon.js:16:1138439)
	(anonymous function) (babylon.js:16:1140670)
	(anonymous function) (babylon.js:16:1687599)
	(anonymous function) (babylon.js:16:1156736)
	(anonymous function) (babylon.js:16:549302)
	(anonymous function) (babylon.js:16:546224)
	(anonymous function) (babylon.js:16:249380)
	(anonymous function) (babylon.js:16:250655)
	(anonymous function) (babylon.js:16:255846)
	(anonymous function) (babylon.playground.js:16:25749)
	(anonymous function) (babylon.js:16:127393)
	(anonymous function) (babylon.js:16:127591)
	(anonymous function)
[Error] BJS - [16:29:15]: Uniforms:  world, mBones, viewProjection, diffuseMatrix, view, previousWorld, previousViewProjection, mPreviousBones, morphTargetInfluences, bumpMatrix, reflectivityMatrix, vTangentSpaceParams, vBumpInfos, diffuseSampler, bumpSampler, reflectivitySampler
	(anonymous function) (babylon.js:16:37685)
	(anonymous function) (babylon.js:16:25324)
	(anonymous function) (babylon.js:16:24774)
	(anonymous function) (babylon.js:16:20088)
	(anonymous function) (babylon.js:16:19520)
	(anonymous function) (babylon.js:16:1588464)
	(anonymous function) (babylon.js:16:1592973)
	(anonymous function) (babylon.js:16:1588407)
	(anonymous function) (babylon.js:16:19464)
	(anonymous function) (babylon.js:16:1588464)
	(anonymous function) (babylon.js:16:1592973)
	(anonymous function) (babylon.js:16:1588407)
	(anonymous function) (babylon.js:16:19398)
	(anonymous function) (babylon.js:16:22144)
	(anonymous function) (babylon.js:16:19352)
	(anonymous function) (babylon.js:16:22080)
	e (babylon.js:16:19311)
	(anonymous function) (babylon.js:16:412245)
	(anonymous function) (babylon.js:16:1135822)
	r (babylon.js:16:1138439)
	(anonymous function) (babylon.js:16:1140670)
	(anonymous function) (babylon.js:16:1687599)
	(anonymous function) (babylon.js:16:1156736)
	(anonymous function) (babylon.js:16:549302)
	(anonymous function) (babylon.js:16:546224)
	(anonymous function) (babylon.js:16:249380)
	(anonymous function) (babylon.js:16:250655)
	(anonymous function) (babylon.js:16:255846)
	(anonymous function) (babylon.playground.js:16:25749)
	(anonymous function) (babylon.js:16:127393)
	(anonymous function) (babylon.js:16:127591)
	(anonymous function)
[Error] BJS - [16:29:15]: Attributes:  position, normal
	(anonymous function) (babylon.js:16:37685)
	(anonymous function) (babylon.js:16:25400)
	(anonymous function) (babylon.js:16:24774)
	(anonymous function) (babylon.js:16:20088)
	(anonymous function) (babylon.js:16:19520)
	(anonymous function) (babylon.js:16:1588464)
	(anonymous function) (babylon.js:16:1592973)
	(anonymous function) (babylon.js:16:1588407)
	(anonymous function) (babylon.js:16:19464)
	(anonymous function) (babylon.js:16:1588464)
	(anonymous function) (babylon.js:16:1592973)
	(anonymous function) (babylon.js:16:1588407)
	(anonymous function) (babylon.js:16:19398)
	(anonymous function) (babylon.js:16:22144)
	(anonymous function) (babylon.js:16:19352)
	(anonymous function) (babylon.js:16:22080)
	e (babylon.js:16:19311)
	(anonymous function) (babylon.js:16:412245)
	(anonymous function) (babylon.js:16:1135822)
	r (babylon.js:16:1138439)
	(anonymous function) (babylon.js:16:1140670)
	(anonymous function) (babylon.js:16:1687599)
	(anonymous function) (babylon.js:16:1156736)
	(anonymous function) (babylon.js:16:549302)
	(anonymous function) (babylon.js:16:546224)
	(anonymous function) (babylon.js:16:249380)
	(anonymous function) (babylon.js:16:250655)
	(anonymous function) (babylon.js:16:255846)
	(anonymous function) (babylon.playground.js:16:25749)
	(anonymous function) (babylon.js:16:127393)
	(anonymous function) (babylon.js:16:127591)
	(anonymous function)
[Error] BJS - [16:29:15]: Defines:
#define POSITION
#define POSITION_INDEX 2
#define REFLECTIVITY
#define REFLECTIVITY_INDEX 3
#define NUM_BONE_INFLUENCERS 0
#define RENDER_TARGET_COUNT 5
	(anonymous function) (babylon.js:16:37685)
	(anonymous function) (babylon.js:16:25460)
	(anonymous function) (babylon.js:16:24774)
	(anonymous function) (babylon.js:16:20088)
	(anonymous function) (babylon.js:16:19520)
	(anonymous function) (babylon.js:16:1588464)
	(anonymous function) (babylon.js:16:1592973)
	(anonymous function) (babylon.js:16:1588407)
	(anonymous function) (babylon.js:16:19464)
	(anonymous function) (babylon.js:16:1588464)
	(anonymous function) (babylon.js:16:1592973)
	(anonymous function) (babylon.js:16:1588407)
	(anonymous function) (babylon.js:16:19398)
	(anonymous function) (babylon.js:16:22144)
	(anonymous function) (babylon.js:16:19352)
	(anonymous function) (babylon.js:16:22080)
	e (babylon.js:16:19311)
	(anonymous function) (babylon.js:16:412245)
	(anonymous function) (babylon.js:16:1135822)
	r (babylon.js:16:1138439)
	(anonymous function) (babylon.js:16:1140670)
	(anonymous function) (babylon.js:16:1687599)
	(anonymous function) (babylon.js:16:1156736)
	(anonymous function) (babylon.js:16:549302)
	(anonymous function) (babylon.js:16:546224)
	(anonymous function) (babylon.js:16:249380)
	(anonymous function) (babylon.js:16:250655)
	(anonymous function) (babylon.js:16:255846)
	(anonymous function) (babylon.playground.js:16:25749)
	(anonymous function) (babylon.js:16:127393)
	(anonymous function) (babylon.js:16:127591)
	(anonymous function)
[Error] BJS - [16:29:15]: Vertex code:
	(anonymous function) (babylon.js:16:37685)
	(anonymous function) (babylon.js:16:25764)
	(anonymous function) (babylon.js:16:24774)
	(anonymous function) (babylon.js:16:20088)
	(anonymous function) (babylon.js:16:19520)
	(anonymous function) (babylon.js:16:1588464)
	(anonymous function) (babylon.js:16:1592973)
	(anonymous function) (babylon.js:16:1588407)
	(anonymous function) (babylon.js:16:19464)
	(anonymous function) (babylon.js:16:1588464)
	(anonymous function) (babylon.js:16:1592973)
	(anonymous function) (babylon.js:16:1588407)
	(anonymous function) (babylon.js:16:19398)
	(anonymous function) (babylon.js:16:22144)
	(anonymous function) (babylon.js:16:19352)
	(anonymous function) (babylon.js:16:22080)
	e (babylon.js:16:19311)
	(anonymous function) (babylon.js:16:412245)
	(anonymous function) (babylon.js:16:1135822)
	r (babylon.js:16:1138439)
	(anonymous function) (babylon.js:16:1140670)
	(anonymous function) (babylon.js:16:1687599)
	(anonymous function) (babylon.js:16:1156736)
	(anonymous function) (babylon.js:16:549302)
	(anonymous function) (babylon.js:16:546224)
	(anonymous function) (babylon.js:16:249380)
	(anonymous function) (babylon.js:16:250655)
	(anonymous function) (babylon.js:16:255846)
	(anonymous function) (babylon.playground.js:16:25749)
	(anonymous function) (babylon.js:16:127393)
	(anonymous function) (babylon.js:16:127591)
	(anonymous function)
[Error] BJS - [16:29:15]: #define POSITION
#define POSITION_INDEX 2
#define REFLECTIVITY
#define REFLECTIVITY_INDEX 3
#define NUM_BONE_INFLUENCERS 0
#define RENDER_TARGET_COUNT 5
#define SHADER_NAME vertex:geometry
precision highp float;
precision highp int;
#if NUM_BONE_INFLUENCERS>0
#ifdef BONETEXTURE
uniform sampler2D boneSampler;
uniform float boneTextureWidth;
#else
uniform mat4 mBones[BonesPerMesh];
#endif
attribute vec4 matricesIndices;
attribute vec4 matricesWeights;
#if NUM_BONE_INFLUENCERS>4
attribute vec4 matricesIndicesExtra;
attribute vec4 matricesWeightsExtra;
#endif
#ifdef BONETEXTURE
#define inline
mat4 readMatrixFromRawSampler(sampler2D smp,float index)
{
float offset=index*4.0;
float dx=1.0/boneTextureWidth;
vec4 m0=texture2D(smp,vec2(dx*(offset+0.5),0.));
vec4 m1=texture2D(smp,vec2(dx*(offset+1.5),0.));
vec4 m2=texture2D(smp,vec2(dx*(offset+2.5),0.));
vec4 m3=texture2D(smp,vec2(dx*(offset+3.5),0.));
return mat4(m0,m1,m2,m3);
}
#endif
#endif
#ifdef MORPHTARGETS
uniform float morphTargetInfluences[NUM_MORPH_INFLUENCERS];
#endif

#ifdef INSTANCES
attribute vec4 world0;
attribute vec4 world1;
attribute vec4 world2;
attribute vec4 world3;
#ifdef THIN_INSTANCES
uniform mat4 world;
#endif
#else
uniform mat4 world;
#endif
attribute vec3 position;
attribute vec3 normal;
#ifdef NEED_UV
varying vec2 vUV;
#ifdef ALPHATEST
uniform mat4 diffuseMatrix;
#endif
#ifdef BUMP
uniform mat4 bumpMatrix;
varying vec2 vBumpUV;
#endif
#ifdef REFLECTIVITY
uniform mat4 reflectivityMatrix;
varying vec2 vReflectivityUV;
#endif
#ifdef UV1
attribute vec2 uv;
#endif
#ifdef UV2
attribute vec2 uv2;
#endif
#endif

uniform mat4 viewProjection;
uniform mat4 view;
#ifdef BUMP
varying mat4 vWorldView;
#endif
#ifdef BUMP
varying vec3 vNormalW;
#else
varying vec3 vNormalV;
#endif
varying vec4 vViewPos;
#if defined(POSITION) || defined(BUMP)
varying vec3 vPositionW;
#endif
#ifdef VELOCITY
uniform mat4 previousWorld;
uniform mat4 previousViewProjection;
#ifdef BONES_VELOCITY_ENABLED
#if NUM_BONE_INFLUENCERS>0
uniform mat4 mPreviousBones[BonesPerMesh];
#endif
#endif
varying vec4 vCurrentPosition;
varying vec4 vPreviousPosition;
#endif
void main(void)
{
vec3 positionUpdated=position;
vec3 normalUpdated=normal;
#ifdef UV1
vec2 uvUpdated=uv;
#endif

#ifdef INSTANCES
mat4 finalWorld=mat4(world0,world1,world2,world3);
#ifdef THIN_INSTANCES
finalWorld=world*finalWorld;
#endif
#else
mat4 finalWorld=world;
#endif
#if defined(VELOCITY) && !defined(BONES_VELOCITY_ENABLED)

vCurrentPosition=viewProjection*finalWorld*vec4(positionUpdated,1.0);
vPreviousPosition=previousViewProjection*previousWorld*vec4(positionUpdated,1.0);
#endif
#if NUM_BONE_INFLUENCERS>0
mat4 influence;
#ifdef BONETEXTURE
influence=readMatrixFromRawSampler(boneSampler,matricesIndices[0])*matricesWeights[0];
#if NUM_BONE_INFLUENCERS>1
influence+=readMatrixFromRawSampler(boneSampler,matricesIndices[1])*matricesWeights[1];
#endif
#if NUM_BONE_INFLUENCERS>2
influence+=readMatrixFromRawSampler(boneSampler,matricesIndices[2])*matricesWeights[2];
#endif
#if NUM_BONE_INFLUENCERS>3
influence+=readMatrixFromRawSampler(boneSampler,matricesIndices[3])*matricesWeights[3];
#endif
#if NUM_BONE_INFLUENCERS>4
influence+=readMatrixFromRawSampler(boneSampler,matricesIndicesExtra[0])*matricesWeightsExtra[0];
#endif
#if NUM_BONE_INFLUENCERS>5
influence+=readMatrixFromRawSampler(boneSampler,matricesIndicesExtra[1])*matricesWeightsExtra[1];
#endif
#if NUM_BONE_INFLUENCERS>6
influence+=readMatrixFromRawSampler(boneSampler,matricesIndicesExtra[2])*matricesWeightsExtra[2];
#endif
#if NUM_BONE_INFLUENCERS>7
influence+=readMatrixFromRawSampler(boneSampler,matricesIndicesExtra[3])*matricesWeightsExtra[3];
#endif
#else
influence=mBones[int(matricesIndices[0])]*matricesWeights[0];
#if NUM_BONE_INFLUENCERS>1
influence+=mBones[int(matricesIndices[1])]*matricesWeights[1];
#endif
#if NUM_BONE_INFLUENCERS>2
influence+=mBones[int(matricesIndices[2])]*matricesWeights[2];
#endif
#if NUM_BONE_INFLUENCERS>3
influence+=mBones[int(matricesIndices[3])]*matricesWeights[3];
#endif
#if NUM_BONE_INFLUENCERS>4
influence+=mBones[int(matricesIndicesExtra[0])]*matricesWeightsExtra[0];
#endif
#if NUM_BONE_INFLUENCERS>5
influence+=mBones[int(matricesIndicesExtra[1])]*matricesWeightsExtra[1];
#endif
#if NUM_BONE_INFLUENCERS>6
influence+=mBones[int(matricesIndicesExtra[2])]*matricesWeightsExtra[2];
#endif
#if NUM_BONE_INFLUENCERS>7
influence+=mBones[int(matricesIndicesExtra[3])]*matricesWeightsExtra[3];
#endif
#endif
finalWorld=finalWorld*influence;
#endif
vec4 pos=vec4(finalWorld*vec4(positionUpdated,1.0));
#ifdef BUMP
vWorldView=view*finalWorld;
vNormalW=normalUpdated;
#else
vNormalV=normalize(vec3((view*finalWorld)*vec4(normalUpdated,0.0)));
#endif
vViewPos=view*pos;
#if defined(VELOCITY) && defined(BONES_VELOCITY_ENABLED)
vCurrentPosition=viewProjection*finalWorld*vec4(positionUpdated,1.0);
#if NUM_BONE_INFLUENCERS>0
mat4 previousInfluence;
previousInfluence=mPreviousBones[int(matricesIndices[0])]*matricesWeights[0];
#if NUM_BONE_INFLUENCERS>1
previousInfluence+=mPreviousBones[int(matricesIndices[1])]*matricesWeights[1];
#endif
#if NUM_BONE_INFLUENCERS>2
previousInfluence+=mPreviousBones[int(matricesIndices[2])]*matricesWeights[2];
#endif
#if NUM_BONE_INFLUENCERS>3
previousInfluence+=mPreviousBones[int(matricesIndices[3])]*matricesWeights[3];
#endif
#if NUM_BONE_INFLUENCERS>4
previousInfluence+=mPreviousBones[int(matricesIndicesExtra[0])]*matricesWeightsExtra[0];
#endif
#if NUM_BONE_INFLUENCERS>5
previousInfluence+=mPreviousBones[int(matricesIndicesExtra[1])]*matricesWeightsExtra[1];
#endif
#if NUM_BONE_INFLUENCERS>6
previousInfluence+=mPreviousBones[int(matricesIndicesExtra[2])]*matricesWeightsExtra[2];
#endif
#if NUM_BONE_INFLUENCERS>7
previousInfluence+=mPreviousBones[int(matricesIndicesExtra[3])]*matricesWeightsExtra[3];
#endif
vPreviousPosition=previousViewProjection*previousWorld*previousInfluence*vec4(positionUpdated,1.0);
#else
vPreviousPosition=previousViewProjection*previousWorld*vec4(positionUpdated,1.0);
#endif
#endif
#if defined(POSITION) || defined(BUMP)
vPositionW=pos.xyz/pos.w;
#endif
gl_Position=viewProjection*finalWorld*vec4(positionUpdated,1.0);
#ifdef NEED_UV
#ifdef UV1
#ifdef ALPHATEST
vUV=vec2(diffuseMatrix*vec4(uvUpdated,1.0,0.0));
#else
vUV=uv;
#endif
#ifdef BUMP
vBumpUV=vec2(bumpMatrix*vec4(uvUpdated,1.0,0.0));
#endif
#ifdef REFLECTIVITY
vReflectivityUV=vec2(reflectivityMatrix*vec4(uvUpdated,1.0,0.0));
#endif
#endif
#ifdef UV2
#ifdef ALPHATEST
vUV=vec2(diffuseMatrix*vec4(uv2,1.0,0.0));
#else
vUV=uv2;
#endif
#ifdef BUMP
vBumpUV=vec2(bumpMatrix*vec4(uv2,1.0,0.0));
#endif
#ifdef REFLECTIVITY
vReflectivityUV=vec2(reflectivityMatrix*vec4(uv2,1.0,0.0));
#endif
#endif
#endif
#if defined(BUMP) || defined(PARALLAX) || defined(CLEARCOAT_BUMP) || defined(ANISOTROPIC)
#if defined(TANGENT) && defined(NORMAL)
vec3 tbnNormal=normalize(normalUpdated);
vec3 tbnTangent=normalize(tangentUpdated.xyz);
vec3 tbnBitangent=cross(tbnNormal,tbnTangent)*tangentUpdated.w;
vTBN=mat3(finalWorld)*mat3(tbnTangent,tbnBitangent,tbnNormal);
#endif
#endif
}

	(anonymous function) (babylon.js:16:37685)
	(anonymous function) (babylon.js:16:25790)
	(anonymous function) (babylon.js:16:24774)
	(anonymous function) (babylon.js:16:20088)
	(anonymous function) (babylon.js:16:19520)
	(anonymous function) (babylon.js:16:1588464)
	(anonymous function) (babylon.js:16:1592973)
	(anonymous function) (babylon.js:16:1588407)
	(anonymous function) (babylon.js:16:19464)
	(anonymous function) (babylon.js:16:1588464)
	(anonymous function) (babylon.js:16:1592973)
	(anonymous function) (babylon.js:16:1588407)
	(anonymous function) (babylon.js:16:19398)
	(anonymous function) (babylon.js:16:22144)
	(anonymous function) (babylon.js:16:19352)
	(anonymous function) (babylon.js:16:22080)
	e (babylon.js:16:19311)
	(anonymous function) (babylon.js:16:412245)
	(anonymous function) (babylon.js:16:1135822)
	r (babylon.js:16:1138439)
	(anonymous function) (babylon.js:16:1140670)
	(anonymous function) (babylon.js:16:1687599)
	(anonymous function) (babylon.js:16:1156736)
	(anonymous function) (babylon.js:16:549302)
	(anonymous function) (babylon.js:16:546224)
	(anonymous function) (babylon.js:16:249380)
	(anonymous function) (babylon.js:16:250655)
	(anonymous function) (babylon.js:16:255846)
	(anonymous function) (babylon.playground.js:16:25749)
	(anonymous function) (babylon.js:16:127393)
	(anonymous function) (babylon.js:16:127591)
	(anonymous function)
[Error] BJS - [16:29:15]: Fragment code:
	(anonymous function) (babylon.js:16:37685)
	(anonymous function) (babylon.js:16:26046)
	(anonymous function) (babylon.js:16:24774)
	(anonymous function) (babylon.js:16:20088)
	(anonymous function) (babylon.js:16:19520)
	(anonymous function) (babylon.js:16:1588464)
	(anonymous function) (babylon.js:16:1592973)
	(anonymous function) (babylon.js:16:1588407)
	(anonymous function) (babylon.js:16:19464)
	(anonymous function) (babylon.js:16:1588464)
	(anonymous function) (babylon.js:16:1592973)
	(anonymous function) (babylon.js:16:1588407)
	(anonymous function) (babylon.js:16:19398)
	(anonymous function) (babylon.js:16:22144)
	(anonymous function) (babylon.js:16:19352)
	(anonymous function) (babylon.js:16:22080)
	e (babylon.js:16:19311)
	(anonymous function) (babylon.js:16:412245)
	(anonymous function) (babylon.js:16:1135822)
	r (babylon.js:16:1138439)
	(anonymous function) (babylon.js:16:1140670)
	(anonymous function) (babylon.js:16:1687599)
	(anonymous function) (babylon.js:16:1156736)
	(anonymous function) (babylon.js:16:549302)
	(anonymous function) (babylon.js:16:546224)
	(anonymous function) (babylon.js:16:249380)
	(anonymous function) (babylon.js:16:250655)
	(anonymous function) (babylon.js:16:255846)
	(anonymous function) (babylon.playground.js:16:25749)
	(anonymous function) (babylon.js:16:127393)
	(anonymous function) (babylon.js:16:127591)
	(anonymous function)
[Error] BJS - [16:29:15]: #define POSITION
#define POSITION_INDEX 2
#define REFLECTIVITY
#define REFLECTIVITY_INDEX 3
#define NUM_BONE_INFLUENCERS 0
#define RENDER_TARGET_COUNT 5
#define SHADER_NAME fragment:geometry
#extension GL_EXT_draw_buffers : require
#if defined(BUMP) || !defined(NORMAL)
#extension GL_OES_standard_derivatives : enable
#endif
precision highp float;
precision highp int;
#ifdef BUMP
varying mat4 vWorldView;
varying vec3 vNormalW;
#else
varying vec3 vNormalV;
#endif
varying vec4 vViewPos;
#if defined(POSITION) || defined(BUMP)
varying vec3 vPositionW;
#endif
#ifdef VELOCITY
varying vec4 vCurrentPosition;
varying vec4 vPreviousPosition;
#endif
#ifdef NEED_UV
varying vec2 vUV;
#endif
#ifdef BUMP
uniform vec3 vBumpInfos;
uniform vec2 vTangentSpaceParams;
#endif
#ifdef REFLECTIVITY
varying vec2 vReflectivityUV;
uniform sampler2D reflectivitySampler;
#endif
#ifdef ALPHATEST
uniform sampler2D diffuseSampler;
#endif
#if __VERSION__>=200
layout(location=0) out vec4 glFragData[RENDER_TARGET_COUNT];
#endif

#if defined(BUMP) || defined(CLEARCOAT_BUMP) || defined(ANISOTROPIC) || defined(DETAIL)
#if defined(TANGENT) && defined(NORMAL)
varying mat3 vTBN;
#endif
#ifdef OBJECTSPACE_NORMALMAP
uniform mat4 normalMatrix;
#endif
vec3 perturbNormalBase(mat3 cotangentFrame,vec3 normal,float scale)
{
#ifdef NORMALXYSCALE
normal=normalize(normal*vec3(scale,scale,1.0));
#endif
return normalize(cotangentFrame*normal);
}
vec3 perturbNormal(mat3 cotangentFrame,vec3 textureSample,float scale)
{
return perturbNormalBase(cotangentFrame,textureSample*2.0-1.0,scale);
}

mat3 cotangent_frame(vec3 normal,vec3 p,vec2 uv,vec2 tangentSpaceParams)
{

uv=gl_FrontFacing ? uv : -uv;

vec3 dp1=dFdx(p);
vec3 dp2=dFdy(p);
vec2 duv1=dFdx(uv);
vec2 duv2=dFdy(uv);

vec3 dp2perp=cross(dp2,normal);
vec3 dp1perp=cross(normal,dp1);
vec3 tangent=dp2perp*duv1.x+dp1perp*duv2.x;
vec3 bitangent=dp2perp*duv1.y+dp1perp*duv2.y;

tangent*=tangentSpaceParams.x;
bitangent*=tangentSpaceParams.y;

float invmax=inversesqrt(max(dot(tangent,tangent),dot(bitangent,bitangent)));
return mat3(tangent*invmax,bitangent*invmax,normal);
}
#endif

#if defined(BUMP)
#if BUMPDIRECTUV == 1
#define vBumpUV vMainUV1
#elif BUMPDIRECTUV == 2
#define vBumpUV vMainUV2
#else
varying vec2 vBumpUV;
#endif
uniform sampler2D bumpSampler;
vec3 perturbNormal(mat3 cotangentFrame,vec2 uv)
{
return perturbNormal(cotangentFrame,texture2D(bumpSampler,uv).xyz,vBumpInfos.y);
}
#endif
#if defined(DETAIL)
#if DETAILDIRECTUV == 1
#define vDetailUV vMainUV1
#elif DETAILDIRECTUV == 2
#define vDetailUV vMainUV2
#else
varying vec2 vDetailUV;
#endif
uniform sampler2D detailSampler;
#endif
#if defined(BUMP)
vec3 perturbNormal(mat3 cotangentFrame,vec3 color)
{
return perturbNormal(cotangentFrame,color,vBumpInfos.y);
}

mat3 cotangent_frame(vec3 normal,vec3 p,vec2 uv)
{
return cotangent_frame(normal,p,uv,vTangentSpaceParams);
}
#endif
#if defined(BUMP) && defined(PARALLAX)
const float minSamples=4.;
const float maxSamples=15.;
const int iMaxSamples=15;

vec2 parallaxOcclusion(vec3 vViewDirCoT,vec3 vNormalCoT,vec2 texCoord,float parallaxScale) {
float parallaxLimit=length(vViewDirCoT.xy)/vViewDirCoT.z;
parallaxLimit*=parallaxScale;
vec2 vOffsetDir=normalize(vViewDirCoT.xy);
vec2 vMaxOffset=vOffsetDir*parallaxLimit;
float numSamples=maxSamples+(dot(vViewDirCoT,vNormalCoT)*(minSamples-maxSamples));
float stepSize=1.0/numSamples;

float currRayHeight=1.0;
vec2 vCurrOffset=vec2(0,0);
vec2 vLastOffset=vec2(0,0);
float lastSampledHeight=1.0;
float currSampledHeight=1.0;
for (int i=0; i<iMaxSamples; i++)
{
currSampledHeight=texture2D(bumpSampler,vBumpUV+vCurrOffset).w;

if (currSampledHeight>currRayHeight)
{
float delta1=currSampledHeight-currRayHeight;
float delta2=(currRayHeight+stepSize)-lastSampledHeight;
float ratio=delta1/(delta1+delta2);
vCurrOffset=(ratio)* vLastOffset+(1.0-ratio)*vCurrOffset;

break;
}
else
{
currRayHeight-=stepSize;
vLastOffset=vCurrOffset;
vCurrOffset+=stepSize*vMaxOffset;
lastSampledHeight=currSampledHeight;
}
}
return vCurrOffset;
}
vec2 parallaxOffset(vec3 viewDir,float heightScale)
{

float height=texture2D(bumpSampler,vBumpUV).w;
vec2 texCoordOffset=heightScale*viewDir.xy*height;
return -texCoordOffset;
}
#endif
void main() {
#ifdef ALPHATEST
if (texture2D(diffuseSampler,vUV).a<0.4)
discard;
#endif
gl_FragData[0]=vec4(vViewPos.z/vViewPos.w,0.0,0.0,1.0);

#ifdef BUMP
vec3 normalW=normalize(vNormalW);
vec2 uvOffset=vec2(0.0,0.0);
#if defined(BUMP) || defined(PARALLAX) || defined(DETAIL)
#ifdef NORMALXYSCALE
float normalScale=1.0;
#elif defined(BUMP)
float normalScale=vBumpInfos.y;
#else
float normalScale=1.0;
#endif
#if defined(TANGENT) && defined(NORMAL)
mat3 TBN=vTBN;
#elif defined(BUMP)
mat3 TBN=cotangent_frame(normalW*normalScale,vPositionW,vBumpUV);
#else
mat3 TBN=cotangent_frame(normalW*normalScale,vPositionW,vDetailUV,vec2(1.,1.));
#endif
#elif defined(ANISOTROPIC)
#if defined(TANGENT) && defined(NORMAL)
mat3 TBN=vTBN;
#else
mat3 TBN=cotangent_frame(normalW,vPositionW,vMainUV1,vec2(1.,1.));
#endif
#endif
#ifdef PARALLAX
mat3 invTBN=transposeMat3(TBN);
#ifdef PARALLAXOCCLUSION
uvOffset=parallaxOcclusion(invTBN*-viewDirectionW,invTBN*normalW,vBumpUV,vBumpInfos.z);
#else
uvOffset=parallaxOffset(invTBN*viewDirectionW,vBumpInfos.z);
#endif
#endif
#ifdef DETAIL
vec4 detailColor=texture2D(detailSampler,vDetailUV+uvOffset);
vec2 detailNormalRG=detailColor.wy*2.0-1.0;
float detailNormalB=sqrt(1.-saturate(dot(detailNormalRG,detailNormalRG)));
vec3 detailNormal=vec3(detailNormalRG,detailNormalB);
#endif
#ifdef BUMP
#ifdef OBJECTSPACE_NORMALMAP
normalW=normalize(texture2D(bumpSampler,vBumpUV).xyz*2.0-1.0);
normalW=normalize(mat3(normalMatrix)*normalW);
#elif !defined(DETAIL)
normalW=perturbNormal(TBN,vBumpUV+uvOffset);
#else
vec3 bumpNormal=texture2D(bumpSampler,vBumpUV+uvOffset).xyz*2.0-1.0;

#if DETAIL_NORMALBLENDMETHOD == 0
detailNormal.xy*=vDetailInfos.z;
vec3 blendedNormal=normalize(vec3(bumpNormal.xy+detailNormal.xy,bumpNormal.z*detailNormal.z));
#elif DETAIL_NORMALBLENDMETHOD == 1
detailNormal.xy*=vDetailInfos.z;
bumpNormal+=vec3(0.0,0.0,1.0);
detailNormal*=vec3(-1.0,-1.0,1.0);
vec3 blendedNormal=bumpNormal*dot(bumpNormal,detailNormal)/bumpNormal.z-detailNormal;
#endif
normalW=perturbNormalBase(TBN,blendedNormal,vBumpInfos.y);
#endif
#elif defined(DETAIL)
detailNormal.xy*=vDetailInfos.z;
normalW=perturbNormalBase(TBN,detailNormal,vDetailInfos.z);
#endif
gl_FragData[1]=vec4(normalize(vec3(vWorldView*vec4(normalW,0.0))),1.0);
#else
gl_FragData[1]=vec4(normalize(vNormalV),1.0);
#endif
#ifdef POSITION
gl_FragData[POSITION_INDEX]=vec4(vPositionW,1.0);
#endif
#ifdef VELOCITY
vec2 a=(vCurrentPosition.xy/vCurrentPosition.w)*0.5+0.5;
vec2 b=(vPreviousPosition.xy/vPreviousPosition.w)*0.5+0.5;
vec2 velocity=abs(a-b);
velocity=vec2(pow(velocity.x,1.0/3.0),pow(velocity.y,1.0/3.0))*sign(a-b)*0.5+0.5;
gl_FragData[VELOCITY_INDEX]=vec4(velocity,0.0,1.0);
#endif
#ifdef REFLECTIVITY
#ifdef HAS_SPECULAR

vec4 reflectivity=texture2D(reflectivitySampler,vReflectivityUV);
#elif HAS_REFLECTIVITY

vec4 reflectivity=vec4(texture2D(reflectivitySampler,vReflectivityUV).rgb,1.0);
#else
vec4 reflectivity=vec4(0.0,0.0,0.0,1.0);
#endif
gl_FragData[REFLECTIVITY_INDEX]=reflectivity;
#endif
}
	(anonymous function) (babylon.js:16:37685)
	(anonymous function) (babylon.js:16:26074)
	(anonymous function) (babylon.js:16:24774)
	(anonymous function) (babylon.js:16:20088)
	(anonymous function) (babylon.js:16:19520)
	(anonymous function) (babylon.js:16:1588464)
	(anonymous function) (babylon.js:16:1592973)
	(anonymous function) (babylon.js:16:1588407)
	(anonymous function) (babylon.js:16:19464)
	(anonymous function) (babylon.js:16:1588464)
	(anonymous function) (babylon.js:16:1592973)
	(anonymous function) (babylon.js:16:1588407)
	(anonymous function) (babylon.js:16:19398)
	(anonymous function) (babylon.js:16:22144)
	(anonymous function) (babylon.js:16:19352)
	(anonymous function) (babylon.js:16:22080)
	e (babylon.js:16:19311)
	(anonymous function) (babylon.js:16:412245)
	(anonymous function) (babylon.js:16:1135822)
	r (babylon.js:16:1138439)
	(anonymous function) (babylon.js:16:1140670)
	(anonymous function) (babylon.js:16:1687599)
	(anonymous function) (babylon.js:16:1156736)
	(anonymous function) (babylon.js:16:549302)
	(anonymous function) (babylon.js:16:546224)
	(anonymous function) (babylon.js:16:249380)
	(anonymous function) (babylon.js:16:250655)
	(anonymous function) (babylon.js:16:255846)
	(anonymous function) (babylon.playground.js:16:25749)
	(anonymous function) (babylon.js:16:127393)
	(anonymous function) (babylon.js:16:127591)
	(anonymous function)

For iOS, both Safari and Chrome is neither working and show the same error as screen shot :slight_smile:

Because IOS does not support webgl2 yet

2 Likes

Thanks for the info

Not sure how they have done it :frowning:
It’s pretty good though.

pinging @julien-moreau to see if doing it with webgl1 is an option

There is always a solution as @Deltakosh says ahah
But having SSR working on WebGL1 without the “draw buffers” extension means that the rendering loop will look like:

  • Render the scene in a render target to store positions
  • Render the scene in a render target to store the normals
  • Render the scene in a render target to store the depth (already exists using the “depth renderer”)
  • Render the scene in a render target to store the roughness informations
  • Render the scene
  • Apply the post-process

This requires to develop a “position renderer”, a “normal renderer” and “roughness renderer”.
Having the “normal renderer” would allow to have SSAO2 working on WebGL1 as well but I think this will just kill the performances. Do you agree @Deltakosh? Or are you for the development of all these renderers?