WebGL的管线流程

2024-08-05 前端 0

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；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（Web Graphics Library）是基于OpenGL ES 2.0的一个API，用于在网页浏览器中渲染交互式的3D图形和复杂的2D图形，而无需任何插件。WebGL利用现代GPU的渲染能力，在浏览器中实现高性能的图形渲染。WebGL的渲染管线流程与传统的GPU渲染管线相似，主要可以分为以下几个阶段：

应用阶段：
- 在这一阶段，JavaScript代码负责准备数据，比如顶点坐标、颜色、纹理坐标等，并将这些数据传递给WebGL上下文。
- 数据会被组织成缓冲区，并且通过顶点着色器程序和片段着色器程序进行处理。
顶点着色器阶段：
- 顶点着色器（Vertex Shader）是可编程的GLSL（OpenGL Shading Language）脚本，用于处理每个顶点。
- 它通常执行几何变换，如模型变换、视图变换和投影变换，将3D坐标转换到裁剪空间中。
- 顶点着色器还可以处理光照计算和纹理坐标计算。
图元装配阶段：
- 这一阶段，WebGL将顶点数据组装成图元，如点、线或三角形。
- 顶点着色器为每个顶点生成输出，这些顶点随后被组合成图元。
光栅化阶段：
- 当图元被装配完成后，它们会被光栅化成像素。
- 在此阶段，三角形被转化为屏幕上的像素，并执行深度测试（Z-buffer）和模板测试（Stencil buffer）。
- 还会进行纹理映射和混合（Blending）。
片段着色器阶段：
- 片段着色器（Fragment Shader）也是可编程的GLSL脚本，用于处理光栅化阶段产生的每个像素（或片段）。
- 它可以计算像素的颜色、光照效果、纹理采样等。
- 输出的结果是每个像素的颜色值。
后处理阶段：
- 最后的阶段是将片段着色器的输出写入到帧缓冲区中，即颜色缓冲区、深度缓冲区和模板缓冲区。
- 这些缓冲区的内容最终会被读取并显示在屏幕上。

整个流程是一个流水线，其中某些阶段是可编程的，允许开发者自定义顶点和片段的处理方式。WebGL的渲染管线是高度并行的，大部分计算都在GPU上完成，这使得WebGL能够高效地处理大量图形数据。

一个示例

WebGL的管线流程涉及到多个步骤，包括初始化WebGL上下文、设置着色器、配置缓冲区、发送数据到GPU以及渲染。下面是一个基本的WebGL管线流程的示例代码，它将渲染一个红色的三角形。

首先，确保你的HTML页面有一个<canvas>元素，因为WebGL需要一个画布来工作：

<!DOCTYPE html><html><body>    <canvas id="myCanvas" width="500" height="500"></canvas></body></html>

接下来是JavaScript代码，用于设置WebGL环境并渲染三角形：

// 获取画布var canvas = document.getElementById('myCanvas');// 初始化WebGL上下文var gl = canvas.getContext('webgl');if (!gl) {    alert('Unable to initialize WebGL. Your browser or machine may not support it.');}// 配置着色器function createShader(gl, type, source) {    var shader = gl.createShader(type);    gl.shaderSource(shader, source);    gl.compileShader(shader);    var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);    if (success) {        return shader;    }        console.log(gl.getShaderInfoLog(shader));    gl.deleteShader(shader);}function createProgram(gl, vertexShader, fragmentShader) {    var program = gl.createProgram();    gl.attachShader(program, vertexShader);    gl.attachShader(program, fragmentShader);    gl.linkProgram(program);    var success = gl.getProgramParameter(program, gl.LINK_STATUS);    if (success) {        return program;    }        console.log(gl.getProgramInfoLog(program));    gl.deleteProgram(program);}// 定义顶点着色器var vertexShaderSource = `attribute vec4 a_position;void main() {    gl_Position = a_position;}`;// 定义片段着色器var fragmentShaderSource = `precision mediump float;uniform vec4 u_color;void main() {    gl_FragColor = u_color;}`;// 创建着色器并添加到程序中var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);var program = createProgram(gl, vertexShader, fragmentShader);// 使用程序gl.useProgram(program);// 获取属性位置var positionAttributeLocation = gl.getAttribLocation(program, "a_position");var colorUniformLocation = gl.getUniformLocation(program, "u_color");// 启用顶点属性gl.enableVertexAttribArray(positionAttributeLocation);// 设置颜色gl.uniform4f(colorUniformLocation, 1.0, 0.0, 0.0, 1.0); // 红色// 设置顶点数据var positionBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);var positions = [    0, 0.5,   -0.5, -0.5,    0.5, -0.5];gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);// 清除画布gl.clearColor(0, 0, 0, 1);gl.clear(gl.COLOR_BUFFER_BIT);// 绘制三角形gl.drawArrays(gl.TRIANGLES, 0, 3);