​WebGL 基础

WebGL 基础

  WebGL主要是一个低级的光栅化API,而不是3D API,要使用WebGL绘制图像,必须通过向量来表示图像,然后使用OpenGL显卡将指定向量转换为像素格式,并在屏幕上显示图像。编写一个WebGL应用程序涉及一组步骤,我们将在本章中解释。

WebGL 坐标系

  与其他三维系统一样,在WebGL中也有x、y和z轴,其中z轴表示深度。WebGL 中的坐标仅限于( 1、1、1 )和( -1 , -1 , -1)。这意味着—如果您认为屏幕投影WebGL 图形作为一个立方体,那么立方体的一个角将( 1 , 1 , 1 )和对面的角将是( -1 , -1 , -1)。WebGL 不会显示超出这些边界的任何内容。

  下图描述了WebGL 坐标系。z轴表示深度.正值z表示对象在屏幕/查看器附近,而负值z表示该对象不在屏幕上。同样,x的正值表示对象是屏幕右侧,负值表示对象是左侧。同样,y的正值和负值表示对象位于屏幕顶部或底部的底部。

WebGL 基础

  获得画布对象的WebGL上下文之后,您可以在JavaScript中使用WebGL绘制图形元素。

  以下是你开始WebGL开发之前需要了解的一些基本术语。

顶点

  通常,为了绘制多边形等物体,我们在平面上标记点,并加入它们来形成一个理想的多边形。顶点是定义三维物体边缘的连接点的点。它由三个浮点值分别表示x、y、z轴。

例子

  在下面的示例中,我们绘制了一个三角形,其顶点为(0.5, 0.5), (-0.5, 0.5), (-0.5, -0.5)。

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

指数(边)

  在 WebGL 中,使用数值来确定顶点,这些数值被称为指数,指数用于绘制WebGL中的网格。

  注意:与顶点一样,我们使用JavaScript数组存储索引,并使用索引缓冲区将索引传递给WebGL渲染管道。

阵列

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

例子

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

缓冲区

  缓冲区是保存数据的WebGL的内存区域。有不同的缓冲区,即绘图缓冲区、帧缓冲区、缓冲区缓冲区和索引缓冲区。利用顶点缓冲区和索引缓冲区来描述和处理模型的几何形状。

  顶点缓冲对象-这存储对应于每个顶点的数据(每个顶点数据)。

  索引缓冲区对象,存储有关索引的数据。

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

  将顶点存储到数组中之后,我们使用这些缓冲对象将它们传递给WebGL图形管道。

网格

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

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

  使用原始多边形绘制的三维对象称为网格。WebGL提供了几种绘制三维图形对象的方法,但是用户通常更喜欢绘制网格。

例子

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