WebGL创建16位无符号整数2D纹理报错1282的解决方法

核心问题分析 #

错误1282是INVALID_OPERATION，你的代码存在三个关键问题：

1. 参数不匹配：RGBA16UI（内部格式）要求对应的type必须是UNSIGNED_SHORT，而非你使用的UNSIGNED_INT；format选RGBA_INTEGER是正确的，但type与内部格式位宽不匹配。
2. 上下文版本问题：RGBA16UI是WebGL2专属格式，p5.js默认创建WebGL1上下文，必须显式指定WebGL2环境。
3. 整数纹理过滤限制：整数纹理不支持线性过滤，默认的LINEAR过滤规则会触发错误，需要改为NEAREST。

修正后的代码 #

function setup() {
  // 显式创建WebGL2上下文
  createCanvas(800, 600, WEBGL2);
  let gl = this._renderer.GL;
  
  let tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, tex);
  
  // 先设置整数纹理兼容的过滤与包裹参数
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  
  // 修正参数匹配的texImage2D调用
  gl.texImage2D(
    gl.TEXTURE_2D,
    0,
    gl.RGBA16UI,
    8,
    8,
    0,
    gl.RGBA_INTEGER,
    gl.UNSIGNED_SHORT,
    null
  );
  
  console.log(gl.getError()); // 此时应输出0（无错误）
}

关键调整点说明 #

• WebGL2上下文：p5.js中必须通过createCanvas(width, height, WEBGL2)创建WebGL2环境，否则无法使用RGBA16UI这类整数纹理格式。
• 参数匹配：内部格式RGBA16UI对应format=RGBA_INTEGER、type=UNSIGNED_SHORT，每个通道占16位，与内部格式的位宽严格对应。
• 纹理过滤设置：整数纹理不支持线性插值，必须将TEXTURE_MIN_FILTER和TEXTURE_MAG_FILTER设为NEAREST，包裹模式用CLAMP_TO_EDGE可避免额外兼容性问题。

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