使用webgl画一张贺卡

使用WebGL来制作一张贺卡是一个有趣且富有挑战性的项目。WebGL（Web Graphics Library）是一种JavaScript API，用于在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。由于WebGL主要用于3D渲染，制作一张简单的2D贺卡可能不需要其全部功能，但它仍然可以提供一个强大的工具集来创建独特的视觉效果。

以下是一个基本的步骤指南，帮助你开始使用WebGL来制作贺卡：

1. 设置WebGL环境

首先，你需要在HTML文档中嵌入一个<canvas>元素，并使用JavaScript来获取WebGL渲染上下文。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebGL 贺卡</title>
</head>
<body>
    <canvas id="webgl-canvas" width="800" height="600"></canvas>
    <script src="your-webgl-script.js"></script>
</body>
</html>

在your-webgl-script.js中，你可以这样获取WebGL上下文：

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

2. 初始化WebGL

接下来，你需要设置WebGL的视口，并初始化一些基本的WebGL状态，比如清除颜色和深度测试。

gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(0.0, 0.0, 0.0, 1.0); // 设置清除颜色为黑色
gl.enable(gl.DEPTH_TEST); // 启用深度测试

3. 创建和编译着色器

WebGL使用两种类型的着色器：顶点着色器和片元着色器。这些着色器是用GLSL（OpenGL Shading Language）编写的，并需要编译后才能在WebGL中使用。

你需要为贺卡编写简单的着色器程序。例如，一个基本的顶点着色器可能如下所示：

attribute vec2 position;
void main() {
    gl_Position = vec4(position, 0.0, 1.0);
}

而一个简单的片元着色器可能如下所示：

void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 设置片元颜色为红色
}

在JavaScript中，你需要创建着色器对象，编译它们，并将它们链接到一个着色器程序中。

4. 创建和绑定缓冲区

接下来，你需要为贺卡的几何形状创建顶点数据，并将这些数据存储在WebGL缓冲区中。例如，你可以创建一个包含四个顶点的矩形来表示贺卡的形状。

const vertices = new Float32Array([
    -1.0, -1.0, // 左下角
     1.0, -1.0, // 右下角
    -1.0,  1.0, // 左上角
     1.0,  1.0  // 右上角
]);

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

5. 绘制场景

现在你已经设置了着色器、缓冲区和WebGL状态，你可以开始绘制贺卡了。这通常涉及设置顶点属性指针、使用着色器程序，并调用gl.drawArrays()或gl.drawElements()来渲染场景。

// 设置顶点属性指针
const positionAttributeLocation = gl.getAttribLocation(shaderProgram, 'position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

// 使用着色器程序
gl.useProgram(shaderProgram);

// 清除画布并绘制矩形
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); // 使用TRIANGLE_STRIP来绘制矩形