【webgl】初识

WebGL应用程序的结构

WebGL应用程序代码是JavaScript和OpenGL着色语言的组合。

• JavaScript是需要与CPU进行沟通

• OpenGL着色语言，需要与GPU通信

渲染

是从使用计算机程序模型生成图像的过程。在图形中，一个虚拟场景是使用像几何，视点，纹理，光照和阴影，这是通过一个渲染程序传递信息描述。此呈现程序的输出将是一个数字图像。

有两种类型的渲染

• 软件渲染 − 所有的渲染是在CPU的帮助下计算完成。
• 硬件渲染 − 所有的图形计算都由GPU(图形处理单元)完成的。

渲染可以在本地或远程上进行。如果所要呈现的图像太复杂，则呈现远程具有足够的渲染复杂场景所需的硬件资源可以在专用服务器上完成。它也被称为基于服务器的绘制。渲染也可以通过在本地CPU完成。这就是所谓基于客户端的渲染。

名词

顶点

• 通常绘制对象，如多边形，我们在飞机上点和加入其中以形成所需多边形。顶点是点定义一个3D对象的边缘的结合使用。它是由每一个表示 x，y和z。分别轴3浮点值来表示。

索引

• 在WebGL数值被用来识别的顶点。这些数值被称为索引。

缓冲区

缓冲区是 WebGL 保存数据的存储器区域。有多种缓冲液即，绘图缓冲器，帧缓冲器，vetex 缓冲器，和索引缓冲器。顶点缓冲器和索引缓冲器被用来描述和处理模型的几何形状。

• 顶点缓冲区对象 − 这对应于每个顶点的数据存储(每顶点数据)

• 索引缓冲区对象 - 本存储有关的指标数据

• 帧缓冲区的图形内存持有的场景数据的一部分，这个缓冲区包含细节如宽度和表面的高度(以像素为单位)，每个像素与它们的深度的颜色。

着色器

着色器是GPU和用于编写着色器程序的程序语言是GLSL。在这些着色器，我们定义确切的顶点，转换，材质，光源，和摄像机使用彼此交互以创建具体图像。

	总之，这是一个实现的算法来获得像素一个网状片段

我们通常使用三角形来构建网格。因为WebGL使用GPU加速计算，有关这些三角形中的信息一般从CPU传送到GPU，这需要大量的通信开销。WebGL提供了一个解决方案以降低通信开销。由于它使用ES SL(嵌入式系统着色语言)在GPU上运行，我们编写所有程序需要使用着色器程序的客户端系统上的图形元素(这是我们使用OpenGL ES着色语言/GLSL来写程序)。

顶点着色器

顶点着色器是所谓的在每个顶点的程序代码。它被用于转化(移动)的几何形状(例如：三角形)从一个地方到另一个地方。它处理每个顶点的数据(每个顶点的数据)，例如顶点坐标，法线，色彩，和纹理坐标。

在顶点着色器的ES GL代码，程序员必须定义的属性来处理数据。这些属性指向一个顶点缓冲区对象是用JavaScript编写的。

下面的任务可以使用顶点着色器来进行

• 顶点变换

• 正常转化和正常化

• 纹理坐标生成

• 纹理坐标变换

• 灯光/光线

• 颜色材料应用

片段着色器(像素着色器)

网状由多个三角形形成，并且每一个三角形的表面被称为一个片段。片段着色器是对每一个片段的所有像素上运行的代码。这是写计算以填补单个像素的颜色。

下面的任务可以使用片段着色器来进行

• 插值操作

• 纹理访问

• 纹理应用

• 灰蒙/雾

• 颜色总和

OpenGL ES SL 变量

OpenGL ES的SL完整形式是 OpenGL 的嵌入式系统着色语言。为了处理着色器程序中的数据，ES SL提供了三种类型的变量。它们如下 -

Shader语言

在开发WebGL应用程序时，我们需要写Shader语言代码与GPU进行沟通。使用JavaScript编写的程序，其中包括以下操作的控制代码-

• 初始化WebGL − JavaScript是用于初始化WebGL的上下文。

• 创建数组 − 我们创建JavaScript数组来保存几何数据。

• 缓冲区对象 − 通过将数组作为参数来创建缓冲区对象(顶点和索引)。

• 着色器 − 我们创建，编译和使用JavaScript链接着色器。

• 属性− 我们可以创建属性，启用它们并使用JavaScript缓冲区对象相关联。

• 制服− 我们还可以使用 JavaScript 制服(uniforms)关联。

• 变换矩阵 − 使用JavaScript，我们可以创建变换矩阵。

最初我们创建几何形状所需的数据和它们传递到着色器中缓冲器的形式。着色器语言指向缓冲区对象，这作为输入传递给顶点着色器的属性变量。

顶点着色器

当我们通过调用方法drawElements()和drawArray()启动渲染过程中，顶点着色器提供的每个顶点执行在顶点缓冲区对象。它计算原始多边形各顶点的位置并且存储在不同的 gl_position。 它还计算的其他属性，例如颜色，纹理坐标，以及顶点，这通常与顶点相关联。

通过设置着色器数值的精度可以更好的配置资源，可以根据需要，在不太影响渲染效果前提下，可以尽量降低运算精度

原始汇编

计算位置及每个顶点的其他细节之后，下一阶段是原始装配阶段。这里三角形被组装并传送给光栅化程序。

光栅化

在光栅化步骤，在原始的最终图像的像素被确定。它有两个步骤 -

• 剔除− 最初的取向(是其正面或背面朝向？)多边形被确定。所有这些三角形使用不当取向不可见在观看区域被丢弃。这个过程被称为剔除。

• 剪裁 − 如果一个三角形部分在观看区域之外，则视图区域之外的部分被去除。这个过程被称为剪裁。

片段着色器

片段着色器获取

• 从顶点着色器不同变量的数据，

• 从光栅化阶段元语，然后计算颜色值顶点之间每一个象素。

片段着色器存储在每个片段的每一个像素的颜色值。