WebGL 探祕 (1)

WebGL JavaScript · 發表 2019-02-17 19:00:09

摘要： 2-1510291500300-L.jpg 人類是無利不起早，有時候我們總是避諱不談利益而談理想和最求，但是相對這些都沒有利益驅動做一件事更靠譜。要知道一個簡單道理就是利益是人類進步的原動力，是一切行動的原動力和目的。區塊鏈也是建立承認利益的基礎上的...

2-1510291500300-L.jpg

人類是無利不起早，有時候我們總是避諱不談利益而談理想和最求，但是相對這些都沒有利益驅動做一件事更靠譜。要知道一個簡單道理就是利益是人類進步的原動力，是一切行動的原動力和目的。區塊鏈也是建立承認利益的基礎上的，因為犯錯成本太高所以才不會破壞。

有用我們才會去學習，在開始之前我們需要明確我們學習的目的。所以先看一看學習了 webGL 我們會得到哪些利益，直白地說就是可觀薪酬，獲取被仰慕的眼神，我們還要什麼這些就夠了。先看看 webGL 的應用吧。

商業上 WebGL 應用

人體結構 zygotebody

body-browser-webgl-01.jpg
web 遊戲

RCR_WebGL_02.jpeg.e4a8168569202aa419c42c8d84a2e4d6.jpeg
建築表現

151203_wbgl_clipping_new.png
大資料視覺化
物理展示

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 的設定
1. 在瀏覽器位址列輸入 chrome://flags
2. 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 都定義了。