17370845950

WebGL是基于OpenGL ES的JavaScript API，通过HTML5调用GPU实现3D渲染；它提供低阶接口需手动管理着色器、缓冲区等，而Three.js等库在其上封装以提升开发效率。

WebGL 是一种在网页浏览器中直接渲染 3D 图形的 JavaScript API，它基于 OpenGL ES（嵌入式系统版本），无需插件即可通过 HTML5 元素调用 GPU 进行高性能图形计算。JavaScript 本身不“内置”3D绘图能力，而是通过 WebGL 提供的一组底层接口，控制顶点着色器、片元着色器、缓冲区、纹理等，从而构建和渲染 3D 场景。

WebGL 的核心工作方式

WebGL 不是高级图形库（如 Three.js），而是一套低阶接口，需要开发者手动管理：

• 获取 的 WebGL 渲染上下文（gl = canvas.getContext('webgl')）
• 编写并编译 GLSL 着色器代码（顶点着色器定义位置，片元着色器定义颜色）
• 创建缓冲区（如顶点坐标、法线、纹理坐标），将数据传入 GPU
• 设置渲染状态（启用深度测试、清除颜色/深度缓冲等）
• 调用 gl.drawArrays() 或 gl.drawElements() 启动绘制

一个最简 WebGL 绘制三角形的步骤

这是理解 WebGL 流程的关键起点：

• 准备 HTML：
• 获取上下文：const gl = document.getElementById('gl-canvas').getContext('webgl');
• 写两个着色器字符串（顶点着色器 + 片元着色器），用 gl.createShader 编译链接成程序
• 创建缓冲区，填入 3 个顶点（如 [-0.5,-0.5,0], [0.5,-0.5,0], [0,0.5,0]），绑定到 gl.ARRAY_BUFFER
• 启用顶点属性，指定如何读取缓冲数据（如每顶点 3 个浮点数）
• 清屏（gl.clearColor(0,0,0,1); gl.clear(gl.COLOR_BUFFER_BIT);），再执行 gl.drawArrays(gl.TRIANGLES, 0, 3)

为什么通常不直接写原生 WebGL？

原生 WebGL 需要处理大量细节：矩阵变换、相机投影、光照模型、帧缓冲管理、资源加载、错误检查等。稍有疏漏就可能黑屏或报错，开发效率低。因此实际项目中普遍使用封装库：

• Three.js：最流行的高级库，用几行代码就能创建场景、相机、光源和网格
• Babylon.js：面向游戏与交互体验，内置物理、粒子、VR 支持
• PlayCanvas：基于 Web Editor 的实时协作引擎

这些库底层仍调用 WebGL（或 WebGPU），但把数学、内存、渲染管线等封装成直观对象（如 Mesh、Camera、Renderer）。

WebGL 和 JavaScript 的关系本质

JavaScript 是胶水语言和控制层，WebGL 是浏览器暴露的图形硬件接口。JS 负责：

• 组织逻辑（动画循环、用户交互、资源调度）
• 构造和上传数据（顶点数组、纹理图像）
• 调用 WebGL 方法（gl.uniformMatrix4fv 传 MVP 矩阵，gl.texImage2D 传贴图）
• 响应 WebGL 错误（如着色器编译失败、上下文丢失）

它不参与图形计算本身——所有顶点变换和像素着色都在 GPU 上由 GLSL 执行。