【WebGL】getContext参数详解

使用

const gl = canvas.getContext("webgl", {
  // 可选参数
  alpha: boolean,          // 是否包含 alpha 通道
  depth: boolean,          // 是否启用深度缓冲区
  stencil: boolean,        // 是否启用模板缓冲区
  antialias: boolean,      // 是否启用抗锯齿
  premultipliedAlpha: boolean, // 是否预乘 alpha
  preserveDrawingBuffer: boolean, // 是否保留绘图缓冲区
  powerPreference: string, // 性能偏好（"high-performance" 或 "low-power"）
  failIfMajorPerformanceCaveat: boolean, // 是否在性能不足时返回 null
  desynchronized: boolean, // 是否禁用同步渲染（提高性能，但可能影响交互）
  xrCompatible: boolean    // 是否兼容 WebXR（VR/AR）
});

默认参数

参数名称	默认值	说明
alpha	true	是否包含 alpha 通道（透明背景）
depth	true	是否启用深度缓冲区（用于 3D 深度测试）
stencil	false	是否启用模板缓冲区（用于高级遮罩效果）
antialias	true	是否启用抗锯齿（使边缘更平滑）
premultipliedAlpha	true	是否预乘 alpha 通道（影响颜色混合方式）
preserveDrawingBuffer	false	是否保留绘图缓冲区（允许读取操作，但降低性能）
powerPreference	"default"	性能偏好："default"/"high-performance"/"low-power"
failIfMajorPerformanceCaveat	false	是否在性能不足时返回 null（而不是降级渲染）
desynchronized	false	是否禁用同步渲染（提高性能，但可能导致画面撕裂）
xrCompatible	false	是否兼容 WebXR（VR/AR 应用）