webgl复习笔记——绘制 点、多个点

谨记绘制流程

绘制一个点

//获取canvas
let canvas = document.getElementById("webgl");
//获取webgl
let webgl = canvas.getContext("webgl");

//顶点着色器
function draw1Point() {
    let v_shader = `
void main(){
    gl_Position = vec4(0.5,0,0,1);
    gl_PointSize = 10.0;
}
`;
    //gl_Position 四位，最后一位叫做齐次坐标，用来矩阵相乘用。
    let f_shader = `
void main(){
    gl_FragColor = vec4(1,0,0,.5);
}
`;
    initShaders(webgl, v_shader, f_shader);

    webgl.clearColor(0, 0, 0, 1.0);
    webgl.clear(webgl.COLOR_BUFFER_BIT);
    webgl.drawArrays(webgl.POINT, 0, 1);
}

绘制多个点

function draw2Point(){
    let v_shader = `
    attribute vec4 a_position;
void main(){
    gl_Position = a_position;
    gl_PointSize = 10.0;
}
`;
    //gl_Position 四位，最后一位叫做齐次坐标，用来矩阵相乘用。
    let f_shader = `
void main(){
    gl_FragColor = vec4(1,0,0,.5);
}
`;
    initShaders(webgl, v_shader, f_shader);

    webgl.clearColor(0, 0, 0, 1.0);
    webgl.clear(webgl.COLOR_BUFFER_BIT);

    let a_position = webgl.getAttribLocation(webgl.program, "a_position");

    for(let i = 0; i < 10; i ++){
        webgl.vertexAttrib3f(a_position, .5, 0.1*i, 0)
        webgl.drawArrays(webgl.POINT, 0, 1);
    }
}

初始化着色器部分

// cuon-utils.js (c) 2012 kanda and matsuda
/**
 * Create a program object and make current
 * @param gl GL context
 * @param vshader a vertex shader program (string)
 * @param fshader a fragment shader program (string)
 * @return true, if the program object was created and successfully made current 
 */
function initShaders(gl, vshader, fshader) {
    var program = createProgram(gl, vshader, fshader);
    if (!program) {
        console.log('Failed to create program');
        return false;
    }

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

    return true;
}

/**
 * Create the linked program object
 * @param gl GL context
 * @param vshader a vertex shader program (string)
 * @param fshader a fragment shader program (string)
 * @return created program object, or null if the creation has failed
 */
function createProgram(gl, vshader, fshader) {
    // Create shader object
    var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);
    var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);
    if (!vertexShader || !fragmentShader) {
        return null;
    }

    // Create a program object
    var program = gl.createProgram();
    if (!program) {
        return null;
    }

    // Attach the shader objects
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);

    // Link the program object
    gl.linkProgram(program);

    // Check the result of linking
    var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
    if (!linked) {
        var error = gl.getProgramInfoLog(program);
        console.log('Failed to link program: ' + error);
        gl.deleteProgram(program);
        gl.deleteShader(fragmentShader);
        gl.deleteShader(vertexShader);
        return null;
    }
    return program;
}

/**
 * Create a shader object
 * @param gl GL context
 * @param type the type of the shader object to be created
 * @param source shader program (string)
 * @return created shader object, or null if the creation has failed.
 */
function loadShader(gl, type, source) {
    // Create shader object
    var shader = gl.createShader(type);
    if (shader == null) {
        console.log('unable to create shader');
        return null;
    }

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

    // Compile the shader
    gl.compileShader(shader);

    // Check the result of compilation
    var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if (!compiled) {
        var error = gl.getShaderInfoLog(shader);
        console.log('Failed to compile shader: ' + error);
        gl.deleteShader(shader);
        return null;
    }

    return shader;
}

/** 
 * Initialize and get the rendering for WebGL
 * @param canvas <cavnas> element
 * @param opt_debug flag to initialize the context for debugging
 * @return the rendering context for WebGL
 */
function getWebGLContext(canvas, opt_debug) {
    // Get the rendering context for WebGL
    var gl = WebGLUtils.setupWebGL(canvas);
    if (!gl) return null;

    // if opt_debug is explicitly false, create the context for debugging
    if (arguments.length < 2 || opt_debug) {
        gl = WebGLDebugUtils.makeDebugContext(gl);
    }

    return gl;
}