WebGL（Web Graphics Library）

WebGL（Web Graphics Library）是一种基于 JavaScript 的 API，允许在网页上渲染高性能的 2D 和 3D 图形。它利用计算机的 GPU 来实现硬件加速，因此适合创建游戏、数据可视化和交互式应用程序。

WebGL 的基本概念：

1. 上下文：

   • WebGL 上下文是图形渲染的基础，通常通过 <canvas> 元素获取。
   • 使用 getContext('webgl') 方法创建 WebGL 上下文。

2. 着色器：

   • 着色器是运行在 GPU 上的小程序，负责处理顶点和片元（像素）的渲染。
   • WebGL 使用 GLSL（OpenGL Shading Language）编写着色器，分为顶点着色器和片元着色器。

3. 缓冲区：

   • 顶点缓冲区（Vertex Buffer）存储顶点数据，包括位置、颜色、纹理坐标等。
   • 索引缓冲区（Index Buffer）用于定义如何将顶点组合成图形（如三角形）。

4. 纹理：

   • 纹理用于给图形添加表面细节，通常是图像数据。
   • WebGL 支持多种纹理格式，可以对纹理进行各种操作，如缩放、翻转等。

5. 绘制调用：

   • 使用 drawArrays 或 drawElements 方法来渲染场景。

WebGL 的基本使用步骤：

1. 初始化 WebGL：

   const canvas = document.getElementById('canvas');
   const gl = canvas.getContext('webgl');
   if (!gl) {console.error('Unable to initialize WebGL. Your browser may not support it.');
   }
   

2. 设置着色器：

   • 编写顶点和片元着色器代码，并将其编译链接到 WebGL 程序。

3. 创建缓冲区：

   • 创建和填充顶点缓冲区和索引缓冲区。

   const vertices = new Float32Array([// 立方体的顶点坐标
   ]);
   const vertexBuffer = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
   gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
   

4. 设置纹理（如果需要）：

   • 创建并绑定纹理，加载图像并生成纹理数据。

5. 渲染循环：

   • 在动画帧中清除画布并绘制场景。

   function render() {gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);// 设置着色器和绘制调用requestAnimationFrame(render);
   }
   render();
   

例子：

这是一个简单的 WebGL 示例，绘制一个颜色变化的三角形：

const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');const vertices = new Float32Array([0, 1, 0,    // 顶点 1-1, -1, 0,   // 顶点 21, -1, 0    // 顶点 3
]);const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);const vertexShaderSource = `...`;  // 顶点着色器代码
const fragmentShaderSource = `...`;  // 片元着色器代码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 shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);gl.useProgram(shaderProgram);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
const position = gl.getAttribLocation(shaderProgram, 'position');
gl.vertexAttribPointer(position, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(position);function render() {gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);requestAnimationFrame(render);
}render();

这个示例展示了如何设置 WebGL 环境并绘制一个简单的三角形。通过使用 WebGL，你可以创建高度自定义的图形和动画。