WebGL精简指南：核心概念、前端技术与效果实现

fruge365

发布于 2025-12-15 13:02:47

390

WebGL 精简指南：核心概念、前端技术与效果实现

一、什么是 WebGL？

WebGL 是基于 OpenGL ES 2.0 的浏览器端 3D 渲染 API，通过 JavaScript 调用 GPU 硬件加速，无需插件即可在网页中实现 3D 图形。核心作用是打通前端与 GPU 的交互，让浏览器具备高性能 3D 渲染能力。

二、WebGL 前端核心技术（附精简代码）

2.1 基础：WebGL 上下文初始化

获取 WebGL 渲染上下文是所有操作的前提，需处理浏览器兼容性。

// 获取canvas元素

const canvas = document.getElementById('webgl-canvas');

// 初始化WebGL上下文（兼容不同浏览器前缀）

const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

// 上下文创建失败提示

if (!gl) alert('浏览器不支持WebGL');

2.2 核心：着色器（Shader）

WebGL 依赖顶点着色器（处理顶点位置）和片段着色器（处理像素颜色），用 GLSL 语言编写。

// 1. 顶点着色器（简单传递顶点位置）

const vertexShaderSource = \`

&#x20; attribute vec3 aPosition;

&#x20; void main() {

&#x20;   gl\_Position = vec4(aPosition, 1.0); // 输出顶点位置

&#x20; }

\`;

// 2. 片段着色器（设置像素为红色）

const fragmentShaderSource = \`

&#x20; precision mediump float;

&#x20; void main() {

&#x20;   gl\_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色

&#x20; }

\`;

2.3 常用：缓冲区（Buffer）

存储顶点数据（如坐标），供 GPU 读取，避免 JS 频繁传值。

// 三角形顶点坐标

const vertices = \[-0.5, -0.5, 0.0, 0.5, -0.5, 0.0, 0.0, 0.5, 0.0];

// 创建缓冲区

const vertexBuffer = gl.createBuffer();

// 绑定缓冲区并写入数据

gl.bindBuffer(gl.ARRAY\_BUFFER, vertexBuffer);

gl.bufferData(gl.ARRAY\_BUFFER, new Float32Array(vertices), gl.STATIC\_DRAW);

2.4 进阶：纹理映射（Texture）

给 3D 物体贴 “图片”，实现真实质感，需加载图片并关联纹理坐标。

// 加载纹理图片

const texture = gl.createTexture();

const img = new Image();

img.src = 'texture.jpg'; // 纹理图片路径

img.onload = () => {

&#x20; gl.bindTexture(gl.TEXTURE\_2D, texture);

&#x20; // 设置纹理参数

&#x20; gl.texImage2D(gl.TEXTURE\_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED\_BYTE, img);

&#x20; gl.texParameteri(gl.TEXTURE\_2D, gl.TEXTURE\_WRAP\_S, gl.CLAMP\_TO\_EDGE);

};

2.5 辅助：矩阵变换（Model/View/Projection）

用矩阵实现物体平移、旋转、缩放，以及相机视角、投影效果（常用库：gl-matrix 简化计算）。

// 引入gl-matrix库（需CDN引入）

import { mat4 } from 'https://cdn.jsdelivr.net/npm/gl-matrix@3.4.3/+esm';

// 创建投影矩阵（透视投影）

const projMatrix = mat4.create();

mat4.perspective(projMatrix, Math.PI/4, canvas.width/canvas.height, 0.1, 100.0);

// 创建视图矩阵（相机位置：z轴10单位处）

const viewMatrix = mat4.create();

mat4.lookAt(viewMatrix, \[0,0,10], \[0,0,0], \[0,1,0]);