in int gl_VertexID causing error with three.js

Question

I've been having trouble with the gl_VertexID built in vertex index, passed using in, to work with Three.js

I'm not sure why, as the documentation says it works in all versions of OpenGL

http://www.opengl.org/sdk/docs/manglsl/xhtml/gl_VertexID.xml

I'm using this vertex shader:

        uniform int freqData[64];
        uniform int fftSize;

        in int gl_VertexID;

        void main() {
            vec3 norm = normalize(position);

            int modFFT = mod(gl_VertexID, fftSize);

            vec3 newPosition = norm * float(freqData[modFFT]);

            gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
        }

The error I receive is:

ERROR: 0:68: 'in' : syntax error

It seems to have a problem with the in declaration, and it doesn't complain about anything else (the error console is able to detect multiple compilation errors).

I very much appreciate your help, I'm working with yesterday's Three.js build.

Answer 1

First, there's no need to declare gl_VertexID; either it is present (thanks to an extension, because WebGL, which is built on OpenGL ES 2.0, does not provide this as a core feature), or it is not.

Second, WebGL, which is built on OpenGL ES 2.0, does not use in and out syntax; that's for desktop OpenGL 3.0 and above. GLSL ES uses the older attribute syntax. So even if you needed to declare gl_VertexID (and again, you do not), you would need to call it an attribute, not an in.

Answer 2

As far as I'm aware, in WebGL you can't access built-in vertex indices.

However you should be able emulate this by providing your own custom attribute stream, set to values that would be equivalent to such built-in index stream.

In three.js there are no integer custom attributes implemented yet, so you would need to use float attribute.

Check "displacement" attribute in this example:

http://mrdoob.github.com/three.js/examples/webgl_custom_attributes.html