使用flat修饰UV变量报错，如何避免UV插值获取精确像素？

报错原因 #

核心问题是WebGL版本兼容限制：
默认Three.js使用WebGL 1.0，对应GLSL ES 1.00版本，而flat修饰符是GLSL ES 3.00（对应WebGL 2.0）才引入的特性。在WebGL 1.0环境中，flat会被判定为非法保留字，直接导致着色器编译失败。

实现避免UV插值的两种方案 #

方案1：切换到WebGL 2.0（原生支持flat） #

直接升级到WebGL 2.0环境，就能直接使用flat修饰符：

1. 创建WebGL2渲染器：

const renderer = new THREE.WebGL2Renderer();

2. 适配GLSL ES 3.00的着色器代码：
   • 顶点着色器：声明版本，用out替代varying并添加flat修饰

   #version 300 es
   out flat vec2 vUv;
   
   void main() {
     vUv = uv;
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
   }
   

   • 片元着色器：声明版本，用in接收flat变量

   #version 300 es
   precision highp float;
   in flat vec2 vUv;
   
   void main() {
     // 此时整个三角形内的vUv值完全统一，无插值
     gl_FragColor = vec4(vUv, 0.0, 1.0);
   }
   

方案2：WebGL 1.0下模拟flat插值 #

如果需要兼容旧环境，可通过预处理几何体UV的方式模拟无插值效果：
核心思路：给每个三角形的三个顶点都赋同一个UV值（比如取三角形第一个顶点的UV），这样插值后整个三角形的UV值完全一致，等同于无插值。

代码示例：

// 以PlaneGeometry为例，处理BufferGeometry的UV属性
const geometry = new THREE.PlaneGeometry(2, 2, 10, 10);
const originalUvs = geometry.attributes.uv.array;
const newUvs = new Float32Array(originalUvs.length);

// 每个三角形对应3个顶点（6个UV数组元素，每个顶点2个值）
for (let i = 0; i < originalUvs.length; i += 6) {
  // 取当前三角形第一个顶点的UV
  const u = originalUvs[i];
  const v = originalUvs[i + 1];
  // 给当前三角形的三个顶点统一赋值该UV
  newUvs[i] = u;
  newUvs[i + 1] = v;
  newUvs[i + 2] = u;
  newUvs[i + 3] = v;
  newUvs[i + 4] = u;
  newUvs[i + 5] = v;
}

// 更新几何体的UV属性
geometry.setAttribute('uv', new THREE.BufferAttribute(newUvs, 2));

之后使用常规WebGL1着色器中的varying vec2 vUv即可，片元着色器拿到的vUv会是每个三角形统一的值，无插值效果。

内容的提问来源于stack exchange，提问作者longProfileName