WebGl 利用緩衝區對象畫多個點

時間 2019-11-29
原文原文鏈接
效果：html
代碼：web
  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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。