WebGL

WebGL(Web Graphics Library)是HTML5规范中的一部分，可以用来渲染三维场景。

WebGL源自OpenGL ES（OpenGL for Embedded Systems 是OpenGL三维图形API的子集）。

// 创建canvas
function createCanvas(width, height) {
    var canvas = document.createElement("canvas");
    canvas.width = width || 300;
    canvas.height = height || 300;
    return canvas;
}

// 创建着色器
function createShader(webGL, source, type) {
    var shader = webGL.createShader(type);
    webGL.shaderSource(shader, source);
    webGL.compileShader(shader);
    return shader;
}
// 初始化webGL
function initWebGL(canvas) {
    var webGL = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    if (!webGL) {
        console.log("当前浏览器不支持WebGL，请切换到支持WebGL的浏览器，比如Chrome");
        return null;
    } else {
        return webGL;
    }
}

// 创建矩形
function drawRect(webGL, program) {
    var buffer = webGL.createBuffer();
    webGL.bindBuffer(webGL.ARRAY_BUFFER, buffer);
    webGL.bufferData(
        webGL.ARRAY_BUFFER,
        new Float32Array([-1.0, -1.0,
            1.0, -1.0, -1.0, 1.0, -1.0, 1.0,
            1.0, -1.0,
            1.0, 1.0
        ]),
        webGL.STATIC_DRAW
    );

    // vertex data
    var positionLocation = webGL.getAttribLocation(program, "a_position");
    webGL.enableVertexAttribArray(positionLocation);
    webGL.vertexAttribPointer(positionLocation, 2, webGL.FLOAT, false, 0, 0);
}
// 入口函数
function init() {
    var canvas = createCanvas(),
        VER_SHADER_SRC = "attribute vec4 a_position;\n" +
        "void main() {\n" +
          "gl_Position = a_position;\n" +
        "}",
        FRAG_SHADER_SRC = "precision mediump float;\n" +
        "void main() {\n" +
          "gl_FragColor = vec4(1, 0, 0.5, 1);\n" +
        "}";
    document.body.appendChild(canvas);
    var webGL = initWebGL(canvas);
    if (webGL) {
        webGL.clearColor(0.0, 0.0, 0.0, 1.0);
        webGL.clear(webGL.COLOR_BUFFER_BIT | webGL.DEPTH_BUFFER_BIT);
        var vertex = createShader(webGL, VER_SHADER_SRC, webGL.VERTEX_SHADER),
            frag = createShader(webGL, FRAG_SHADER_SRC, webGL.FRAGMENT_SHADER);
        var program = webGL.createProgram();
        webGL.attachShader(program, vertex);
        webGL.attachShader(program, frag);
        webGL.linkProgram(program);
        webGL.useProgram(program);
        drawRect(webGL, program);
        webGL.drawArrays(webGL.TRIANGLES, 0, 6);
    }
}

WebGLShader（WebGL着色器），WebGL只关心两件事：位置坐标与颜色，所有WebGL程序都是基于这两个元件来构造的，常用的方法是使用两个着色器来实现：

• 顶点着色器（vertex shader）：返回位置坐标
• 像素着色器（fragment shader）：返回颜色

vec4()构造函数用于生成颜色，示例代码中vec4(1, 0, 0.5, 1)的数字的含义：

• 第一个1：代表红色
• 0：代表绿色
• 0.5： 代表蓝色
• 第二个1：代表alpha

在WebGL中颜色的取值范围是0到1.

具体方法：

• createShader：生成相应类型的WebGLShader
• shaderSource：生成GLSL的回调函数
• compileShader：编译着色器

WebGLProgram（WebGL环境）着色器编译完后，需要将着色器链接到WebGLProgram：

• createProgram：创建一个WebGL环境
• attachShader：附加着色器
• linkProgram：将着色器连接到WebGL环境中

提供数据：

• getAttribLocation：从当前环境中寻找定义的属性，即查找示例中初始化顶点着色器时定义的a_position。
• createBuffer：创建buffer（缓存区）
• bindBuffer：声明变量，并指向上一步创建的buffer
• bufferData：赋值数据到指定变量，比如示例中的ARRAY_BUFFER

清空canvas：

• clearColor：
• clear：

使用创建的WebGL环境：将当前的WebGL环境告知GPU程序

• useProgram:

告知WebGL从buffer中获取数据的方式：

• enableVertexArribArray：激活属性
• vertexAtrribPointer：获取数据

绘制图形：WebGL执行GLSL程序

• drawArrays：这是WebGL提供的一个渲染函数