WebGL三角形模式下如何获取形状内片元坐标？gl_FragCoord无效

核心思路：用顶点传递局部UV坐标替代gl_FragCoord #

gl_FragCoord是屏幕空间坐标，和你绘制的矩形局部位置无关，所以在TRIANGLES模式下无法直接用来构建矩形的[0,1]局部空间。正确的做法是给每个顶点绑定对应的局部UV坐标，传递到片元着色器使用。

1. 顶点着色器实现 #

给每个顶点添加UV属性，将矩形的左上角对应(0.0, 0.0)，右下角对应(1.0, 1.0)，并把UV传递给片元着色器：

attribute vec2 a_position;
attribute vec2 a_uv;
uniform mat4 u_mvp;
varying vec2 v_uv;

void main() {
  gl_Position = u_mvp * vec4(a_position, 0.0, 1.0);
  v_uv = a_uv;
}

2. 片元着色器实现边框+实心填充 #

基于传递来的v_uv（范围[0,1]），用smoothstep实现抗锯齿的边框效果：

precision mediump float;
uniform float u_borderWidth; // UV空间的边框宽度，范围0~0.5
uniform vec4 u_fillColor;
uniform vec4 u_borderColor;
varying vec2 v_uv;

void main() {
  // 计算当前像素到矩形最近边缘的距离
  float edgeDist = min(
    min(v_uv.x, 1.0 - v_uv.x),
    min(v_uv.y, 1.0 - v_uv.y)
  );
  
  // smoothstep实现平滑过渡：距离小于borderWidth时显示边框色，否则显示填充色
  float mixFactor = smoothstep(u_borderWidth - 0.002, u_borderWidth, edgeDist);
  gl_FragColor = mix(u_borderColor, u_fillColor, mixFactor);
}

3. 绘制时的顶点数据准备 #

用TRIANGLES模式绘制矩形需要6个顶点（两个三角形），对应的位置和UV数据示例：

// 顶点位置（假设是标准化设备坐标，可根据MVP矩阵调整）
const positions = [
  -0.5, 0.5,   // 左上
  -0.5, -0.5,  // 左下
  0.5, 0.5,    // 右上
  0.5, 0.5,    // 右上
  -0.5, -0.5,  // 左下
  0.5, -0.5    // 右下
];

// 对应UV数据
const uvs = [
  0.0, 0.0,
  0.0, 1.0,
  1.0, 0.0,
  1.0, 0.0,
  0.0, 1.0,
  1.0, 1.0
];

关键注意点 #

• 如果需要固定像素宽度的边框，不要直接传像素值，要转换成UV空间比例：uvBorderWidth = pixelBorder / rectSideLength（比如矩形宽200px，边框2px，那么uvBorderWidth=2/200=0.01）
• u_borderWidth的有效范围是0到0.5，超过0.5会导致边框覆盖整个矩形

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