WebGL 实践指南：驾驭着色器中的数据传输

前端

2023-09-28 02:15:56

踏入 WebGL 神奇的殿堂，我们将在本次旅程中继续深挖其底层机制，探索着色器数据传输的奥妙。从理解着色器的工作原理到掌握各种数据传输技术，我们将全面提升你的 WebGL 技能。

着色器：WebGL 的核心

着色器是 WebGL 的核心，它们就像神奇的魔杖，负责将顶点数据转换为最终呈现在屏幕上的像素。在 WebGL 中，有两种类型的着色器：顶点着色器和片元着色器。顶点着色器处理顶点数据，而片元着色器则处理每个像素的数据。

数据类型：传递的信息

为了让着色器发挥作用，我们需要向它们传输数据，这些数据可以是顶点位置、颜色或其他属性。WebGL 支持多种数据类型，包括 float、int、vec2（2D 向量）和 vec3（3D 向量）。

数据传输方式：沟通的桥梁

有多种方法可以将数据从 JavaScript 程序传输到着色器中。最常见的方法是使用 uniform 变量和 attribute 变量：

Uniform 变量： 用于在着色器程序中传递全局变量，例如光源位置或材质颜色。
Attribute 变量： 用于传递每个顶点的特定数据，例如顶点位置或法线。

着色器中的数据布局：有序的安排

为了让着色器正确处理数据，我们需要指定数据的布局，告诉着色器如何解释传递的数据。这可以通过使用 layout 语法来实现，它指定了变量在着色器中的位置和类型。

顶点数据传输：构建几何体

WebGL 使用顶点数据来定义几何体的形状和位置。顶点数据通常包含顶点位置、颜色和法线。通过将顶点数据传输到顶点着色器，我们可以构建复杂的 3D 模型。

片元数据传输：像素着色

片元着色器负责为每个像素生成颜色。为了实现这一点，我们可以将光照信息、纹理坐标或其他属性传输到片元着色器。通过操纵这些数据，我们可以创建逼真的着色和效果。

示例代码：点亮黑暗

为了巩固我们的知识，让我们编写一个 WebGL 程序来绘制一个带颜色点的场景：

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

// 片元着色器
const fragmentShaderSource = `
    uniform vec3 color;
    void main() {
        gl_FragColor = vec4(color, 1.0);
    }
`;

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

// 编译着色器
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);
gl.useProgram(program);

// 创建顶点缓冲区
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

// 设置顶点数据
const vertices = [
    0.0, 0.5, 0.0, // 顶部
    0.5, -0.5, 0.0, // 右下角
    -0.5, -0.5, 0.0 // 左下角
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 创建颜色 uniform 变量
const colorLocation = gl.getUniformLocation(program, 'color');

// 设置颜色
gl.uniform3fv(colorLocation, [1.0, 0.0, 0.0]);

// 设置顶点属性
const positionLocation = gl.getAttribLocation(program, 'position');
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);

// 绘制场景
gl.drawArrays(gl.TRIANGLES, 0, 3);