还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;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上下文到绘制基本图形的完整过程。你可以根据具体需求扩展这个基础框架,添加更复杂的图形和功能。