html5 webgl pyhon,WebGL基础

WebGL坐标系

就像任何其他的3D系统，在WebGL中Z轴表示深x，y和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的API 绘制图形元素。

下面是在开始使用WebGL之前你需要知道的一些基本术语。

顶点

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

示例

在下面的例子中，我们绘制具有以下顶点的三角形 − (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 保存数据的存储器区域。有多种缓冲液即，绘图缓冲器，帧缓冲器，vetex 缓冲器，和索引缓冲器。顶点缓冲器和索引缓冲器被用来描述和处理模型的几何形状。

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

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

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

存储到顶点数组后，我们将它们传递到使用这些缓冲区对象 WegGL 图形流水线。

网格

要绘制2D或3D对象，WebGL的API提供了两种方法，即drawArrays()和drawElements()。这两种方法接受一个使用它用户可以选择想要拉拢的对象称为模式参数。通过字段提供的选项被限制为点，线和三角形。

要使用这两种方法绘制3D对象，我们必须构造采用点，线，或者三角形的一个或多个原始的多边形。然后使用这些基本多边形，就能形成一个网格。使用基本多边形绘制的3D对象被称为一个网格。 WebGL提供了几种方法来绘制3D图形对象，但用户通常更喜欢画一个网格。

示例

在下面的例子中，可以观察到，我们已经绘制使用两个三角形的正方形 → {1, 2, 3} and {4, 1, 3}.