WebGL: Loop index cannot be compared with non-constant expression

This happens because on some hardware, GLSL loops are un-rolled into native GPU instructions. This means there needs to be a hard upper limit to the number of passes through the for loop, that governs how many copies of the loop's inner code will be generated. If you replace numBlurPixelsPerSide with a const float or even a #define directive, and the shader compiler can then determine the number of passes at compile time, and generate the code accordingly. But with a uniform there, the upper limit is not known at compile time.

There's an interesting wrinkle in this rule: You're allowed to break or call an early return out of a for loop, even though the max iterations must be discernible at compile time. For example, consider this tiny Mandelbrot shader. This is hardly the prettiest fractal on GLSL Sandbox, but I chose it for its small size:

precision mediump float;
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
varying vec2 surfacePosition;

const float max_its = 100.;

float mandelbrot(vec2 z){
    vec2 c = z;
    for(float i=0.;i<max_its;i++){     // for loop is here.
        if(dot(z,z)>4.) return i;      // conditional early return here.
        z = vec2(z.x*z.x-z.y*z.y,2.*z.x*z.y)+c;
    }
    return max_its;
}


void main( void ) {
    vec2 p = surfacePosition;
    gl_FragColor = vec4(mandelbrot(p)/max_its);
}

In this example, max_its is a const so the compiler knows the upper limit and can un-roll this loop if it needs to. Inside the loop, a return statement offers a way to leave the loop early for pixels that are outside of the Mandelbrot set.

You still don't want to set the max iterations too high, as this can produce a lot of GPU instructions and possibly hurt performance.

Sometimes you can use my very simple solving of issue.

My fragment of the shader source code:

const int cloudPointsWidth = %s;
for ( int i = 0; i < cloudPointsWidth; i++ ) {
   //TO DO something
}

You can see '%' : syntax error above. But I am replace %s to a number in my javascript code before use my shader. For example:

vertexCode = vertexCode.replace( '%s', 10 );

vertexCode is my shader source code.

Everytime if I want to change cloudPointsWidth, I am destroying my old shader and creating new shader with new cloudPointsWidth .

Hope sometimes my solving can to help you.

You can just do a for loop with large constant number and use a break.

for(int i = 0; i < 1000000; ++i) 
{ 
    // your code here
    if(i >= n){
        break;
    }
}

I've had similar problem with image downsampling shader. The code is basically the same:

for (int dx = -2 * SCALE_FACTOR; dx < 2 * SCALE_FACTOR; dx += 2) {
    for (int dy = -2 * SCALE_FACTOR; dy < 2 * SCALE_FACTOR; dy += 2) {
        /* accumulate fragment's color */
    }
}

What I've ended up doing is using preprocessor and creating separate shader programs for every SCALE_FACTOR used (luckily, only 4 was needed). To achieve that, a small helper function was implemented to add #define ... statements to shader code:

function insertDefines (shaderCode, defines) {
    var defineString = '';

    for (var define in defines) {
        if (defines.hasOwnProperty(define)) {
            defineString +=
                '#define ' + define + ' ' + defines[define] + '\n';
        }
    }

    var versionIdx = shaderCode.indexOf('#version');

    if (versionIdx == -1) {
        return defineString + shaderCode;
    }

    var nextLineIdx = shaderCode.indexOf('\n', versionIdx) + 1;

    return shaderCode.slice(0, nextLineIdx) +
        defineString +
        shaderCode.slice(nextLineIdx);
}

The implementation is a bit tricky because if the code already has #version preprocessor statement in it, all other statements have to follow it.

Then I've added a check for SCALE_FACROR being defined:

#ifndef SCALE_FACTOR
#   error SCALE_FACTOR is undefined
#endif

And in my javascript code I've done something like this:

var SCALE_FACTORS = [4, 8, 16, 32],
    shaderCode, // the code of my shader
    shaderPrograms = SCALE_FACTORS.map(function (factor) {
        var codeWithDefines = insertDefines(shaderCode, { SCALE_FACTOR: factor });
        /* compile shaders, link program, return */
    });

I use opengl es3 on android and solve this problem by using extension above the beginning of program like this:

#extension GL_EXT_gpu_shader5 : require

I don't know whether it work on webGL, but you can try it. Hope it can help.

You can also use template litterals to set the length of the loop

onBeforeCompile(shader) {
  const array = [1,2,3,4,5];
  shader.uniforms.myArray = { value: array };

  let token = "#include <begin_vertex>";
  const insert = `
    uniform float myArray[${array.length}];
    for ( int i = 0; i < ${array.length}; i++ ) {
       float test = myArray[ i ];
    }
  `;
  shader.vertexShader = shader.vertexShader.replace(token, token + insert);
}