WebGL的管线流程

还是大剑师兰特

于 2024-07-17 00:00:00 发布

阅读量1.9k

点赞数 35

分类专栏： # webGL开发教程文章标签： webgl 大剑师 webgl管线流程

本文链接：https://blog.csdn.net/cuclife/article/details/140471935

版权

webGL开发教程专栏收录该内容

5 篇文章 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);