WebGL 初学者指南：掌握着色器

前端

2023-12-09 14:24:44

对于任何想要掌握 WebGL 的人来说，着色器都是不可或缺的部分。着色器是赋予 3D 对象栩栩如生的关键，它们决定了对象的最终外观。如果您是 WebGL 的新手，本指南将为您提供有关着色器及其使用方法的全面概述。

什么是着色器？

着色器是一种程序，它对 WebGL 渲染管线中的顶点或片元（像素）进行操作。它们使用 OpenGL 着色语言（GLSL）编写，可让您使用高级图形技术，例如纹理、照明和阴影。

WebGL 中的着色器类型

WebGL 中有两种主要类型的着色器：

顶点着色器： 用于处理每个顶点数据。它可以改变顶点的位置、法线和其他属性。
片元着色器： 用于处理每个片元数据。它确定片元的颜色、透明度和其他视觉属性。

GLSL 入门

GLSL 是一种 C-like 语言，专门用于编写着色器。下面是一些基本 GLSL 语法：

uniform： 用于在着色器之间传递变量。
attribute： 用于从顶点缓冲区中读取数据。
varying： 用于在顶点着色器和片元着色器之间传递数据。
main： 着色器的入口点。

编写您的第一个着色器

让我们创建一个简单的 WebGL 程序来绘制一个着色的三角形：

HTML：

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

JavaScript (script.js)：

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

// 顶点着色器源代码
const vertexShaderSource = `
    attribute vec3 position;
    uniform mat4 projectionMatrix;
    void main() {
        gl_Position = projectionMatrix * vec4(position, 1.0);
    }
`;

// 片元着色器源代码
const fragmentShaderSource = `
    uniform vec4 color;
    void main() {
        gl_FragColor = color;
    }
`;

// 编译顶点着色器
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);

// 获取 uniform 位置
const projectionMatrixLocation = gl.getUniformLocation(program, 'projectionMatrix');
const colorLocation = gl.getUniformLocation(program, 'color');

// 顶点数据
const vertices = [
    -1.0, -1.0, 0.0,
    1.0, -1.0, 0.0,
    0.0, 1.0, 0.0
];

// 缓冲顶点数据
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 设置投影矩阵
const projectionMatrix = mat4.create();
mat4.perspective(projectionMatrix, 45 * Math.PI / 180, canvas.width / canvas.height, 0.1, 100.0);

// 设置颜色
const color = [1.0, 0.0, 0.0, 1.0];

// 启用着色器程序
gl.useProgram(program);

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

// 设置 uniform
gl.uniformMatrix4fv(projectionMatrixLocation, false, projectionMatrix);
gl.uniform4fv(colorLocation, color);

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