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使用不同的版本号，这就是为什么它反对您的版本声明。

Answer 2

WebGL基于OpenGL ES 2，它不使用任何内置的东西（例如ftransform ， gl_MultiTexCoord0 ）。 否则，该代码在语法上是正确的-出于OpenGL ES 1的目的，它可以很好地进行编译（但对于WebGL则没有用）。