WebGL 是浏览器提供的底层 GPU 接口，直接执行着色器；Three.js 等是其上层封装，最终仍依赖 WebGL 调用；初始化失败常因 canvas 未挂载或 WebGL 被禁用；性能瓶颈多源于 JS 层低效或 WebGL 使用不当；WebGPU 是演进方向但兼容性不足，当前主流仍选 WebGL2。
HTML 中的 WebGL 本身不是“影响”3D渲染，而是实现 Web 端 3D 渲染的底层机制——没有它，浏览器根本跑不起来真正的 3D 渲染。
WebGL 是什么，和 Three.js 之类的关系是什么
WebGL 是浏览器暴露的一套 JavaScript 接口，直接调用 GPU 执行顶点着色器和片元着色器。它本身不提供 Mesh、Camera 或 Light 这类高级概念，全是裸金属操作。
Three.js、Babylon.js 这些库是建在 WebGL 之上的封装层，帮你省掉 gl.createBuffer()、gl.useProgram()、手动传 uniform 这些重复劳动。但一旦你调用 renderer.render(scene, camera)，最终一定落到 WebGL 的 gl.drawArrays() 或 gl.drawElements() 上。
- 想改渲染逻辑（比如加后处理、换光照模型）？绕不开 WebGL 的着色器代码
- 遇到卡顿或黑屏？先看
gl.getError()返回什么，而不是只查 Three.js 的报错 - 用
WebGL2RenderingContext而非WebGLRenderingContext？意味着你能用gl.texStorage2D()预分配纹理内存，避免运行时重分配抖动
常见 WebGL 初始化失败导致 3D 渲染白屏/报错
页面加载了 Three.js，也 new 出了 WebGLRenderer，但 canvas 一片空白，控制台可能静默，也可能报 TypeError: Cannot read property 'getExtension' of null —— 这通常说明 canvas.getContext('webgl') 返回了 null。
立即学习“前端免费学习笔记（深入）”；
- 检查 canvas 是否已挂载到 DOM：在
document.body.appendChild(canvas)之后再初始化 renderer - 确认 canvas 没被设成
display: none或宽高为 0；WebGL 上下文在不可见或尺寸为 0 时可能创建失败 - 某些企业内网或旧版 Chrome 启用了
--disable-webgl启动参数，此时getContext('webgl')必然返回 null - 移动端需注意：iOS Safari 对
webgl2支持较晚（iOS 15.4+），降级用webgl时别硬传{ powerPreference: 'high-performance' }，它会直接拒掉上下文
WebGL 渲染性能瓶颈常出在哪儿
帧率掉到 30fps 以下，不是显卡不行，大概率是 JavaScript 层或 WebGL 调用方式出了问题。
- 每帧都新建
Float32Array传顶点数据？→ 改用bufferData()+bindBuffer()复用缓存，或启用gl.bufferSubData()局部更新 - 频繁切换 shader program（比如每个物体都调一次
gl.useProgram()）？→ 合并材质、按 shader 分组绘制，减少 state change - canvas 尺寸远大于显示区域（如设成 2000×1500 但只 display 为 800×600）？→ 实际绘制分辨率过高，GPU 填充率爆表；用
renderer.setSize(width, height, false)第三个参数禁用 canvas.style 自动缩放，再手动 setAttribute('width') / 'height' - 启用了
antialias: true但目标设备不支持 MSAA？→ 查gl.getExtension('WEBGL_multisample')，不支持就关掉，否则 fallback 到慢速软件抗锯齿
WebGL 和 WebGPU 不是替代关系，而是演进路径
现在写新项目还该选 WebGL 吗？答案取决于你的兼容性要求和功能需求。
WebGPU 是下一代标准，支持计算着色器、更接近原生 GPU API，但截至 2024 年中：navigator.gpu 在 Safari 完全不可用，Firefox 仅 Nightly 版支持，Chrome 需手动开启 flag。而 WebGL1 兼容所有现代浏览器，WebGL2 在 Chrome/Firefox/Edge 稳定可用，iOS Safari 从 15.4 起支持。
- 要做跨平台轻量 3D 展示（产品页、AR 小程序）？WebGL2 +
THREE.WebGLRenderer仍是务实选择 - 需要粒子爆炸、布料模拟或实时光线追踪预览？WebGPU 的
computePassEncoder才能扛住，但得接受 Safari 用户无法访问 - 别指望 “自动升级”：WebGPU 的资源管理（
GPUBuffer、GPUTexture）和同步模型（GPUCommandEncoder）与 WebGL 完全不兼容，迁移是重写级工作
真正容易被忽略的点：WebGL 的错误往往不抛异常，而是静默失败。上线前务必在低配安卓机、旧 iPad 上跑一遍 gl.getError() 日志采集，而不是只盯着 DevTools 里 Three.js 的 warning。
