WebGL Error in Linking Program

Question

** Update ** - I just checked if it works normally in Firefox. It does. The issues seems to be with how Chromium processes the WebGL. Again, see the github link below.

I am supporting a webgl/CV program when I noticed that the site started to give an error from code I had not touched. It's throwing an error because the webgl program is not linking properly. I thought this odd because it was linking fine when I last touched this particular aspect of the project (~2 months ago). Some research pointed me to this link: Github discussion of the issue

From my understanding (please correct me if I'm wrong), there was an update how webgl is handling varying type variables. I am going to post the shader code and the function that uses it and hopefully someone can point out something to test that I have not.

this.createProgramObject = function(vetexShaderSource, fragmentShaderSource) {
        var vertexShaderObject = this.ctx.createShader(this.ctx.VERTEX_SHADER);
        this.ctx.shaderSource(vertexShaderObject, vetexShaderSource);
        this.ctx.compileShader(vertexShaderObject);
        if (!this.ctx.getShaderParameter(vertexShaderObject, this.ctx.COMPILE_STATUS)) {
            throw this.ctx.getShaderInfoLog(vertexShaderObject);
        }
        var fragmentShaderObject = this.ctx.createShader(this.ctx.FRAGMENT_SHADER);
        this.ctx.shaderSource(fragmentShaderObject, fragmentShaderSource);
        this.ctx.compileShader(fragmentShaderObject);
        if (!this.ctx.getShaderParameter(fragmentShaderObject, this.ctx.COMPILE_STATUS)) {
            throw this.ctx.getShaderInfoLog(fragmentShaderObject);
        }
        var programObject = this.ctx.createProgram();
        this.ctx.attachShader(programObject, vertexShaderObject);
        this.ctx.attachShader(programObject, fragmentShaderObject);
        this.ctx.linkProgram(programObject);
        if (!this.ctx.getProgramParameter(programObject, this.ctx.LINK_STATUS)) {
            throw ("Error linking shaders:" + this.ctx.getProgramInfoLog(programObject));
        }
        return programObject;
    };

In this particular call, the function is using point.vert and basic.frag.

point.vert

attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;

uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
uniform float uPointSize;

//for undetermined point attenuation feature
// uniform vec3 uAttenuation;

uniform vec3 uBias;
uniform vec3 uScale;
uniform int uCEMode;

varying vec4 vColor;

void main(void) {
    if(uCEMode == 1) {
        //use bias and scale unifroms for min max color enhancement
        vColor = (aVertexColor - vec4(uBias, 0.0)) * vec4(uScale, 1.0);
    }
    else {
        vColor = aVertexColor;
    }

    vec4 ecPos4 = uModelViewMatrix * vec4(aVertexPosition, 1.0);

    //make points larger as they get further away from the viewer
    //helps to make the cloud look less sparse when far enough to only see
    //the first level or two of the octree
    gl_PointSize = length(ecPos4) / uPointSize * 3.0;

    //for undetermined point attenuation feature
    // float attn = uAttenuation[0] + (uAttenuation[1] * dist) + (uAttenuation[2] * dist * dist);
    // gl_PointSize = (attn > 0.0 && attn < uPointSize) ? uPointSize * sqrt(1.0/attn) : uPointSize;

    gl_Position = uProjectionMatrix * ecPos4;
}

basic.frag

varying highp vec4 vColor;

void main(void) {
    gl_FragColor = vColor;
}

The only difference I can see between how vColor is declared is the highp specifier. If I remove it from basic.frag, it states "Uncaught ERROR: 0:1: '' : No precision specified for (float)". If I add highp to the declaration in point.vert, nothing changes. I assume then that that particular specifier is fine. Here is the error message from the js console in Chrome:

Uncaught Error linking shaders:Varyings with the same name but different type, or statically used varyings in fragment shader are not declared in vertex shader: vColor

Add precision highp float; to fragment shader and remove highp from varying in fragment shader also. Does it help? — Abstract Algorithm
Back to this problem after weeks away from it. I've tried adding highp to both, mediump, and removing precision from both. They all provide some kind of error. — JR Smith
Could you please provide us with full html, so we could try and debug this as quickly as possible? — Abstract Algorithm

Matt Bond Matt Bond · Accepted Answer · 2017-12-12T04:15:23

Add this to the top of your fragment shader:

#ifdef GL_FRAGMENT_PRECISION_HIGH
   precision highp float;
#else
   precision mediump float;
#endif

Then remove "highp" from basic.frag.

That might do it, but I agree that you aren't giving us enough to be sure.

-Bond

WebGL Error in Linking Program

1 Answers