WebGL编程指南学习笔记 - 1：开启WebGL之旅

2024-01-01 11:06:37

在当今数字时代，令人惊叹的图形和视觉效果已成为数字内容中不可或缺的一部分。从电子游戏到交互式网站，3D图形无处不在。然而，要创建高质量的3D图形通常需要复杂的软件和强大的硬件。随着网络技术的飞速发展，WebGL应运而生，它为Web开发人员提供了一种新的途径来创建3D图形，而无需依赖复杂的软件或强大的硬件。

WebGL简介

WebGL是一种用于Web端的可编程着色器方法，是由Web端控制GPU渲染的编程途径。WebGL是基于OpenGL ES的，OpenGL ES是OpenGL的精简版，专为嵌入式系统（如移动设备和浏览器）而设计。WebGL将OpenGL ES的功能移植到Web上，使Web开发人员能够使用JavaScript来控制GPU渲染，从而创建逼真的3D图形。

WebGL编程指南学习笔记 - 1：开启WebGL之旅

在本系列的第一部分，我们将介绍WebGL的基础知识，并通过一个简单的示例来演示如何使用WebGL。

1. WebGL基础

在使用WebGL之前，我们需要先了解一些基本概念。

着色器（Shader） ：着色器是WebGL中的程序，用于在GPU上执行特定的计算。着色器通常分为顶点着色器和片段着色器。顶点着色器用于处理顶点数据，片段着色器用于处理片段数据。
顶点缓冲区对象（VertexBuffer Object, VBO） ：VBO是WebGL中用于存储顶点数据的对象。VBO可以提高WebGL应用程序的性能，因为GPU可以一次性加载整个VBO，而无需从CPU逐个读取顶点数据。
索引缓冲区对象（Index Buffer Object, IBO） ：IBO是WebGL中用于存储顶点索引的对象。IBO可以提高WebGL应用程序的性能，因为GPU可以一次性加载整个IBO，而无需从CPU逐个读取顶点索引。
纹理（Texture） ：纹理是WebGL中用于存储图像数据的对象。纹理可以用于为3D模型添加颜色和细节。
帧缓冲区对象（Framebuffer Object, FBO） ：FBO是WebGL中用于存储渲染结果的对象。FBO可以用于离屏渲染，即在不显示在屏幕上的表面上进行渲染。

2. WebGL示例

现在我们已经了解了WebGL的基础知识，接下来让我们通过一个简单的示例来演示如何使用WebGL。

我们首先需要创建一个WebGL画布。WebGL画布是一个HTML元素，用于显示WebGL渲染结果。

<canvas id="webgl-canvas" width="640" height="480"></canvas>

接下来我们需要创建一个WebGL上下文。WebGL上下文是WebGL应用程序与GPU通信的接口。

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

现在我们已经创建好了WebGL画布和WebGL上下文，接下来我们可以开始编写WebGL程序了。

// 定义顶点着色器
const vertexShaderSource = `
    attribute vec3 a_position;

    void main() {
        gl_Position = vec4(a_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);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);

// 创建着色器程序
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

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

// 定义顶点数据
const vertices = [
    -0.5, -0.5, 0.0,
     0.5, -0.5, 0.0,
     0.0,  0.5, 0.0
];

// 创建顶点缓冲区对象
const vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 获取顶点着色器中的顶点位置属性
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");

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

// 将顶点缓冲区对象绑定到顶点位置属性
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

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

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