WebGL-基础

WebGL主要是低级栅格化API,而不是3D API。要使用WebGL绘制图像,您必须传递代表该图像的矢量。然后,它使用OpenGL SL将给定的矢量转换为像素格式,并在屏幕上显示图像。编写WebGL应用程序涉及一系列步骤,我们将在本章中介绍这些步骤。

WebGL-坐标系

与其他3D系统一样,WebGL中将具有x,y和z轴,其中z轴表示depth。WebGL中的坐标限制为(1、1、1)和(-1,-1,-1)。这意味着-如果您将投影WebGL图形的屏幕视为一个多维数据集,则该多维数据集的一个角将为(1、1、1),而相反的角将为(-1,-1,-1)。WebGL将不会显示超出这些边界的任何内容。

下图描述了WebGL坐标系。z轴表示深度。z的正值表示对象在屏幕/查看器附近,而z的负值表示对象在屏幕/查看器附近。同样,x的正值表示对象在屏幕的右侧,而负值表示对象在屏幕的左侧。类似地,y的正值和负值指示对象是在屏幕的顶部还是底部。

WebGL-基础

WebGL图形

获取画布对象的WebGL context后,您可以开始使用JavaScript中的WebGL API绘制图形元素。

在开始使用WebGL之前,您需要了解以下一些基本术语。

顶点

通常,要绘制诸如多边形之类的对象,我们会在平面上标记点并将它们连接起来以形成所需的多边形。 顶点是定义3D对象边缘的结合点的点。 它由三个浮点值表示,每个浮点值分别代表x,y,z轴。

在以下示例中,我们绘制了一个三角形,该三角形具有以下顶点 -(0.5,0.5),(-0.5、0.5),(-0.5,-0.5)。

WebGL-基础

注意-我们必须使用JavaScript数组手动存储这些顶点,然后使用顶点缓冲区将它们传递到WebGL渲染管道。

指标

在WebGL中,数值用于标识顶点。这些数值称为索引。这些索引用于在WebGL中绘制网格。

WebGL-基础

注意-就像顶点一样,我们使用JavaScript数组存储索引,然后使用索引缓冲区将它们传递到WebGL渲染管道。

数组

与OpenGL和JoGL不同,WebGL中没有预定义的方法可以直接渲染顶点。我们必须使用JavaScript数组手动存储它们。

var vertices = [ 0.5, 0.5, 0.1,-0.5, 0.5,-0.5] 

缓冲

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

顶点缓冲区对象存储有关顶点的数据,而索引缓冲区对象存储有关索引的数据。将顶点存储到数组中之后,我们使用这些Buffer对象将它们传递到WegGL图形管道。

帧缓冲区是图形存储器的一部分,用于保存场景数据。此缓冲区包含详细信息,例如表面的宽度和高度(以像素为单位),每个像素的颜色,深度和模板缓冲区。

网眼

为了绘制2D或3D对象,WebGL API提供了两种方法,即drawArrays()drawElements()。这两个方法接受一个称为mode的参数,您可以使用该参数选择要绘制的对象。该字段提供的选项仅限于点,线和三角形。

要使用这两种方法绘制3D对象,我们必须使用点,线或三角形构造一个或多个基本多边形。之后,使用这些原始多边形,我们可以形成网格。

使用基本多边形绘制的3D对象称为“网格”。WebGL提供了多种绘制3D图形对象的方法,但是用户通常更喜欢绘制网格。

在以下示例中,您可以观察到我们已经使用两个三角形绘制了一个正方形→{1、2、3}和{4、1、3}。

WebGL-基础

着色器程序

我们通常使用三角形构造网格。由于WebGL使用GPU加速计算,因此有关这些三角形的信息应从CPU传输到GPU,这会占用大量通信开销。

WebGL提供了减少通信开销的解决方案。由于它使用在GPU上运行的ES SL(嵌入式系统着色器语言),因此我们使用着色器程序(我们使用OpenGL ES着色语言/ GLSL编写的程序)编写了所有必需的程序,以在客户端系统上绘制图形元素。

这些着色器是用于GPU的程序,用于编写着色器程序的语言是GLSL。在这些着色器中,我们精确地定义了顶点,变换,材质,光源和摄影机如何相互交互以创建特定的图像。

简而言之,这是一个实现算法以获取网格像素的代码段。我们将在后面的章节中讨论有关着色器的更多信息。着色器有两种类型-顶点着色器和片段着色器。

顶点着色器

文本着色器是在每个顶点上调用的程序代码。它用于将几何图形(例如三角形)从一个位置变换(移动)到另一个位置。它处理每个顶点的数据(每个顶点的数据),例如顶点坐标,法线,颜色和纹理坐标。

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

可以使用顶点着色器执行以下任务:

  • 顶点变换
  • 正常转换和归一化
  • 纹理坐标生成
  • 纹理坐标变换
  • 灯光
  • 色料应用

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

网格由多个三角形组成,每个三角形的表面称为片段。片段着色器是在每个片段的所有像素上运行的代码。用于计算和填充单个像素上的颜色。

可以使用片段着色器执行以下任务:

  • 插值运算
  • 纹理访问
  • 纹理应用
  • 多雾路段
  • 颜色总和
WebGL-基础

OpenGL ES SL变量

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

  • 属性-这些变量保存顶点着色器程序的输入值。属性指向包含每个顶点数据的顶点缓冲区对象。每次调用顶点着色器时,属性都指向不同顶点的VBO。
  • Uniforms – 这些变量保存顶点和片段着色器共有的输入数据,例如灯光位置,纹理坐标和颜色。
  • 变量-这些变量用于将数据从顶点着色器传递到片段着色器。

有了这么多的基础知识,我们现在将继续讨论图形管线。

作者:terry,如若转载,请注明出处:https://www.web176.com/webgl/838.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2020年10月30日 下午4:00
下一篇 2020年10月30日 下午4:23

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注