WebGL是一种基于浏览器的图形技术，无需插件即可通过GPU渲染2D和3D图形。它基于OpenGL ES 2.0，利用HTML5 canvas元素和GLSL语言编写顶点与片段着色器，实现对图形渲染的底层控制。JavaScript负责初始化上下文、管理数据缓冲并驱动绘制流程。要创建一个旋转的3D立方体，需获取WebGL上下文、编写着色器代码、定义顶点与索引数据、设置投影与变换矩阵，并在动画循环中更新姿态。示例中使用mat4矩阵进行模型视图投影变换，并借助gl-matrix库处理数学运算。由于原生WebGL开发复杂，推荐使用Three.js等高级库简化开发。Three.js提供场景、相机、渲染器、几何体和材质等抽象概念，极大提升开发效率。其绘制立方体流程包括：构建场景与透视相机、创建WebGL渲染器、定义几何体与材质、生成网格对象并添加至场景，最后通过requestAnimationFrame循环实现动画。性能优化方面，建议减少绘制调用、压缩纹理、避免频繁数据传输，并采用实例化或合并几何体。交互可通过事件监听或OrbitControls实现相机操控。掌握原生WebGL有助于理解渲染原理，而Three.js更适合实际项目快速开发，后续可逐步深入光照、阴影与后期处理等高级特性。
WebGL 是一种基于浏览器的图形技术，可以直接调用 GPU 来渲染 2D 和 3D 图形。在 JavaScript 中使用 WebGL 开发三维图形虽然底层、复杂，但能提供强大的控制力和性能。不需要依赖插件，只需现代浏览器即可运行。
WebGL 基础原理
WebGL 基于 OpenGL ES 2.0，通过 HTML5 的 canvas 元素进行绘制。它使用着色器（Shader）来控制图形渲染过程，主要包含两种程序：
- 顶点着色器（Vertex Shader）：处理每个顶点的位置变换
- 片段着色器（Fragment Shader）：决定像素的颜色
这两个着色器用 GLSL（OpenGL Shading Language）编写，并在运行时编译注入 WebGL 上下文。JavaScript 负责初始化上下文、管理缓冲区、传递数据和触发绘制。
创建一个简单的 3D 立方体
要显示一个旋转的立方体，需完成以下步骤：
立即学习“Java免费学习笔记（深入）”；
- 获取 canvas 和 WebGL 上下文
- 编写并编译顶点与片段着色器
- 定义立方体的顶点坐标、颜色和索引
- 将数据传入 GPU 缓冲区
- 设置透视投影和模型视图矩阵
- 在动画循环中更新旋转角度并重绘
示例关键代码片段：
远航CMS(yhcms)是一套基于PHP+MYSQL为核心开发的专业营销型企业建站系统。是国内首家免费+开源自带分站系统的php内容管理系统。长期以来不断的完善、创新，远航CMS会为您带来全新的体验！产品十大优势：模板分离：模板程序分离，深度二次开发三网合一：电脑/手机/微信 多终端访问自定义广告：图片/文字/动画定时发布：SEO维护，无需人工值守多词生成：栏目关键词多方案生成SEO设置：自定义U
const gl = canvas.getContext('webgl');
const vertexShaderSource = `
attribute vec3 a_position;
uniform mat4 u_modelViewProjection;
void main() {
gl_Position = u_modelViewProjection * vec4(a_position, 1.0);
}
`;
// 片段着色器定义颜色
const fragmentShaderSource = `
precision mediump float;
uniform vec3 u_color;
void main() {
gl_FragColor = vec4(u_color, 1.0);
}
`;
通过 mat4 类型的变换矩阵实现平移、旋转和缩放。常用 gl-matrix 库来辅助矩阵运算。
使用 Three.js 简化开发
原生 WebGL 写法繁琐，实际项目中推荐使用封装库，如 Three.js。它提供了场景（Scene）、相机（Camera）、渲染器（Renderer）、几何体（Geometry）等高级抽象。
- Scene：容器，存放所有 3D 对象
- Camera：定义观察视角，常用透视相机
- Mesh：由几何体和材质组成，表示可渲染物体
- Renderer：将场景通过相机渲染到 canvas
Three.js 绘制立方体示例：
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
性能优化与交互建议
3D 图形性能受多个因素影响，应注意以下几点：
- 减少绘制调用（Draw Calls），合并几何体或使用实例化（Instancing）
- 控制纹理大小，使用压缩格式如 DDS 或 KTX
- 避免频繁向 GPU 传输数据，静态数据使用 STATIC_DRAW
- 添加鼠标或触摸事件实现旋转、缩放等交互
- 使用 OrbitControls 快速实现相机控件
基本上就这些。从原生 WebGL 入门有助于理解渲染流程，而 Three.js 能大幅提升开发效率。根据项目需求选择合适的方式，逐步掌握光照、阴影、后期处理等进阶功能。
