Search code examples
javascriptthree.jsglslwebglwebgl2

Can't avoid interpolation of UV : " 'flat' : Illegal use of reserved word "


I want to made that UV are not interpolated, so I can get the exact pixel (As a beginner I see this from that video). Why using 'flat' gives an error?

If I past flat before varying of Uv (I named it vUv):

flat varying vec2 vUv;

I get that errors from VS Code extentsion WebGL GLSL Editor:

'flat' : Reserved word. 
'flat' : not supported for this version or the enabled extensions

And that error from Three.js in console:

THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false

Material Name: 
Material Type: RawShaderMaterial

Program Info Log: Vertex shader is not compiled.

VERTEX

ERROR: 0:14: 'flat' : Illegal use of reserved word

  9: attribute vec2 uv;
  10: 
  11: varying float time;
  12: varying vec3 vPostion;
  13: varying vec3 vNormal;
> 14: flat varying vec2 vUv;
  15: 
  16: uniform mat4 viewMatrix;

The answer why it gives an error might be:

I think 'flat' is not supported by the version of GLSL used in WebGL.

From that answer on the same error.

But the answer says how to get normalized normals (I want UV instead). I also didn't understand where to get vertex_view_space (position of object from camera perspective as I understood) in Three.js, but it doesn't matter as it for calculating vertex normals. I might be wrong.

I find how to stop interpolation of color - answer, but I need UV.

P.S.

This site helped me move from GLSL1 to GLSL3


Solution

  • The flat qualifier is not supported in GLSL ES 1.00 (OpenGL ES Shading Language 1.00 Specification). You have to use a shader with #version 300 es (see OpenGL ES Shading Language 3.00 Specification). In three.js this can be achieved by setting the property .glslVersion to THREE.GLSL3 in the ShaderMaterial:

    const material = new THREE.ShaderMaterial( {
       glslVersion: THREE.GLSL3,
       // [...]
    } );
    

    Note that this is of course only possible with a WebGL 2.0 context ( however, this is the default in three.js if possible)

    If you do not use a three.js ShaderMaterial you have to put the version information in the first line of the shader

    #version 300 es
    

    Additionally you need to migrate the shader code from GLSL ES 1.00 to GLSL ES 3.00.