As a beginner, I recently learned that UV coordinates are not interpolated in WebGL, allowing for exact pixel values to be retrieved. However, when attempting to use the 'flat' keyword, I encountered an error.
By adding 'flat' before the varying declaration of Uv (renamed as vUv):
flat varying vec2 vUv;
I received errors from both the VS Code extension WebGL GLSL Editor:
'flat' : Reserved word.
'flat' : not supported for this version or the enabled extensions
And also from Three.js 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 explanation for this error could potentially be that 'flat' is not supported by the GLSL version used in WebGL, as suggested in a related answer.
While that answer discusses how to normalize normals instead of addressing UV concerns, it also mentions obtaining vertex_view_space in Three.js which may not apply to UV calculations.
Although I found a solution to prevent color interpolation (answer), my goal remains focused on understanding UV handling.
P.S.
This transition guide from GLSL1 to GLSL3 at WebGL Fundamentals was particularly helpful during my learning process.