webgl學習筆記二-繪圖多點

時間 2019-11-08

標籤 webgl 學習筆記繪圖多點简体版

原文原文鏈接

寫在前面html

建議先看下第一篇webgl學習筆記一-繪圖單點web

第一篇文章,介紹瞭如何用webgl繪圖一個點。接下來本文介紹的是如何繪製多個點。造成一個面。canvas

webgl提供了一種很方便的機制,即緩衝區對象，能夠一次性地向着色器傳入多個頂點的數據。緩存區對象是webgl系統的一塊內存區域。緩存

繪製多個點的流程學習

這裏重點介紹緩衝區對象使用步驟webgl

建立緩衝區對象

gl.createBuffer()

綁定緩衝區對象

gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);

將數據寫入緩衝區對象

gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);

將緩衝區對象分配給一個attribute變量

gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

開啓attribute變量

gl.enableVertexAttribArray(a_Position);

demo.net

-htmlcode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<canvas id="canvas" width="200px" height="200px"></canvas>



</body>
</html>

JavaScript

<script>

    window.onload = function () {

        //頂點着色器程序
        var VSHADER_SOURCE =
            "attribute vec4 a_Position;" +
            "void main() {" +
            //設置座標
            "gl_Position = a_Position; " +
            "} ";

        //片元着色器
        var FSHADER_SOURCE =
            "void main() {" +
            //設置顏色
            "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
            "}";
        //獲取canvas元素
        var canvas = document.getElementById('canvas');
        //獲取繪製二維上下文
        var gl = canvas.getContext('webgl');
        if (!gl) {
            console.log("Failed");
            return;
        }
        //編譯着色器
        var vertShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertShader, VSHADER_SOURCE);
        gl.compileShader(vertShader);

        var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragShader, FSHADER_SOURCE);
        gl.compileShader(fragShader);
        //合併程序
        var shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertShader);
        gl.attachShader(shaderProgram, fragShader);
        gl.linkProgram(shaderProgram);
        gl.useProgram(shaderProgram);

        //獲取座標點
        var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position');

        if (a_Position < 0) {
            console.log('Failed to get the storage location of a_Position');
            return;
        }

        var n = initBuffers(gl, shaderProgram);

        if (n < 0) {
            console.log('Failed to set the positions');
            return;
        }
        // 清除指定<畫布>的顏色
        gl.clearColor(0.0, 0.0, 0.0, 1.0);

        // 清空 <canvas>
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.TRIANGLES, 0, n);
    }

    function initBuffers(gl, shaderProgram) {
        var vertices = new Float32Array([
            0.0, 0.5, -0.5, -0.5, 0.5, -0.5
        ]);
        var n = 3;//點的個數
        //建立緩衝區對象
        var vertexBuffer = gl.createBuffer();
        if (!vertexBuffer) {
            console.log("Failed to create the butter object");
            return -1;
        }
        //將緩衝區對象綁定到目標
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        //向緩衝區寫入數據
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
        //獲取座標點
        var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position');
        //將緩衝區對象分配給a_Position變量
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        //鏈接a_Position變量與分配給它的緩衝區對象
        gl.enableVertexAttribArray(a_Position);
        return n;

    }

</script>