前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。https://www.captainbed.cn/north
文章目录
一、WebGL 基础概念1.1 WebGL 是什么1.2 核心组件
二、核心原理与渲染流程2.1 WebGL 渲染流程图2.2 渲染管线详解
三、完整代码示例：绘制彩色三角形3.1 HTML结构3.2 JavaScript核心代码
四、3D图形进阶开发4.1 3D变换矩阵4.2 纹理映射
五、性能优化技巧六、常见问题解决方案总结
一、WebGL 基础概念
1.1 WebGL 是什么
WebGL（Web Graphics Library）是基于OpenGL ES 2.0的浏览器3D图形标准，通过HTML5 Canvas元素实现硬件加速渲染。关键特性：
跨平台（桌面/移动浏览器）直接操作GPU使用GLSL着色语言与JavaScript深度集成
1.2 核心组件
组件说明WebGLRenderingContext核心渲染上下文对象WebGLBuffer存储顶点/索引数据的缓冲区对象WebGLShaderGLSL着色器程序容器WebGLTexture纹理贴图对象
二、核心原理与渲染流程
2.1 WebGL 渲染流程图
2.2 渲染管线详解
顶点处理阶段
顶点着色器处理原始坐标执行模型视图投影变换 图元装配
将顶点连接成几何图形 光栅化
将矢量图形转换为像素片段 片段处理
片元着色器计算最终颜色执行深度测试/混合操作
三、完整代码示例：绘制彩色三角形
3.1 HTML结构
3.2 JavaScript核心代码
// 初始化WebGL
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
// 创建着色器程序
function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
// 添加错误检查...
return shader;
}
// 初始化缓冲区
const positions = new Float32Array([
0.0, 0.5, 0.0, // 顶点1
-0.5, -0.5, 0.0, // 顶点2
0.5, -0.5, 0.0 // 顶点3
]);
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
// 渲染循环
function render() {
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
requestAnimationFrame(render);
}
render();
四、3D图形进阶开发
4.1 3D变换矩阵
实现模型-视图-投影矩阵：
const modelMatrix = mat4.create();
const viewMatrix = mat4.create();
const projMatrix = mat4.create();
mat4.perspective(projMatrix, 45 * Math.PI/180,
canvas.width/canvas.height, 0.1, 100.0);
mat4.translate(viewMatrix, viewMatrix, [0, 0, -5]);
// 传递给着色器
gl.uniformMatrix4fv(uModelMatrix, false, modelMatrix);
4.2 纹理映射
// 创建纹理
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
// 加载图像
const image = new Image();
image.onload = () => {
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA,
gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.generateMipmap(gl.TEXTURE_2D);
};
image.src = "texture.png";
五、性能优化技巧
顶点数据优化
使用STATIC_DRAW声明不变数据采用交错存储格式(Interleaved Buffer) 渲染优化
减少gl.drawCall调用次数使用gl.ELEMENT_ARRAY_BUFFER索引绘制 内存管理
及时删除废弃资源(deleteBuffer/deleteTexture)复用已分配的缓冲区
六、常见问题解决方案
问题1：纹理加载跨域错误
image.crossOrigin = "anonymous"; // 设置CORS头
问题2：深度测试失效
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
问题3：抗锯齿处理
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl', { antialias: true });
总结
本文从WebGL基础原理到3D开发实践，详细讲解了核心概念、渲染流程、代码实现及优化策略。建议通过Three.js等成熟库进行复杂项目开发，同时深入理解底层原理以解决性能瓶颈。