Error on new SSRRenderingPipeline()

When i added SSR to my project, browser always console multi error.I had tried to find out the problem, but still wihout any success. Although it does not affect functionality, i still hope to resolve this problem.
Sorry, but i cannot pot the code on PG, the project is huge.
Here are the error msg as below:

BJS - [22:49:33]: Unable to compile effect:

BJS - [22:49:33]: Uniforms: world, mBones, viewProjection, diffuseMatrix, view, previousWorld, previousViewProjection, mPreviousBones, bumpMatrix, reflectivityMatrix, albedoMatrix, reflectivityColor, albedoColor, metallic, glossiness, vTangentSpaceParams, vBumpInfos, morphTargetInfluences, morphTargetTextureInfo, morphTargetTextureIndices, vClipPlane, vClipPlane2, vClipPlane3, vClipPlane4, vClipPlane5, vClipPlane6, diffuseSampler, bumpSampler, reflectivitySampler, albedoSampler, morphTargets

BJS - [22:49:33]: Attributes: position, normal

BJS - [22:49:33]: Defines:
#define REFLECTIVITYCOLOR
#define GLOSSINESSS
#define REFLECTIVITY
#define REFLECTIVITY_INDEX 2
#define NUM_BONE_INFLUENCERS 0
#define RENDER_TARGET_COUNT 4

BJS - [22:49:33]: Vertex code:

BJS - [22:49:33]: #version 300 es
#define WEBGL2
#define REFLECTIVITYCOLOR
#define GLOSSINESSS
#define REFLECTIVITY
#define REFLECTIVITY_INDEX 2
#define NUM_BONE_INFLUENCERS 0
#define RENDER_TARGET_COUNT 4
#define SHADER_NAME vertex:geometry
precision highp float;
uniform mat4 world;
layout(std140,column_major) uniform;
uniform Scene {
mat4 viewProjection;
mat4 view;
mat4 projection;
vec4 vEyePosition;
};
in vec3 position;
in vec3 normal;
out vec3 vNormalV;
out vec4 vViewPos;
#define CUSTOM_VERTEX_DEFINITIONS
void main(void)
{
vec3 positionUpdated=position;
vec3 normalUpdated=normal;
mat4 finalWorld=world;
vec4 worldPos=vec4(finalWorldvec4(positionUpdated,1.0));
vNormalV=normalize(vec3((view
finalWorld)vec4(normalUpdated,0.0)));
vViewPos=view
worldPos;
gl_Position=viewProjectionfinalWorldvec4(positionUpdated,1.0);
}

BJS - [22:49:33]: Fragment code:

BJS - [22:49:33]: #version 300 es
#define WEBGL2
#define REFLECTIVITYCOLOR
#define GLOSSINESSS
#define REFLECTIVITY
#define REFLECTIVITY_INDEX 2
#define NUM_BONE_INFLUENCERS 0
#define RENDER_TARGET_COUNT 4
#define SHADER_NAME fragment:geometry
precision highp float;
in vec3 vNormalV;
in vec4 vViewPos;
uniform vec3 reflectivityColor;
layout(location=0) out vec4 glFragData[RENDER_TARGET_COUNT];
const float PI=3.1415926535897932384626433832795;
const float HALF_MIN=5.96046448e-08;
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;
}
float toLinearSpace(float color)
{
return pow(color,LinearEncodePowerApprox);
}
vec3 toLinearSpace(vec3 color)
{
return pow(color,vec3(LinearEncodePowerApprox));
}
vec4 toLinearSpace(vec4 color)
{
return vec4(pow(color.rgb,vec3(LinearEncodePowerApprox)),color.a);
}
float toGammaSpace(float color)
{
return pow(color,GammaEncodePowerApprox);
}
vec3 toGammaSpace(vec3 color)
{
return pow(color,vec3(GammaEncodePowerApprox));
}
vec4 toGammaSpace(vec4 color)
{
return vec4(pow(color.rgb,vec3(GammaEncodePowerApprox)),color.a);
}
float square(float value)
{
return value
value;
}
vec3 square(vec3 value)
{
return valuevalue;
}
float pow5(float value) {
float sq=value
value;
return sqsqvalue;
}
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 normVariance=varianceAmount/255.0;
float dither=mix(-normVariance,normVariance,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(clamp(rgb,0.,1.),D);
}
vec3 fromRGBD(vec4 rgbd) {
rgbd.rgb=toLinearSpace(rgbd.rgb);
return rgbd.rgbbd.a;
}
vec3 parallaxCorrectNormal( vec3 vertexPos,vec3 origVec,vec3 cubeSize,vec3 cubePos ) {
vec3 invOrigVec=vec3(1.0,1.0,1.0)/origVec;
vec3 halfSize=cubeSize*0.5;
vec3 intersecAtMaxPlane=(cubePos+halfSize-vertexPos)invOrigVec;
vec3 intersecAtMinPlane=(cubePos-halfSize-vertexPos)invOrigVec;
vec3 largestIntersec=max(intersecAtMaxPlane,intersecAtMinPlane);
float distance=min(min(largestIntersec.x,largestIntersec.y),largestIntersec.z);
vec3 intersectPositionWS=vertexPos+origVec
distance;
return intersectPositionWS-cubePos;
}
void main() {
vec3 normalOutput;
normalOutput=normalize(vNormalV);
glFragData[0]=vec4(vViewPos.z/vViewPos.w,0.0,0.0,1.0);
glFragData[1]=vec4(normalOutput,1.0);
vec4 reflectivity=vec4(0.0,0.0,0.0,1.0);
reflectivity.rgb=toLinearSpace(reflectivityColor.xyz);
reflectivity.a=1.0;
reflectivity.a
=glossiness;
glFragData[REFLECTIVITY_INDEX]=reflectivity;
}

BJS - [22:49:33]: Offending line [130] in fragment code: reflectivity.a*=glossiness;

BJS - [22:49:33]: Error: FRAGMENT SHADER ERROR: 0:130: ‘glossiness’ : undeclared identifier

I think the error messages got cut off. Can you repost?

updated

What version of BABYLONJS are you using?

Do you have all the prerequisites in place?

I had test from v6.0 to last version, the same problem. The initializtion setup follow document

It seems it’s a problem with the geometry buffer renderer: can you test with the prepass renderer?

You need to set the 4rd parameter of the SSRRenderingPipeline constructor to false to use the prepass renderer.

It’s right, but some problom with MSAA on prepass renderer, how to solve aniti-aliasing on prepass renderer mode?

As per the doc, the best way is to use FXAA instead of MSAA.

But it’s a bug for sure, so we need to fix it, it should work with the geometry buffer renderer. Just to be sure, you are only using standard / PBR materials in your scene?

yes, my project 3D models all for GLTF only

This PR will fix the problem:

This issue only occurs during initialization, and there are no apparent problems afterwards. However, the error message displayed, the users could worry about it, and impact their experience. SSR is a great feature, 3D project places a strong emphasis on visual effects, the geometry buffer being the best option. I hope bbl team can fix this issue.
Sorry to distrub BBL team, I have been using babylonjs for fews years. I hope it can be a more prowerful WebGL Engine.

Is the fix ok for you?

It’s perfect now, after update v6.9.0

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

Please help to take a look at this scene, when you put const forceGeometryBuffer = true; When set to true, the Chrome browser on mobile devices will report an error and lose the reflection effect. It should be related to the character’s GLB file, which was downloaded from https://www.mixamo.com website.

And the characters in this scene don’t have this error: https://playground.babylonjs.com/#PIZ1GK#1552

The problem is that the model has too many bones (170) and because the geometry buffer renderer is passing bone matrices through uniforms to the shader.

This PR will fix the problem:

1 Like

Thank you so much