人類是無利不起早，有時候我們總是避諱不談利益而談理想和最求，但是相對這些都沒有利益驅動做一件事更靠譜。要知道一個簡單道理就是利益是人類進步的原動力，是一切行動的原動力和目的。區塊鏈也是建立承認利益的基礎上的，因爲犯錯成本太高所以纔不會破壞。
有用我們纔會去學習，在開始之前我們需要明確我們學習的目的。所以先看一看學習了 webGL 我們會得到哪些利益，直白地說就是可觀薪酬，獲取被仰慕的眼神，我們還要什麼這些就夠了。先看看 webGL 的應用吧。
商業上 WebGL 應用
-
人體結構 zygotebody
![]()
-
web 遊戲
![]()
-
建築表現
![]()
大數據可視化
物理展示
WebGL 定義
WebGL 是一項利用 javascript API 來呈現 3D 電腦圖形的技術，與之前通過瀏覽器外掛程序不同，WegGL 是只需要編寫網頁代碼就可以實現 3D 圖像的展示。
WebGL 是基於 OpenGL ES 2.0 提供了 3D 圖像的程序界面。
現在 html5 Canvas 支持 webGL 的功能。
什麼是 OpenGL ES(OpenGL for Embedded Systems)
是 OpenGL 三維圖像 API 的子集，針對手機、PDA 和遊戲機等嵌入式設備而設計的。
什麼是 OpenGL
OpenGL（全寫Open Graphics Library）是指定義了一個跨編程語言、跨平臺的編程接口規格的專業的圖形程序接口。
爲什麼是 WebGL 而不是 canvas 和 SVG
與 canvas 和 SVG 不同的是 WebGL 通過 webGL javascript API 連接 javascript 和 GPU 進行編程。GPU 繪圖的渲染工作大部分在 GPU 上完成，減少瀏覽器的壓力，從而提供了性能。所以使用 WebGL 是要在瀏覽器端進行 3D 渲染和大數據可視化唯一的選擇。
檢查 webGL 支持度
訪問這個網站 https://get.webgl.org 可以�檢查瀏覽器是否支持 WegGL
- 如果瀏覽器不支持 webGL ，此網站會建議您安裝支持 WebGL 的瀏覽器
- 如果瀏覽器支持 webGL ，還是無法啓用 webGL 那可能是因爲您網卡不支持 webGL，這的多老網卡呀，也可能與顯卡的驅動有關係。
還有可能 webGL 不好用的情況是瀏覽器支持 webGL，顯卡也沒有問題，那麼我們就需要檢查瀏覽器的設置，這裏先以 Chrome 瀏覽器爲例
- chrome 瀏覽器有關 webGL 的設置
- 在瀏覽器地址欄輸入 chrome://flags
- Ctrl+F 開啓搜索欄，在搜索欄輸入 "rendering list" 後找到 "overwrite rendering list" 然後將 enable 修改爲 disable，這樣就會對不受支持的系統設定爲啓用 GPU 加速處理功能。
webGL 開發流程
1.搭建環境
- 檢查瀏覽器是否支持 html5 特性，對於 webGL 的開發人員所有工作都是在 canvas
<canvas id="game-surface">
瀏覽器不支持 html5
</canvas>
- 給 canvas 指定寬度和高度，我們所有的工作都在這個窗口內完成。
<canvas id="game-surface" width="800" height="600">
瀏覽器不支持 html5
</canvas>
<br/>
<i>Demo webGL</i>
- 創建 app.js 然後在 html 中引入 app.js 同時在 onload 方法加載 InitDemo() 方法
<body onload="InitDemo()">
<canvas id="game-surface" width="800" height="600">
瀏覽器不支持 html5
</canvas>
<br/>
<i>Demo webGL</i>
<script src="app.js"></script>
</body>
我們首先在 InitDemo 方法中打印一句話，看看是否被執行到
function InitDemo(){
console.log(111)
}
- 獲取 webGL 對象，canvas 通過提供 context 來作爲一個接口供開發者使用這個接口來對 canvas 進行繪製。如何傳入 2d 可以獲取繪製2D 圖形的 context。chrome 和 firefox 可以通過 webgl 獲取 webGL 的 context，而 IE 需要通過傳入 experimental-webgl 來獲取 webgl。說道這裏還有一些小故事，微軟開始是不支持 webgl，聲稱原因是 webgl 的安全性存在問題，其實微軟是存在一些私心的，因爲 openGL 是與微軟的directX 是同一類型產品，但是最近大勢所趨微軟的瀏覽器也不得不支持 webGL。
function InitDemo(){
var canvas = document.getElementById("game-surface");
var gl = canvas.getContext('webgl');
if(!gl){
gl = canvas.getContext('experimental-webgl');
}
if(!gl){
alert("您的不支持 webGL")
}
}
通過 gl.viewport 我們的 webGL 在 canvas 繪製相對的窗口的尺寸。每次繪製圖片前我們都需要清空一下畫布。會調用 clear 方法來清理畫布。
canvas.width = window.innerWidth;
canvas.height = window.innerWidth;
gl.viewport(0,0,window.innerWidth,window.innerHeight)
gl.clearColor(0.75,0.85,0.8,1.0)
gl.clear();
app.js:14 Uncaught TypeError: Failed to execute 'clear' on 'WebGLRenderingContext': 1 argument required, but only 0 present.
- color buffer
- depth buffer
gl.clearColor(0.75,0.85,0.8,1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
這裏做練習我們就兩個 gl.COLOR_BUFFER_BIT 和 gl.DEPTH_BUFFER_BIT 都定義了。