效果： 代碼： ...
效果：
代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>WebGl 利用緩衝區對象畫多個點</title> 6 </head> 7 <body> 8 9 <canvas id="myCanvas" width="500" height="300" style='border:1px solid red'></canvas> 10 11 </body> 12 13 14 <script> 15 16 window.onload = function () { 17 18 //步驟一： 獲取上下文 19 var myCanvas = document.getElementById('myCanvas'); 20 var gl = myCanvas.getContext('webgl'); 21 22 23 24 //步驟二： 定義三個點 ，並將其儲存在緩存區對象 25 var vertices = [ 26 -0.5,0.5,0.0, 27 0.0,0.5,0.0, 28 -0.25,0.25,0.0, 29 ]; 30 31 // 2.1 創建一個空的緩衝區對象來存儲頂點緩衝區 32 var vertex_buffer = gl.createBuffer(); 33 34 // 2.2 綁定緩衝區對象 35 gl.bindBuffer(gl.ARRAY_BUFFER,vertex_buffer); 36 37 // 2.3 將頂點數據傳遞到緩衝區 38 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 39 40 41 42 //步驟三： 創建和編譯著色器程式 43 //定點著色器 44 var vertCode = "attribute vec3 coordinates;" + 45 "void main() {" + 46 "gl_Position = vec4(coordinates,1.0);" + //位置 47 "gl_PointSize = 10.0;" + //點的大小（單位像素） 48 "}"; 49 50 //片段著色器 51 var fragCode = "void main() {" + 52 "gl_FragColor = vec4(1, 0.5, 0.0, 1);" + //RBGA值 53 "}"; 54 55 // 3.1 創建一個頂點著色器對象、一個片段著色器對象 56 var vertShader = gl.createShader(gl.VERTEX_SHADER); 57 var fragShader = gl.createShader(gl.FRAGMENT_SHADER); 58 59 // 3.2 為兩個著色器附加源代碼 60 gl.shaderSource(vertShader, vertCode); 61 gl.shaderSource(fragShader, fragCode); 62 63 // 3.3 編譯著色器 64 gl.compileShader(vertShader); 65 gl.compileShader(fragShader); 66 67 // 3.4 創建要存儲的著色器程式對象 68 var shaderProgram = gl.createProgram(); 69 70 // 3.5 為著色器程式附加著色器 71 gl.attachShader(shaderProgram, vertShader); 72 gl.attachShader(shaderProgram, fragShader); 73 74 // 3.6 鏈接兩個著色器 75 gl.linkProgram(shaderProgram); 76 77 // 3.7 使用組合著色器程式對象 78 gl.useProgram(shaderProgram); 79 80 81 82 //步驟四： 關聯著色器程式到緩衝對象 83 // 4.1 綁定緩衝區對象 84 // gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); 85 86 // 4.2 獲取屬性(定點的坐標點) 87 var coord = gl.getAttribLocation(shaderProgram, "coordinates"); 88 89 // 4.3 將緩衝區對象分配給coord變數 90 // 這裡是設置獲取數據的規則 第二個參數3 表示每個點定點有3個數據（對應vec3） 91 gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0); 92 93 // 4.4 啟用屬性 94 gl.enableVertexAttribArray(coord); 95 96 97 //步驟五： 繪製所需的對象 98 // 清除畫布顏色 99 gl.clearColor(0.5, 0.5, 0.5, 0.9); 100 101 // 啟用深度測試 102 gl.enable(gl.DEPTH_TEST); 103 104 // 清除顏色緩衝位 105 gl.clear(gl.COLOR_BUFFER_BIT); 106 107 // 設置視圖視窗 108 gl.viewport(0,0,myCanvas.width,myCanvas.height); 109 110 // 畫 三角形 111 gl.drawArrays(gl.POINTS, 0, 3) 112 113 114 } 115 116 </script> 117 118 </html>
