WebGL入门（022）：WebGL2RenderingContext 简介、使用方法、示例代码

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典 【面试题+详细答案 1000+】

---

在WebGL 2中，WebGL2RenderingContext接口提供了与浏览器中的HTML5 <canvas> 元素交互的方法和属性，允许开发者在网页上绘制3D图形。以下是关于WebGL2RenderingContext的一些详细说明：

WebGL2RenderingContext 概述

WebGL2RenderingContext是WebGL 2 API的核心接口，它继承自WebGLRenderingContext，并且添加了许多新的功能和改进，包括但不限于对顶点数组对象的支持、更多的着色器类型、更多的纹理格式、增强的混合功能等。

获取 WebGL2RenderingContext

要获取WebGL2RenderingContext实例，你需要通过<canvas>元素的getContext方法来创建它。这通常是这样的：

const canvas = document.getElementById('my-canvas');
const gl = canvas.getContext('webgl2', { antialias: true });

如果浏览器支持WebGL 2，gl变量将包含一个WebGL2RenderingContext实例；如果不支持，则返回null或抛出异常。

WebGL2RenderingContext 的主要功能

初始化

• 创建缓冲区：用于存储顶点数据或索引数据。
• 创建纹理：用于存储纹理映射图像。
• 创建着色器：用于创建顶点着色器和片段着色器。
• 创建程序：用于链接和使用着色器。

绘制

• 绘制三角形：使用drawArrays或drawElements。
• 清除颜色缓冲区：使用clear方法。
• 更新缓冲区数据：使用bufferData或bufferSubData。

状态管理

• 启用/禁用功能：例如深度测试、混合模式等。
• 设置视口大小：使用viewport方法。
• 设置剪切区域：使用scissor方法。

资源管理

• 删除缓冲区、纹理、着色器等：使用deleteBuffer, deleteTexture, deleteShader等方法。
• 检查错误状态：使用getError方法。

着色器编程

• 编译着色器：使用compileShader。
• 链接着色器到程序：使用linkProgram。
• 使用程序：使用useProgram。

高级特性

• 顶点数组对象 (VAO)：使用createVertexArray创建，使用bindVertexArray绑定。
• 帧缓冲对象 (FBO)：使用createFramebuffer创建，使用bindFramebuffer绑定。
• 渲染到纹理：使用纹理作为FBO的一部分。
• 变换反馈：使用transformFeedbackVaryings配置变换反馈。
• 多采样抗锯齿：使用多重采样帧缓冲对象。

示例代码

下面是一个简单的示例，展示了如何使用WebGL2RenderingContext创建一个简单的WebGL上下文并绘制一个三角形：

const canvas = document.getElementById('my-canvas');
const gl = canvas.getContext('webgl2');

if (!gl) {
  console.error('WebGL 2 is not supported.');
  return;
}

// 设置视口
gl.viewport(0, 0, canvas.width, canvas.height);

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

// 创建着色器
const vertexShaderSource = `
  attribute vec4 a_position;
  void main() {
    gl_Position = a_position;
  }
`;

const fragmentShaderSource = `
  precision mediump float;
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;

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);

// 设置顶点数据
const positions = new Float32Array([
  0.0,  0.5,
 -0.5, -0.5,
  0.5, -0.5
]);

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

const positionAttributeLocation = gl.getAttribLocation(shaderProgram, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

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

这个例子涵盖了从创建WebGL上下文到绘制基本图形的完整过程。你可以根据具体需求扩展这个基础框架，添加更复杂的图形和功能。