WebGL入门课程02-绘制基本图形

[TOC]

六、WebGL缓冲区对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缓冲区</title>
    <style>
        #web04{
            height: 500px;
            width: 750px;
        }
    </style>
    <script src="lib.js"></script>
</head>
<body>
<canvas id="web04"></canvas>
<script>
    let canvas=document.querySelector("#web04");
    let gl=canvas.getContext('webgl');
    let VERTEX_SHADER='' +
        'attribute vec4 a_pos;' +
        'void main(){' +
        'gl_Position=a_pos;' +
        'gl_PointSize=15.0;' +
        '}';
    let FRAG_SHADER='' +
        'void main(){' +
        'gl_FragColor=vec4(1.0,1.0,0.0,1.0);' +
        '}';
    let program=initShader(gl,VERTEX_SHADER,FRAG_SHADER);
    let dataVertices=new Float32Array([
        0.0,0.0,
        0.5,0.5,
        0.5,-0.5,
        -0.5,-0.5,
        -0.5,0.5
    ]);
    let buffer=gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
    gl.bufferData(gl.ARRAY_BUFFER,dataVertices,gl.STATIC_DRAW);
    let a_pos=gl.getAttribLocation(program,'a_pos');
    gl.vertexAttribPointer(a_pos,2,gl.FLOAT,false,0,0);
    gl.enableVertexAttribArray(a_pos);

    gl.drawArrays(gl.POINTS,0,5);
</script>
</body>
</html>

七、绘制基本图形

关键函数:

gl.drwaArray(MODe,FIRST,COUNT);

1582513687840

1582513737658

八、绘制点代码升级

将以后可能会用到的代码抽取为函数:

function initShader(gl,VERTEX_SHADER,FRAG_SHADER) {
    let vertex=gl.createShader(gl.VERTEX_SHADER);//创建顶点着色器
    let frag=gl.createShader(gl.FRAGMENT_SHADER);//创建片元着色器

    gl.shaderSource(vertex,VERTEX_SHADER);//指定点着色器对象
    gl.shaderSource(frag,FRAG_SHADER);//指定片元着色器对象

    gl.compileShader(vertex);//编译顶点着色器
    gl.compileShader(frag);//编译片元着色器

    let program=gl.createProgram();//创建程序对象
    gl.attachShader(program,vertex);//为程序对象分配顶点着色器
    gl.attachShader(program,frag);//为程序对象分配片元着色器

    gl.linkProgram(program);//链接程序对象

    gl.useProgram(program);//告知使用的对象
    gl.clearColor(0.4,0.5,0.6,1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    return program;
}

function bufferInit(gl,dataVertices,pt,program) {
    let buffer=gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
    gl.bufferData(gl.ARRAY_BUFFER,dataVertices,gl.STATIC_DRAW);
    let a_pos=gl.getAttribLocation(program,pt);
    gl.vertexAttribPointer(a_pos,2,gl.FLOAT,false,0,0);
    gl.enableVertexAttribArray(a_pos);
}