3、绘制线

绘制线

• 相关讲解
• 效果
• 代码

相关讲解

效果

webgl.LINE_LOOP

webgl.LINES

webgl.LINE_STRIP

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制点坐标</title>
    <script src="./glMatrix-0.9.6.min.js"></script>
    <script>
        var webgl;
        var projMat4;
        var projMat4 = mat4.create()
        // 顶点着色器
        var vertexString = `
        attribute vec4 a_posiiton;
        uniform mat4 proj;
        void main(){
            gl_Position=proj*a_posiiton;
        }
        `
        // 片元着色器
        var fragmentString = `
        void main(){
            gl_FragColor=vec4(1.0,0,1.0,1.0);
        }
        `
        // 入口函数
        function init() {
            initWebgl()
            initShader()
            initBuffer()
            draw()
        }
        // webgl初始化函数
        function initWebgl() {
            let webglDiv = document.getElementById("webglCanvas")
            // 获取webgl的上下文            
            webgl = webglDiv.getContext("webgl")
            // 设置webgl的视觉区域
            webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight)
            // 设置webgl的投影
            mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1.0, 1.0, projMat4)

        }
        // shader初始化函数
        function initShader() {
            let vsshader = webgl.createShader(webgl.VERTEX_SHADER)
            let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER)
            webgl.shaderSource(vsshader, vertexString)
            webgl.shaderSource(fsshader, fragmentString)
            // 将shader编译进行打包
            webgl.compileShader(vsshader)
            webgl.compileShader(fsshader)
            let program = webgl.createProgram()
            webgl.attachShader(program, vsshader)
            webgl.attachShader(program, fsshader)

            webgl.linkProgram(program)
            webgl.useProgram(program)
            webgl.program = program
        }
        // 数据缓冲区初始化函数
        function initBuffer() {
            let aPosition = webgl.getAttribLocation(webgl.program, "a_posiiton")
            let arr = [
                100.0, 100.0, 0, 1.0,
                200.0, 200.0, 0, 1.0,
                300.0, 200.0, 0, 1.0,
                400.0, 600.0, 0, 1.0
            ]
            let pointPosition = new Float32Array(arr)
            let lineBuffer = webgl.createBuffer()
            webgl.bindBuffer(webgl.ARRAY_BUFFER, lineBuffer)
            webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW)
            webgl.enableVertexAttribArray(aPosition)
            //把值赋给shader
            webgl.vertexAttribPointer(aPosition, 4, webgl.FLOAT, false, 4 * 4, 0 * 4)
            // webgl.vertexAttrib4fv(aPosition, pointPosition)
            let uniformproj = webgl.getUniformLocation(webgl.program, "proj")
            webgl.uniformMatrix4fv(uniformproj, false, projMat4)
        }
        // webgl的绘制函数
        function draw() {
            webgl.clearColor(0.0, 0.0, 0.0, 1.0)
            //  颜色检测
            webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT)
            // webgl.drawArrays(webgl.LINE_LOOP, 0, 4)
            webgl.drawArrays(webgl.LINE_STRIP, 0, 4)
            // webgl.drawArrays(webgl.LINES, 0, 4)
        }
    </script>
</head>

<body onload="init()">
    <canvas id="webglCanvas" width="1000" height="800"></canvas>
</body>

</html>