无需上下文访问WebGL常量/枚举的技术方案问询

这个问题确实戳中了WebGL设计里一个容易让人困惑的点——为什么把所有常量都绑定在渲染上下文上，而不是搞个全局的枚举对象？我来拆解下背后的原因，再给你几个实现你想要的WebGL.TEXTURE_2D调用方式的方案：

为什么WebGL常量要放在上下文成员里？ #

主要有三个核心原因：

• 版本与扩展兼容性：WebGL有多个版本（WebGL 1.0、WebGL 2.0），还有大量可选扩展。不同版本/扩展支持的常量不一样，把常量绑定到上下文上，可以天然区分哪些常量当前上下文可用。比如WebGL 2.0新增的TEXTURE_3D常量，不会出现在WebGL 1.0的上下文里，也不会污染全局空间。
• 实现灵活性：浏览器厂商在实现WebGL时，某些扩展的常量只有在你主动启用该扩展后才会挂载到上下文上。这种设计让厂商可以按需加载常量，避免初始化时就加载所有可能的常量，提升性能。
• 避免全局命名污染：全局变量空间是所有代码共享的，WebGL的常量数量不少（光核心常量就有上百个），如果全部放到全局，很容易和其他库的变量名冲突，比如某个第三方库也定义了TEXTURE_2D变量，就会导致不可预期的问题。

如何实现全局的WebGL常量对象？ #

如果你确实想要WebGL.TEXTURE_2D这样的调用方式，有两种可行方案：

方案1：自动提取上下文常量到全局 #

首次创建WebGL上下文时，遍历上下文（包括已启用的扩展）的所有属性，把全大写的数值型常量收集到全局的WebGL对象里。代码示例：

function initWebGLGlobalConstants(gl) {
  // 初始化全局WebGL对象
  window.WebGL = window.WebGL || {};

  // 提取上下文核心常量
  for (const key in gl) {
    // 通常WebGL常量都是大写，且为数值类型
    if (key === key.toUpperCase() && typeof gl[key] === 'number') {
      WebGL[key] = gl[key];
    }
  }

  // 提取已启用扩展的常量
  const supportedExtensions = gl.getSupportedExtensions();
  supportedExtensions.forEach(extName => {
    const extension = gl.getExtension(extName);
    for (const key in extension) {
      if (key === key.toUpperCase() && typeof extension[key] === 'number') {
        WebGL[key] = extension[key];
      }
    }
  });
}

// 使用示例：创建上下文后调用
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (gl) {
  initWebGLGlobalConstants(gl);
  // 现在就可以用WebGL.TEXTURE_2D了
  new renderer.Texture(WebGL.TEXTURE_2D);
}

这个方案的好处是自动同步当前上下文支持的所有常量，不用手动维护。但要注意：如果你的应用同时创建多个不同版本的上下文（比如同时用WebGL1和WebGL2），全局常量会被最后创建的上下文覆盖，这时候可能需要为不同版本维护独立的全局对象（比如WebGL1和WebGL2）。

方案2：手动定义常用常量 #

如果担心自动提取会混入非常量的属性（虽然概率很低），可以手动整理常用的常量到全局对象里，比如：

window.WebGL = {
  // 核心纹理常量
  TEXTURE_2D: 0x0DE1,
  TEXTURE_CUBE_MAP: 0x8513,
  // 缓冲区常量
  ARRAY_BUFFER: 0x8892,
  ELEMENT_ARRAY_BUFFER: 0x8893,
  // 渲染状态常量
  COLOR_BUFFER_BIT: 0x00004000,
  DEPTH_BUFFER_BIT: 0x00000100,
  // 其他你需要的常量...
};

这个方案的缺点是需要手动维护常量值，要注意不同WebGL版本的常量值是否有变化，但胜在可控，适合只用到少量常量的场景。

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