Custom shader compilation errors

[highvrahos]

Hello,

 

We have just updated from a pretty old (last year) version of Babylon.JS to the latest, with great success. Everything runs smoothly except of a custom shader of ours. The piece of code that creates the compilation error:

                 if(alpha>0.0){                    vec3 mixRGB = alpha * texture2D(diffuseSampler, diffuseCoords).rgb;                     mixRGB += ((1.0-alpha) * patternColor);                     newColor =  vec4(mixRGB * finalColor,0.5);                 }else{                      newColor =  vec4(finalColor,0.7);                 }

BJS - [10:17:59]: Error: ERROR: 0:54: 'if' : syntax error

 

If we remove the conditional statement, we are still getting a compilation error on the following line:

mixRGB += ((1.0-alpha) * patternColor);

BJS - [10:16:40]: Error: ERROR: 0:55: 'mixRGB' : syntax error

 

Seems that we can't reassign values to already defined variables. Any other way to apply the += operator to mix colors? And any ideas about the if statement? Something with the basic shader model that we are using?

 

Other than that, if we remove the above code, the shaders runs perfectly.

 

Thank you in advance,

[Meulta]

Hello,

 

Is this all of your code ? if not, can you copy it here ?

 

To mix colors, you can use the mix() function : https://www.opengl.org/sdk/docs/man/html/mix.xhtml

 

Thanks

[highvrahos]

Yes, mix is a solution, although we still need the branching options, the if. It still gives compilation errors. Here is the full shader:

        precision highp float;                uniform mat4 worldView;                uniform vec3 vEyePosition;                uniform vec3 vLightPosition;        uniform sampler2D diffuseSampler;        uniform sampler2D bumpSampler;        uniform vec3 patternColor;        varying vec2 vUV;                varying vec4 vPosition;                varying vec3 vNormal;                varying vec3 vPositionW;                varying vec3 vNormalW;                // shader code                vec3 viewDirectionW = normalize(vEyePosition - vPositionW);        // Light        vec3 lightVectorW = normalize(vLightPosition - vPositionW);        // diffuse        float ndl = max(0., dot(vNormalW, lightVectorW));        // reflection        vec3 e = normalize( vec3( worldView * vPosition ) );        vec3 n = normalize( worldView * vec4(vNormal, 0.0) ).xyz;        vec3 r = reflect( e, n );        float m = 2. * sqrt(            pow( r.x, 2. ) +            pow( r.y, 2. ) +            pow( r.z + 1., 2. )        );        vec2 vN = r.xy / m + .5;        vec3 reflection = texture2D( bumpSampler, vN).rgb;                // Fresnel                float fresnelTerm = clamp(1.0 - dot(viewDirectionW, vNormalW), 0., 1.);                // Specular                vec3 angleW = normalize(viewDirectionW + lightVectorW);                float specComp = pow(dot(vNormalW, angleW), 256.);        // Final color        vec3 finalColor = (vec3(1.0,1.0,1.0)) * ndl * 3.0 * 0.2 + (1.0 - 0.2) * (fresnelTerm * 0.6 + (1.0 - fresnelTerm) * 0.3) + reflection.rgb * 0.5 + specComp * 0.5;                // Alpha                float alpha = (texture2D(diffuseSampler, vUV).r + texture2D(diffuseSampler, vUV).g + texture2D(diffuseSampler, vUV).b)/3.0;vec4 newColor;     if(alpha>0.0){        vec3 mixRGB = alpha * texture2D(diffuseSampler, vUV).rgb;         mixRGB += ((1.0-alpha) * patternColor);         newColor =  vec4(mixRGB * finalColor,0.5);     }else{          newColor =  vec4(finalColor,0.7);     }        void main(void) {            gl_FragColor = vec4(newColor, 0.6);        }

[GameMonetize]

Hey,

could you try to reproduce the error in CYOS? www.babylonjs.com/cyos

[highvrahos]

Yes, it works correctly in the CYOS. Any ideas why? I quote the full shader code.

        mesh_material[number] = new BABYLON.ShaderMaterial("color", scene, {            vertexElement: "vertexShaderCode",            fragmentElement: "fragmentShaderCode"        },        {                needAlphaBlending: true,            attributes: ["position", "normal", "uv"],            uniforms: ["world", "worldView", "worldViewProjection", "vEyePosition", "vLightPosition", "patternColor"]        });

    <script type="application/vertexShader" id="vertexShaderCode">        precision highp float;        // Attributes        attribute vec3 position;        attribute vec3 normal;        attribute vec2 uv;        // Uniforms        uniform mat4 world;        uniform mat4 worldViewProjection;        // Normal        varying vec2 vUV;        varying vec4 vPosition;        varying vec3 vNormal;                varying vec3 vPositionW;                varying vec3 vNormalW;        void main(void) {                vPosition = vec4(position, 1.0);                vNormal = normal;                vPositionW = vec3(world * vec4(position, 1.0));                vNormalW = normalize(vec3(world * vec4(normal, 0.0)));        gl_Position = worldViewProjection * vec4(position, 1.0);        vUV = uv;        }    </script>    <script type="application/fragmentShader" id="fragmentShaderCode">        precision highp float;                uniform mat4 worldView;                uniform vec3 vEyePosition;                uniform vec3 vLightPosition;        uniform sampler2D diffuseSampler;        uniform sampler2D bumpSampler;        uniform vec3 patternColor;        varying vec2 vUV;                varying vec4 vPosition;                varying vec3 vNormal;                varying vec3 vPositionW;                varying vec3 vNormalW;                // shader code                vec3 viewDirectionW = normalize(vEyePosition - vPositionW);        // Light        vec3 lightVectorW = normalize(vLightPosition - vPositionW);        // diffuse        float ndl = max(0., dot(vNormalW, lightVectorW));        // reflection        vec3 e = normalize( vec3( worldView * vPosition ) );        vec3 n = normalize( worldView * vec4(vNormal, 0.0) ).xyz;        vec3 r = reflect( e, n );        float m = 2. * sqrt(            pow( r.x, 2. ) +            pow( r.y, 2. ) +            pow( r.z + 1., 2. )        );        vec2 vN = r.xy / m + .5;        vec3 reflection = texture2D( bumpSampler, vN).rgb;                // Fresnel                float fresnelTerm = clamp(1.0 - dot(viewDirectionW, vNormalW), 0., 1.);                // Specular                vec3 angleW = normalize(viewDirectionW + lightVectorW);                float specComp = pow(dot(vNormalW, angleW), 256.);        // Final color        vec3 finalColor = (vec3(1.0,1.0,1.0)) * ndl * 3.0 * 0.2 + (1.0 - 0.2) * (fresnelTerm * 0.6 + (1.0 - fresnelTerm) * 0.3) + reflection.rgb * 0.5 + specComp * 0.5;                // Alpha                float alpha = (texture2D(diffuseSampler, vUV).r + texture2D(diffuseSampler, vUV).g + texture2D(diffuseSampler, vUV).b)/3.0;        void main(void) {            gl_FragColor = vec4(finalColor  + patternColor * (alpha), 0.6);        }    </script>

[GameMonetize]

Nothing obvious so far...Could you share a site somewhere that reproduces the issue?

[highvrahos]

Sent you a pm, I apologise, can't yet share a public url (work in progress)

[highvrahos]

Problem solved, we moved all the shader code inside the void main function and now it compiles successfully. Thank you for your support.