本文主要介紹《webgl程式設計指南》中連續繪製點功能的學習，並將**改造在vue框架中執行。部分**源自以及《webgl程式設計指南》。
1、在src/components中新建canvas.vue檔案。
2、**如下：
13-20行設定頂點著色器和片元著色器，這裡使用的是模板字串（``）。與之前不同的是這裡在頂點著色器中引入了a_position變數給頂點的位置賦值；
attribute變數用於傳輸與頂點相關的資料；
uniform變數用於傳輸與頂點無關的資料，即所有頂點都相同的資料；
21行定義繪製的點的陣列；
22行定義webgl上下文；
23行定義a_position變數；
43-47行這只頂點的位置；
53行建立gl上下文；
60行獲取頂點著色器中的a_position，並建立與data中a_position的聯絡；
3、執行效果
Vue與WebGL結合 逐片元光照
本文主要講述vue與webgl結合並實現逐片元光照。文中部分 源自 webgl程式設計指南 如下 第30行 計算頂點經過模型矩陣變換後的法向量。計算方法是將變換之前的法向量乘以模型矩陣的逆轉置矩陣，即逆矩陣的轉置。中第205 206行實現模型矩陣的逆轉置矩陣。第51 55行 計算漫反射光，漫反射光顏...
WebGL 顏色與紋理
1.紋理座標 紋理座標是紋理影象上的座標，通過紋理座標可以在紋理影象上獲取紋理顏色。webgl系統中的紋理座標系統是二維的，如圖所示。為了將紋理座標和廣泛使用的x y座標區分開來，webgl使用s和t命名紋理座標 st座標系統 紋理影象的四個角座標為左下角 0.0，0.0 右下角 1.0,0.0 右...
Echart在vue中與Tabs結合不能顯示的問題
最近在學習vue的途中，需要用到乙個使用element元件的tabs結合echart來使用的地方，但是出現了一點問題，切換時一直沒辦法顯示，但無意中按出開發者工具就突然顯示了，很是不解。找了很久，在一篇部落格中發現乙個很好用的例子。直接在el tab pane標籤內使用lazy true 即可顯示 ...