初识webgl基础概念

一、webgl简介

1.webgl是什么

WebGL 是一种 3D 绘图协议，或者说是一种 JavaScript API。由于 WebGL 技术旨在帮助我们在不使用插件的情况下在任何兼容的网页浏览器中开发交互式 2D 和 3D 网页效果，可以理解为一种帮助我们开发 3D 网页的绘图技术，当然底层还是 JavaScript API  WebGL通过在浏览器中执行JavaScript代码，利用GPU进行图形渲染。

2.webgl优势

包括跨平台、高效率、可定制性强和开放源代码

最主要是内嵌在浏览器中，不需要安装任何插件即可运⾏；只需要⼀个⽂本编辑器和浏览器，就可以编写三维图形程序；学习和使用比较简单

3.webgl开源框架

1.Three.js：JavaScript 3D WebGL库
2.Babylon.js：Web3D图形引擎
3.KickJS：Web的开源图形和游戏引擎
4.ClayGL：构建可扩展的Web3D应⽤程序
5.PlayCanvas：网络游戏和3D图形引擎
6.WebGLStudio.js和Litescene.js：开源Web 3D图形编辑器和创建器
7.Luma：Uber的3D WebGL可视化库
8.A-Frame是用于构建VR（虚拟现实）体验的Web框架
 

二、webgl中的基本概念

1. 上下文 (Context)
WebGL上下文是与HTML `<canvas>` 元素关联的对象，它允许你在该画布上进行图形渲染。使用`getContext("webgl")`来获取这一上下文，并用于进行后续的绘制操作。

2. 着色器 (Shaders)
着色器是运行在GPU上的小程序，用于决定每个像素或顶点的最终颜色。WebGL支持两种类型的着色器：
- 顶点着色器 (Vertex Shader)：处理每个顶点的属性，负责变换顶点坐标和传递顶点相关的颜色、纹理坐标等信息到片元着色器。（顶点着色器的作用是计算顶点的位置，即提供顶点在裁剪空间中的坐标值）
- 片元着色器 (Fragment Shader)：处理每个像素的颜色和其它属性，通常用于计算最终颜色和纹理映射。（计算图元的颜色值 可理解为网页中的像素）

 3. 程序对象 (Program Object)
程序对象是将一个顶点着色器和一个片元着色器链接在一起的容器。通过`gl.createProgram()`创建程序对象，使用`gl.attachShader()`将着色器附加到程序，后进行链接以启用此程序进行渲染。

4. 缓冲区 (Buffers)
缓冲区用于存储图形数据，如顶点位置、颜色、法线等。WebGL主要用到两种缓冲区：
- 顶点缓冲区 (Vertex Buffer)：存储顶点坐标和其他顶点属性的数据。
- 索引缓冲区 (Index Buffer)：用于指向顶点缓冲区中顶点的索引，以提高渲染效率，避免重复存储顶点数据。

 5. 纹理 (Textures)
纹理是应用于几何体表面的图像，允许开发者给3D对象添加细节和复杂性。WebGL支持多种类型的纹理，包括：
- 2D纹理：最常用的纹理类型，通常表示为宽高的图片。
- 立方体纹理=：用于环境映射，通常包含六个面（如天空盒）来模拟全方位的环境。

6. 状态机 (State Machine)
WebGL是一个状态机，渲染行为和效果受到当前状态的影响，例如启用/禁用特定的功能（如深度测试、混合等）。通过调用状态管理函数（如 `gl.enable()` 和 `gl.disable()`）来设置这些状态。

7. 绘制调用 (Draw Calls)
绘制调用是指在WebGL中发出命令进行渲染的过程。常见的绘制调用包括：
- `gl.drawArrays()`：按指定的绘制模式（如三角形）从顶点缓冲区中渲染图形。
- `gl.drawElements()`：使用索引缓冲区中的索引来绘制图形，通常用于更加高效的渲染方式。

 8. 视口 (Viewport)
视口定义了绘制内容在画布上的区域和大小。通过调用`gl.viewport(x, y, width, height)`设置视口参数，通常设置成与画布的大小一致。

9. 变换矩阵 (Transformation Matrices)
变换矩阵用于对顶点进行平移、缩放和旋转等操作。WebGL使用4x4的矩阵表示变换，通过矩阵运算将模型空间的顶点转换到裁剪空间。

10. 深度测试和混合 (Depth Testing and Blending)
- 深度测试：确保在场景中符合可见性规则，即只渲染离观察者最近的表面。通过调用`gl.enable(gl.DEPTH_TEST)`来启用深度测试。
- 混合：用于控制如何将颜色信息混合在一起，常用于实现透明效果，通过调用 `gl.enable(gl.BLEND)` 启用混合，并设置混合函数。

流程图如下：