转载自：https://www.cnblogs.com/bsman/p/6128447.html

一、WebGL和传统网页的区别：

普通网页组成成分：HTML、JavaScript；

WebGL网页组成成分：HTML5、JavaScript和GLSL ES(着色器语言 OpenGL ES)；

二、WebGL采用H5中的<canvas>元素来定义绘图区域，然后通过JavaScript内嵌GLSL ES在canvas中绘制三维图形。

canvas可以同时支持二维图形和三维图形，它不直接提供绘图方法，而是提供一种叫上下文(context)机制来绘制图形，

2.1使用canvas绘制二维空间步骤：

    2.1.1创建HTML5 canvas

<canvas id="canvas" width="200" height="200"></canvas>

    2.1.2获取画布 canvas 的 ID和画布的上下文

//获取canvas元素
var canvas = document.getElementById('canvas');
//获取绘制二维上下文
var ctx = canvas.getContext('2d');

  2.1.3通过上下文提供的方法进行绘制。

属性和方法参考：http://www.w3school.com.cn/tags/html_ref_canvas.asp

例如：

ctx.fillStyle ='rgba(255,0,0,1.0)';//设置填充色为红色
ctx.fillRect(0,0,200,200);//使用填充色填充为矩形

2.2使用canvas绘制webgl步骤：

  2.2.1创建HTML5 canvas（同上）

  2.2.2获取画布 canvas 的 ID（同上）

  2.2.3获取WebGL

//获取webgl上下文
var gl = canvas.getContext('webgl');

解释：为了得到 WebGLRenderingContext 对象(或图形的WebGL上下文对象或只在WebGL的情况下)，调用当前 HTMLCanvasElement 的getContext()方法。getContext()的语法如下  ：

canvas.getContext(contextType, contextAttributes);

通过"webgl"字符串或"experimental-webgl" 作为 contentType。contextAttributes参数是可选的。 (虽然在进行这一步，请确保您的浏览器实现了WebGL 1.0版本(OpenGL ES 2.0))。其中WebGL的参数 ContextAttributes 不是强制性的。此参数提供接受布尔值，如下面列出各种选项 

例如：

//带参数的webgl上下文
var gl = canvas.getContext('webgl', { antialias: false, stencil: true });

 2.2.4编译着色器

着色器参考：http://www.yiibai.com/webgl/webgl_shaders.html

    2.2.4.1存储着色器（顶点着色器和片段着色器）以顶点着色器为例

var VSHADER_SOURCE =
        "void main() { " +
        //设置坐标
        "gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " +
        //设置尺寸
        "gl_PointSize = 10.0; " +
        "} ";

    2.2.4.2编译着色器，有三步

　 (1)创建Shader对象 

Object createShader (enum type)

如观察到的语法，该方法接受预定义的枚举值作为参数。我们有两种选择这一点 ：gl.VERTEX_SHADER创建顶点着色器 ，  gl.FRAGMENT_SHADER 创建片段着色器。

//例如：创建定点着色器
var vertShader = gl.createShader(gl.VERTEX_SHADER);

    (2)将写好的着色器附加到Shader上

oid shaderSource(Object shader, string source)

其中：shader − 必须创建Shader对象传递作为一个参数，Source − 必须以字符串格式传入着色器程序代码。

   (3)编译程序

compileShader(Object shader)

此方法接受着色器程序对象作为参数。创建着色器程序对象之后，附加源代码，将对象传递给该方法

    2.2.5合并程序

    (1)创建一个程序对象

createProgram();

    (2)附加着色器

attachShader(Object program, Object shader);

顶点着色器 

顶点着色器控制了几何体如何渲染，在GPU中运行并计算出最终顶点位置，顶点在openGL中是一种图元，它的维度小于3，一个顶点(Points)、2个顶点(Lines)、3个顶点(Triangles)，着色器控制这些图元的位置坐标，最终通过gl_Position输出。

片元着色器 

片元着色器处理物体材质、灯光等信息，决定了每个片元的颜色，同时也是在GPU中运行。最终通过gl_FragColor输出。

坐标系的转换 

坐标系的转化、矩阵转换，模糊的理解就是矩阵相乘。