WebGL繪製三角形
阿新 • • 發佈：2020-11-24
<!-- * @Author: 蘋果園dog * @Date: 2020-11-20 15:42:15 * @LastEditTime: 2020-11-20 17:34:46 * @LastEditors: Please set LastEditors * @Description: webgl提供了一種很方便的機制，即緩衝區物件（buffer object），它可以一次性地向著色器傳入多個頂點的資料。 緩衝區物件是是webgl中的一塊記憶體區域，我們可以一次性向緩衝區物件填充大量的頂點資料，然後將這些資料儲存在其中，共著色器使用。 我們在initVertexBuffers函式中利用緩衝區物件向頂點著色器傳輸了多個頂點的資料，所以還需要第三個引數告訴gl.drawArray()函式 需要繪製多少個頂點。webgl系統並不知道緩衝區中有多少個頂點資料，所以應該顯示告知。 使用緩衝區物件向頂點著色器傳輸多個頂點資料的五個步驟 1、建立緩衝區物件（gl.createBuffer()） 2、繫結緩衝區物件(gl.bindBuffer()) 3、將資料寫入緩衝區物件(gl.bufferData()) 4、將緩衝區物件分配給一個attribute變數（gl.vertexAttribPointer（）） 5、開啟attribute變數（gl.enableVetexAttribArray()） * @FilePath: \web\webgl\ch03\multiPoints.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body onload="main()"> <canvas id="webgl" width="800" height="800"></canvas> <script src="../lib/webgl-utils.js"></script> <script src="../lib/webgl-debug.js"></script> <script src="../lib/cuon-utils.js"></script> <script> //頂點著色器 var VSHADER_SOURCE=` attribute vec4 a_Position;void main(){ gl_Position =a_Position; } `; //片元著色器 var FSHADER_SOURCE=` void main(){ gl_FragColor=vec4(0.0,0.0,1.0,1.0); } `; function main() { //獲取<canvas>元素 var canvas = document.getElementById('webgl'); //獲取WebGL上下文 var gl = getWebGLContext(canvas); if (!gl) { console.log('獲取WebGL繪圖上下文失敗!'); return; } //初始化著色器 if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { console.log('初始化著色器失敗！'); return; } //設定頂點位置 var n=initVertexBuffers(gl); //設定canvas背景色 gl.clearColor(0.0, 0.0, 0.0, 1.0); //清除canvas gl.clear(gl.COLOR_BUFFER_BIT); //繪製一個三角形 gl.drawArrays(gl.TRIANGLES, 0, n); } function initVertexBuffers(gl){ var vertices=new Float32Array([-0.5,-0.5,0.5,-0.5,-0.5,0.5, 0.6,-0.5,0.8,-0.5,0.7,0.7]); var n=6;//點的個數 //建立緩衝區物件 var vertexBuffer=gl.createBuffer(); if(!vertexBuffer){ console.log('failed to create the buffer object!'); return -1; } //將緩衝區物件繫結到目標 gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer); //向緩衝區物件寫入資料 gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW); var a_Position=gl.getAttribLocation(gl.program,'a_Position'); if (a_Position < 0) { console.log('獲取a_Position變數的儲存位置失敗！'); return -1; } //將緩衝區物件分配給a_Position變數 //gl.vertexAttribPointer(location,size,type,normalized,stride,offset) gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0); gl.enableVertexAttribArray(a_Position); return n; } </script> </body> </html>