webgl绘制线

最新推荐文章于 2023-09-01 16:12:43 发布

跑错行的人

最新推荐文章于 2023-09-01 16:12:43 发布

阅读量217

点赞数

文章标签： webgl

本文链接：https://blog.csdn.net/qq_40712151/article/details/128413851

版权

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../text_js/glMatrix-0.9.6.min.js"></script>

</head>
<script type="text/javascript">
    var webgl

    //顶点着色器shader
    //a_position承接点的坐标
    //proj承接投影坐标矩阵（将投影坐标系附到shader上）
    //shader的入口函数（顶点着色器的绘制的点）
    var vertexString = `
     attribute vec4 a_position;
     uniform   mat4   proj;
     void main(void){
         gl_Position = proj * a_position;
         gl_PointSize=60.0;
     }
     `;
    var fragmentString = `
     void main(void){
         gl_FragColor=vec4(0,0,1.0,1.0);
     }
     `;
    var projMat4 = mat4.create()
        //片元着色器shader
    function init() {
        initWebgl()
        initShader()
        initBuffer()
        draw()
    }

    function initWebgl() {
        let webglDiv = document.getElementById("webglCanvas")
        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)


    }
    //供GPU计算的语言
    function initShader() {
        //shader容器
        let verShader = webgl.createShader(webgl.VERTEX_SHADER)
        let fragShader = webgl.createShader(webgl.FRAGMENT_SHADER)
            //文本与shader的绑定
        webgl.shaderSource(verShader, vertexString)
        webgl.shaderSource(fragShader, fragmentString)
            //将容器打包编译
        webgl.compileShader(verShader)
        webgl.compileShader(fragShader)
            //将项目与shader容器进行绑定
        let program = webgl.createProgram()
        webgl.attachShader(program, verShader)
        webgl.attachShader(program, fragShader)
            //将webgl与创建的项目进行来链接
        webgl.linkProgram(program)
        webgl.useProgram(program)

        webgl.program = program

    }
    //将数据放入shader中，进行运算
    function initBuffer() {
        let aPosition = webgl.getAttribLocation(webgl.program, "a_position")
        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)
            //定义获取shader的变量
        let lineBuffer = webgl.createBuffer()
        webgl.bindBuffer(webgl.ARRAY_BUFFER, lineBuffer)
        webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW)
        webgl.enableVertexAttribArray(aPosition)
        webgl.vertexAttribPointer(aPosition, 4, webgl.FLOAT, false, 4 * 4, 0)

        //获取投影坐标系
        let uniforproj = webgl.getUniformLocation(webgl.program, "proj")
        webgl.uniformMatrix4fv(uniforproj, false, projMat4)


    }

    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.LINES, 0, 4);//两两一对的线条
         webgl.drawArrays(webgl.LINE_STRIP, 0, 4);//连续的线段 */
        webgl.drawArrays(webgl.LINE_LOOP, 0, 4); //闭合图形


    }
</script>

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

</body>

</html>