CODEWITHSUNDEEP
javascriptopengl-esglslwebgl
CyanPrime
CyanPrime

Reputation: 5193

webGL shader errors

These shaders work great in my game engine, but when I tried to use them with webGL they spat a whole bunch of errors at me,

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'

So, can anyone help?

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

Upvotes: 2

Views: 6464

Answers (2)

wcochran
wcochran

Reputation: 10916

WebGL is based on OpenGL ES 2 which does not use any built-in stuff (e.g., ftransform, gl_MultiTexCoord0). Otherwise, the code is syntactically fine -- it compiles fine for OpenGL ES 1 purposes (but no go for WebGL).

Upvotes: 0

Kevin Reid
Kevin Reid

Reputation: 43962

WebGL is based on OpenGL ES, which is not the same as OpenGL (it is almost a subset). There are a number of features absent from or different in OpenGL ES's version of GLSL.

Here are the problems I can identify from your error messages:

  • In a for loop, the variable must be declared in the loop header itself, not outside:

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

  • The fixed-function mode is completely absent in OpenGL ES; you must write all of your own transformation and lighting (or, of course, use a framework which provides it). This is the reason for the absence of ftransform() and gl_MultiTexCoord0. (I believe the conversion errors are cascading from this.)

  • GLSL ES uses different version numbers, which is why it objects to your version declaration.

Upvotes: 8

Related Questions