分类导航

webgl自学笔记——几何图形

发布时间：2017年07月16日作者： IT网络文摘 (该文来自笔记，点击查看原文)

D应用的基础元素：

1、canvas，它是渲染场景的占位符。标准html的canvas元素

2、Objects，这里指的是组成一个场景的所有3d实体。这些实体都由三角形组成。webgl中使用Buffer（vertex、index）来存储管理这些3d实体数据。

3、Lights，如果没有光照3d场景将看不到任何东西。webgl使用着色器来为场景中的光照建模。我们将会看到3d实体如何根据物理规律来反射和吸收光照，并讨论不同的光照模型。

4、Camera，摄像机作为3d世界的视口。我们通过摄像机来开发和看到一个3d场景。我们要理解如何根据不同的场景来使用不同的矩阵操作，这些操作可以利用相机原理来建模。

webgl中的数据类型：

webgl对图形有一种标准的处理方式，与我们拥有的表面的复杂性和顶点个数无关。只有两种基础的数据类型来表达3d物体的几何形状：vertices和indices（顶点和索引）。

Vertices： 代表3d物体的拐点，每一个顶点使用3个数字来表达想x,y,z；webgl中没有提供api来将独立的顶点传递到渲染管线中，因此我们需要将所有的顶点放在一个JavaScript数组中然后通过这个数组来构造一个webgl顶点缓冲区（vertex buffer）。

Indices： 索引是在一个给定3d场景的中的所有顶点的数字标识。索引告诉webgl如何有序的来链接顶点来生成一个表面。像顶点一样，索引也是存储在JavaScript数组中然后使用webgl索引缓冲区传递给webgl的渲染管线。

有两种webgl 缓冲区来描述和处理几何图形：

包含顶点数据的缓冲区：Vertex Buffer Objects（VBO）

包含索引数据的缓冲区：Index Buffer Objects（IBO）

webgl的渲染管线：

Vertex Buffer Objects

VBO包含了webgl要求来描述将要渲染的几何图形的数据。除了上面提到的顶点坐标外，还有vertex normal（顶点法线），颜色、纹理坐标等都可以用vbo来建模。

Vertex shader

顶点着色器将会来每个顶点上被调用，顶点着色器将用来操作之前的顶点数据，如顶点坐标、法线、颜色、文理坐标。这些数据将被顶点着色器内置的attributes变量来引用，每一个attribute指向一个他读取顶点数据的VBO。

Fragment shader

每三个顶点定义了一个三角形在三角形表面的每一个元素都需要被分配一个颜色，否则我们的表面将是透明的。

三角形表面的每一个元素成为一个片元（fragment）。因为我们处理的表面将被呈现在我们屏幕上，所以片元通常被理解为像素。

片元着色器的主要目的是为表面的每个独立像素来计算颜色。