WebGL与ES6：绘制简单点

版权声明： https://blog.csdn.net/GISuuser/article/details/82224057

这个代码的例子是从书籍上搬来的，不同的是，书籍提供的WebGL函数库代码是ES5的，我把函数库使用的代码用ES6的方法重写了。中间还使用了ES6的特性——静态方法和模版字符串。最后出现了想要的东西，特此纪念一下。

export class RenderTool {
    static initShaders(gl, vshader, fshader){
        var program = RenderTool.createProgram(gl, vshader, fshader);
        if (!program) {
            console.log('创建program失败');
            return false;
        }

        gl.useProgram(program);
        gl.program = program;

        return true;
    }
    static createProgram(gl, vshader, fshader){
        // 创造着色器对象
        let vertexShader = RenderTool.loadShader(gl, gl.VERTEX_SHADER, vshader);
        let fragmentShader = RenderTool.loadShader(gl, gl.FRAGMENT_SHADER, fshader);
        if (!vertexShader || !fragmentShader) {
            return null;
        }

        // 创造 program 对象
        let program = gl.createProgram();
        if (!program) {
            return null;
        }

        // 绑定着色器与program
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);

        //连接program
        gl.linkProgram(program);

        // 检查连接结果
        let linked = gl.getProgramParameter(program, gl.LINK_STATUS);
        if (!linked) {
            let error = gl.getProgramInfoLog(program);
            console.log('连接 program失败: ' + error);
            gl.deleteProgram(program);
            gl.deleteShader(fragmentShader);
            gl.deleteShader(vertexShader);
            return null;
        }
        return program;
    }

    /**
     * 创建着色器
     * @param gl
     * @param type
     * @param source
     * @returns {*}
     */
    static loadShader(gl, type, source){
        // 创建着色器
        let shader = gl.createShader(type);
        if (shader == null) {
            console.log('创建着色器失败');
            return null;
        }

        // Set the shader program
        gl.shaderSource(shader, source);

        // 编译着色器
        gl.compileShader(shader);

        // 检查编译结果
        let compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
        if (!compiled) {
            let error = gl.getShaderInfoLog(shader);
            console.error('编译着色器失败: ' + error);
            gl.deleteShader(shader);
            return null;
        }

        return shader;
    }
}

let VSHEADER_SOURCE=
    `void main(){
    gl_Position = vec4(0.00, 0.00, 0.00, 1.00);
    gl_PointSize = 10.0;
    }
    `;
let FSHEADER_SOURCE=
    `void main(){
    gl_FragColor = vec4(1.00, 0.00, 0.00, 1.00);
    }
    `;

function main() {
    //获取上下文对象
    const canvas = document.querySelector("#glcanvas");
    const gl = canvas.getContext("webgl");
    //检测WebGL支持
    if (!gl) {
        console.error("浏览器不支持WebGL");
        return
    }
    if(!RenderTool.initShaders(gl,VSHEADER_SOURCE,FSHEADER_SOURCE)){
        console.error("初始化着色器失败");
        return
    }
    //设置背景色
    gl.clearColor(0.0, 0.0, 0.0, 1);
    //设置缓冲区颜色
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.POINTS,0,1);
}

main();

		<canvas id="glcanvas">
                            浏览器不支持Html5 <code>&lt;canvas&gt;</code> 元素.
        </canvas>