Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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). How to get the same result as in the video?

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

'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 may 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.

Can somebody tell me what is solution here, please?

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

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading