Webgl GLSL / Open GL ES 2.0

Question

I'm curently porting an engine written for android and IOS devices using OpenGLES 2.0 to webgl and I stumbled uppon a problem using shaders. Most of the shaders written for the mobile app doesn't work on webGL. Example :

(the $ are replaced with a value by a preprocessor before being compiled )

Vertex Shader :

uniform mat4 u_mvpMatrix;

attribute vec4 a_position;
attribute vec2 TexCoordIn;

varying vec2 TexCoordOut; 
varying highp vec2 MCPosition;
varying float radius1;
varying float radius2;

uniform int time;
const int delay = ($2*60)/1000;
const int animDuration = ($3*60)/1000;

void main()
{
    gl_Position = u_mvpMatrix * a_position;

    MCPosition = a_position.xy;

    TexCoordOut = TexCoordIn;

    int timer = time - delay;
    radius1  = float(240 * (timer-26) / animDuration);
    radius2  = float(240 * (timer-1)  / animDuration);

}

Fragment Shader :

precision mediump float;

uniform vec2 spriteSize;
uniform vec2 spritePosition;
uniform lowp float alpha;
uniform lowp float brightness;
uniform sampler2D Texture;
uniform int time;


varying vec2 MCPosition;
varying vec2 TexCoordOut; 
varying float radius1;
varying float radius2;

const float hexRadius = 7.0;
const float hexWidth = hexRadius*sqrt(3.0);
const float cos30 = hexRadius/hexWidth;
const float midHexRadius = hexRadius/2.0;
const float midHexWidth = hexWidth/2.0;
const vec2 centerEffect = vec2($1,$0);

const float SIDE =  hexRadius * 3. / 2.;
const float HEIGHT = hexWidth;
const float SEMI_HEIGHT = HEIGHT / 2.;
const float RADIUS = hexRadius;


vec2 cellIndex(float i, float j) 
{
    float mX = i * SIDE;
    float mY = SEMI_HEIGHT * (2. * j + mod(i, 2.));
    return vec2(mX, mY);
}

void main()
{  
    vec2 center;
    bool isOnEdge = false;

    float x = MCPosition.y;
    float y = MCPosition.x;

    float ci = floor(x/SIDE);
    float cx = mod(x, SIDE);

    float isCiImpair = mod(ci, 2.);

    float ty = y - isCiImpair * SEMI_HEIGHT;
    float cj = floor( ty / HEIGHT);
    float cy = ty - HEIGHT * cj;

    float border = abs(RADIUS / 2. - RADIUS * cy / HEIGHT);

    if (cx > border) 
    {
        center = cellIndex(ci , cj);

        if( cy < 1. || cy > (HEIGHT-1.) || (cx- border) < 1.0)
        {
            isOnEdge = true;
        }
    }
    else 
    {
        center = cellIndex(ci - 1., cj + isCiImpair - ((cy < SEMI_HEIGHT) ? 1. : 0.));  

        if( (border - cx ) < 1.0)
        {
            isOnEdge = true;
        }
    }



    float distFromCenter = distance(centerEffect, center);

    if(distFromCenter > radius2)
    {
        gl_FragColor =  vec4(0.);
    }
    else
    {
        vec4 texColor =  texture2D(Texture, TexCoordOut);

        //filling is over
        if(distFromCenter < radius1)
        {
            gl_FragColor =  texColor;
        }
        else
        {
            float ratio = (radius2 - distFromCenter)/(radius2 - radius1);

            gl_FragColor = vec4(texColor.a * ratio);

            if(!isOnEdge)
            {
                gl_FragColor.rgb *= texColor.rgb;
            }
        }
        gl_FragColor.rgb *= brightness;
    }

}

It works like a charm on OpenGLES but on webGL I'm having reports about const float being initialized with non constant values. The operations I do always returns the same results when declaring a const.

An error occurred compiling the shaders: ERROR: 0:17: '=' :  assigning non-constant to 'const mediump float'
ERROR: 0:18: '=' :  assigning non-constant to 'const mediump float'
ERROR: 0:20: '=' :  assigning non-constant to 'const mediump float'
ERROR: 0:24: '=' :  assigning non-constant to 'const mediump float'
ERROR: 0:25: '=' :  assigning non-constant to 'const mediump float'

Is there something I can do about it, or do I have to rewrite all shaders to match WebGL GLSL specifics ?

Answer 1

When I was working on webGL shaders, the only consts that were allowed were pure numbers and I still haven't found a way round. It seems that rewriting is the only option. :P

Answer 2

Why not to use defines for your int/floats (#define right in shader code)?
For me "const vec2" works fine. If it's not for you - move them to uniform (By the way, it seems that nVidia drivers treat consts as uniforms).