当前位置：首页 > 文章列表 > 文章 > 前端 > WebGL3D渲染基础教学指南

WebGL3D渲染基础教学指南

2026-01-31 13:50:38 0浏览收藏

理解 WebGL 渲染的基本流程

WebGL 的核心是 GPU 编程，你需要把数据交给显卡，并告诉它怎么画。整个过程可以简化为几步：

准备顶点数据（比如三角形的三个点）
编写着色器代码（Vertex Shader 和 Fragment Shader）
编译着色器并链接成程序
将数据传给 GPU
执行绘制命令

每一步都涉及一些底层操作，但只要走通一次，后面就容易多了。

写一个最简单的着色器程序

着色器用 GLSL（OpenGL Shading Language）写，运行在 GPU 上。下面是一个最基础的例子：

顶点着色器（Vertex Shader）：
attribute vec3 position;
void main() {
gl_Position = vec4(position, 1.0);
}

片元着色器（Fragment Shader）：
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
}

顶点着色器处理每个顶点的位置，片元着色器决定像素颜色。上面代码会画一个红色的图形。

在 JavaScript 中初始化 WebGL 并绘制

假设你有一个 canvas 元素：

const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');

// 创建并编译着色器的函数略...
const program = gl.createProgram();
// 添加顶点和片元着色器并链接

gl.useProgram(program);

// 定义一个三角形的顶点坐标
const vertices = new Float32Array([
  -0.5, -0.5, 0,
   0.5, -0.5, 0,
   0.0, 0.5, 0
]);

const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

const positionLoc = gl.getAttribLocation(program, 'position');
gl.enableVertexAttribArray(positionLoc);
gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 0, 0);

gl.drawArrays(gl.TRIANGLES, 0, 3); // 开始绘制

这段代码创建了一个红色三角形并显示在页面上。虽然简单，但它包含了 WebGL 渲染的核心步骤。