WebGL入门指南：探索顶点和片元着色器

2023-10-04 12:51:39

WebGL入门：赋予3D图形生命

想象一下，在您的Web浏览器中，3D图形栩栩如生地呈现在眼前，为您提供身临其境的体验。这正是WebGL的魔力所在，它是一种神奇的技术，让您能够直接在浏览器中创建令人惊叹的3D图形。

了解着色器：3D图形的调色板

着色器是WebGL的秘密武器，它们负责为您的图形赋予色彩和纹理。它们是小型程序，用于处理顶点（图形的基本构建块）和片元（屏幕上显示的像素）。顶点着色器负责操纵顶点的位置，而片元着色器则决定每个片元（像素）的颜色。

点亮你的WebGL画布：探索片元着色器

片元着色器负责为我们的3D图形注入色彩活力。以下是片元着色器的代码：

precision mediump float;

varying vec4 vColor;

void main() {
  gl_FragColor = vColor;
}

让我们分解一下这段代码：

precision mediump float; ：这行定义了着色器中使用的浮点数精度。
varying vec4 vColor; ：这行声明了一个名为vColor的变量，它接收从顶点着色器传递的颜色值。
void main() { ：这是着色器的主函数。
gl_FragColor = vColor; ：这行将片元着色器的输出颜色设置为从顶点着色器接收到的颜色值。

通过调整vColor变量，我们可以改变WebGL画布上点的颜色。

应用片元着色器：赋予图形色彩

让我们编写代码，将片元着色器应用于实践。以下是代码：

// 获取WebGL画布
const canvas = document.getElementById("webgl-canvas");

// 获取WebGL上下文
const gl = canvas.getContext("webgl");

// 顶点着色器代码
const vertexShaderSource = `
  attribute vec3 aPosition;
  void main() {
    gl_Position = vec4(aPosition, 1.0);
  }
`;

// 片元着色器代码
const fragmentShaderSource = `
  precision mediump float;
  varying vec4 vColor;
  void main() {
    gl_FragColor = vColor;
  }
`;

// 编译着色器
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, "aPosition");

// 获取片元着色器中的颜色属性
const colorAttributeLocation = gl.getAttribLocation(program, "vColor");

// 设置顶点数据
const vertices = [
  -0.5, -0.5, 0.0, // 左下角
  0.5, -0.5, 0.0,  // 右下角
  0.0,  0.5, 0.0   // 顶点
];

// 创建并绑定缓冲区对象（VBO）
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 设置颜色数据
const colors = [
  1.0, 0.0, 0.0, 1.0, // 左下角红色
  0.0, 1.0, 0.0, 1.0, // 右下角绿色
  0.0, 0.0, 1.0, 1.0  // 顶点蓝色
];

// 创建并绑定缓冲区对象（VBO）
const colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

// 清除画布
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

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

// 启用顶点属性
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// 启用颜色属性
gl.enableVertexAttribArray(colorAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.vertexAttribPointer(colorAttributeLocation, 4, gl.FLOAT, false, 0, 0);

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