opengl-es - Webgl GLSL/Open GL ES 2.0

Question

我目前正在将使用 OpenGLES 2.0 为 android 和 IOS 设备编写的引擎移植到 webgl，我偶然发现了一个使用着色器的问题。大多数为移动应用程序编写的着色器在 webGL 上不起作用。示例:

($在编译之前被预处理器替换为一个值)

顶点着色器:

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

}

片段着色器:

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;
    }

}

它在 OpenGLES 上工作起来就像一个魅力，但在 webGL 上，我收到关于 const float 被初始化为非常量值的报告。在声明 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'

有什么我可以做的，还是我必须重写所有着色器以匹配 WebGL GLSL 细节？

Answer 1

当我在 webGL 着色器上工作时，唯一允许的常量是纯数字，但我仍然没有找到解决方法。看来重写是唯一的选择。 :P