WebGL是基于JavaScript的3D图形API，通过canvas调用GPU渲染图形。它基于OpenGL ES 2.0，使用GLSL编写顶点和片段着色器处理图形渲染。首先获取canvas的WebGL上下文，设置视口和清屏颜色。然后定义顶点数据并传入GPU缓冲区，编写着色器程序并链接到着色器程序。接着启用属性指针执行绘制命令。可通过glMatrix等库实现模型变换如旋转。为简化开发，常用Three.js等高级库，它封装了相机、场景、渲染器、几何体和材质等概念，支持动画循环快速构建3D应用。掌握原生WebGL有助于理解渲染原理，而使用库更适合实际开发。关键难点在于理解着色器语法与坐标系统，需通过练习熟悉。
WebGL（Web Graphics Library）是一种基于 JavaScript 的低级 3D 图形 API，允许在浏览器中渲染高性能的三维图形，无需安装插件。它通过 HTML5 的 canvas> 元素直接调用 GPU 进行图形渲染，广泛用于网页游戏、数据可视化和交互式 3D 应用。
WebGL 基本原理
WebGL 是 OpenGL ES 2.0 在 Web 上的实现，运行在 GPU 上，使用着色器（Shader）控制图形渲染流程。每个 WebGL 程序需要至少两个着色器：
- 顶点着色器（Vertex Shader）：处理每个顶点的位置计算。
- 片段着色器（Fragment Shader）：决定像素的颜色输出。
这两个着色器使用 GLSL（OpenGL Shading Language）编写，并通过 JavaScript 传递给 GPU 执行。
使用 JavaScript 初始化 WebGL
要在网页中使用 WebGL，首先获取 元素并创建 WebGL 上下文：
立即学习“Java免费学习笔记（深入）”；
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
console.error('WebGL not supported');
}
接着可以设置视口大小、清屏颜色等基础配置：
gl.viewport(0, 0, canvas.width, canvas.height); gl.clearColor(0.0, 0.0, 0.0, 1.0); // 黑色背景 gl.clear(gl.COLOR_BUFFER_BIT);
绘制一个简单 3D 形状
以绘制一个旋转的彩色三角形为例：
CrossApp是一款完全免费、开源、跨平台的移动app开发引擎，由9秒技术团队负责更新和维护。CrossApp拥有跨平台、整合部分第三方库、基于基于OpenGL ES 2.0、丰富的UI控件、提供CrossApp配套编辑器，以及CrossApp Style体系的支撑，所以开发者可以完全免费、毫无顾忌的使用CrossApp开发任何商业项目。CrossApp以C++作为开发语言，支持js，图形渲染基
- 定义顶点数据（位置和颜色）
- 创建缓冲区并将数据传入 GPU
- 编写并编译着色器程序
- 启用属性指针并执行绘制命令
JavaScript 中可通过矩阵运算库（如 glMatrix）实现模型变换，比如让三角形绕 Z 轴旋转：
const modelMatrix = mat4.create(); mat4.rotate(modelMatrix, modelMatrix, Date.now() * 0.001, [0, 0, 1]);
简化开发：使用 Three.js
原生 WebGL 编码复杂，大多数项目使用高级库如 Three.js 来简化 3D 开发：
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: myCanvas });
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();
Three.js 封装了 WebGL 的底层细节，提供相机、灯光、材质、动画等完整 3D 概念，大幅提升开发效率。
基本上就这些。掌握 WebGL 可深入理解图形渲染机制，而使用 Three.js 等库则更适合快速构建实际应用。不复杂但容易忽略的是着色器语法和坐标系统的理解，多练习就能上手。
