Webgl GLSL / Open GL ES 2.0 - opengl-es

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).