目录

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程序都是基于这两个元件来构造的,常用的方法是使用两个着色器来实现:

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

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

具体方法:

WebGLProgram(WebGL环境)着色器编译完后,需要将着色器链接到WebGLProgram:

提供数据:

清空canvas:

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

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

绘制图形:WebGL执行GLSL程序

效果