webgl

一个光栅化引擎：根据你的代码绘制出，点，线，和三角形，实现更复杂的任务，取决你能否提供合适的代码，组合使用，点，线，三角形；
webgl在gpu上运行，所以需要能够在gpu上运行的代码，这样的代码需要提供成对的方法；
每对方法都有一个顶点着色器和片段着色器，使用 强类型语言GLSL , 每对组合起来称为 program ;
大部分 webgl api ，都是关于如何设置这些成对方法的状态值和运行他们；
webgl被创建出来，就是为了在网页上创建三维的应用和用户体验；
从传统意义上来说，为了显示三维图形，开发者需要使用c或者c++语言，辅以专门的计算机图形库，如 openGL ， Direct3D ；
向html和js中添加额外的三维图形学的代码，就可以在网页上显示三维图形了；
webgl是内嵌在浏览器中的；所以跨平台；
webgl程序的结构
- glsl es, webgl, opengl/opengl es, js web api
主要的几个矩阵：
- 变换/模型矩阵
  - 平移矩阵
  - 旋转矩阵
  - 缩放矩阵
- 视图矩阵
- 投影矩阵
  - 正射投影矩阵
  - 透视投影矩阵

工作原理

将顶点（数据流）转换到裁剪空间坐标系； (每个顶点都会调用顶点着色器)
基于第一部分的结果绘制像素点； （计算出三个顶点对应的像素后，就会光栅化三角形，光栅化：用像素画出，每个像素都会调用片段着色器）
对于想要绘制的每个对象，都需要先设置一系列状态值，然后调用 gl.drawArrays 或 gl.drawElements 运行一个着色方法对；

着色器

使用opengl的着色语言glsl编写程序；
携带绘制形状的顶点信息和构造绘制在屏幕上的像素所需要信息（像素点的位置和颜色

着色器分类

顶点着色器和片段着色器

顶点着色器

图像的顶点（坐标
gl_Position: 每次计算给这个特殊变量赋值，就可以确定顶点坐标值，GPU将其保存起来

片段着色器

被绘制的图形的每个像素点调用一次，职责是确定像素的颜色；
通过指定应用到像素的纹理元素（也就是图形纹理中的像素）；
gl_FragColor: 每次计算给这个特殊变量赋值，就可以确定一个颜色值，实现自定义像素颜色；

GLSL

数据类型 `每种数据依据作用不同可以被一种或者全部shader访问，都可以使用javascript访问，着色器获取数据的4种方法：`

attributes 和 bufferr: 通过缓冲区提供数据
- 可以被javascript操作，也可以被vertex shader作为变量访问
uniforms (全局变量): 在一次绘制中对所有顶点保持一致值
varyings （可变量）: 从顶点着色器转递到片段着色器的值
textures （纹理）: 从像素或者纹理元素中获取的数据
texture2D: 抽取纹素颜色 （参数：纹理单元编号，纹理坐标）

3d

组成：由点组成，两个点组成一条线，三个不在一条直线上的点组成三角形面，多个三角形面组成各种形状的物体；

右手坐标系

缓冲区

颜色缓冲区 gl.COLOR_BUFFER_BIT
深度缓冲区 gl.DEPTH_BUFFER_BIT
模板缓冲区 gl.STENCIL_BUFFER_BIT

清空缓冲区

gl.clearColor(red,green,blue,alpha) (0.0,0.0,0.0,0.0)
gl.clearDepth(depth) 1.0
gl.clearStencil(s) 0