理解 WebGL 着色器的运作原理

前端

2023-10-03 14:55:55

着色器是 WebGL 图形渲染管线中至关重要的一部分，它们负责对场景中的顶点和片元应用转换，赋予 3D 模型颜色和纹理。在这篇文章中，我们将深入剖析着色器的运作原理，揭开它们的秘密，帮助你充分利用 WebGL 的强大功能。

着色器类型

WebGL 支持两种类型的着色器：

顶点着色器 ：处理场景中的顶点数据，执行变换、照明计算和其他操作。
片元着色器 ：处理每个片元（像素），确定其最终颜色和纹理。

着色器语言

着色器使用一种称为 GLSL（OpenGL着色语言）的特殊语言编写。GLSL 与 C++ 或 Java 等高级编程语言类似，但它针对图形渲染进行了专门优化。

着色器管道

着色器通过着色器管道执行。该管道是一个分步过程，将顶点数据从 CPU 传输到 GPU，在那里执行着色器程序。

顶点着色器阶段

在这个阶段，顶点着色器对传入的顶点数据进行转换和操作。这些操作可能包括：

平移、旋转和缩放
应用灯光和材质
生成纹理坐标

片元着色器阶段

一旦顶点处理完毕，片元着色器就会接管。它对每个片元执行以下操作：

计算片元的颜色
应用纹理和光照效果
混合多个片元以创建最终图像

实践中的着色器

为了更好地理解着色器，让我们编写一个简单的 WebGL 程序来绘制一个着色的三角形。

HTML

<canvas id="canvas"></canvas>
<script src="main.js"></script>

JavaScript (main.js)

// 获取画布
const canvas = document.getElementById('canvas');

// 初始化 WebGL 上下文
const gl = canvas.getContext('webgl');

// 定义顶点着色器
const vertexShaderSource = `
    attribute vec3 position;
    void main() {
        gl_Position = vec4(position, 1.0);
    }
`;

// 定义片元着色器
const fragmentShaderSource = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`;

// 编译着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// 创建程序并将着色器附加到程序
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

// 链接程序
gl.linkProgram(program);

// 获取位置属性和设置缓冲区数据
const positionAttributeLocation = gl.getAttribLocation(program, 'position');

const vertices = new Float32Array([
    -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, vertices, gl.STATIC_DRAW);

// 将位置属性与缓冲区数据关联
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// 启用位置属性
gl.enableVertexAttribArray(positionAttributeLocation);

// 设置视口
gl.viewport(0, 0, canvas.width, canvas.height);

// 清除颜色缓冲区
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// 使用程序
gl.useProgram(program);

// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, 3);