webGL着色器错误

Question

这些着色器在我的游戏引擎中运行得很好,但是当我尝试将它们与webGL一起使用时,它们会向我吐出一大堆错误,

ERROR: 0:21: 'for' : Invalid init declaration
ERROR: 0:2: '' : Version number not supported by ESSL 
ERROR: 0:7: 'ftransform' : no matching overloaded function found 
ERROR: 0:7: 'assign' :  cannot convert from 'const mediump float' to 'Position highp 4-component vector of float'
ERROR: 0:9: 'gl_MultiTexCoord0' : undeclared identifier 
ERROR: 0:9: 'assign' :  cannot convert from 'float' to 'varying highp 4-component vector of float'

那么,有人可以帮忙吗？

<script id="shader-fs" type="x-shader/x-fragment">
    precision mediump float;

    const float BLOOM_AMOUNT = 10.0;
// Increasing range can lower your FPS.
const int BLOOM_RANGE = 3;


uniform sampler2D composite;
varying vec4 texcoord;
varying vec4 texel;


        vec4 addBloom(vec4 c, vec2 t) {
                int j;
                int i;
                vec4 bloom = vec4(0.0);
                vec2 loc = vec2(0.0);
                float count = 0.0;

                for( i= -BLOOM_RANGE ; i < BLOOM_RANGE; i++ ) {
                        for ( j = -BLOOM_RANGE; j < BLOOM_RANGE; j++ ) {
                                loc = t + vec2(j, i)*0.004;

                                // Only add to bloom texture if loc is on-screen.
                                if(loc.x > 0.0 && loc.x < 1.0 && loc.y > 0.0 && loc.y < 1.0) {
                                        bloom += texture2D(composite, loc) * BLOOM_AMOUNT;
                                        count += 1.0;
                                }
                        }
                }
                bloom /= vec4(count);

                if (c.r < 0.3)
                {
                        return bloom*bloom*0.012;
                }
                else
                {
                        if (c.r < 0.5)
                        {
                                return bloom*bloom*0.009;
                        }
                        else
                        {
                                return bloom*bloom*0.0075;
                        }
                }
        }


void main() {


        vec4 color = texture2D(composite, texcoord.st);

        color += addBloom(color, texcoord.st);

        gl_FragColor = color;
}
</script>

<script id="shader-vs" type="x-shader/x-vertex">
    #version 120

    varying vec4 texcoord;

    void main() {
        gl_Position = ftransform();

        texcoord = gl_MultiTexCoord0;
    }
</script>

Answer 1

WebGL基于OpenGL ES,与OpenGL不同(它几乎是一个子集).OpenGL ES的GLSL版本中缺少或不同的功能有很多.

以下是我可以从您的错误消息中识别的问题:

• 在for循环中,变量必须在循环头本身中声明,而不是在外部:

  for( int i = -BLOOM_RANGE ; i < BLOOM_RANGE; i++ ) {
  

• OpenGL ES中完全没有固定功能模式; 你必须编写所有自己的转换和光照(或者,当然,使用提供它的框架).这就是缺少ftransform()和的原因gl_MultiTexCoord0.(我相信转换错误是由此引发的.)

• GLSL ES使用不同的版本号,这就是它反对您的版本声明的原因.