HTML5之WebGL 3D概述(上)—WebGL原生開發開啟網頁3D渲染新時代_html5教學技巧

WebGL開啟了網頁3D渲染的新時代，它允許在canvas中直接渲染3D的內容，而不借助任何插件。 WebGL同canvas 2D的API一樣，都是透過腳本操縱對象，所以步驟也是基本上相似：準備工作上下文，準備數據，在canvas中繪製對象並渲染。與2D不同的就是3D涉及的知識更多了，例如世界、光線、紋理、相機、矩陣等專業知識。 WebGL有一個很好的中文教程，就是下面使用參考中的第一個鏈接，所以這裡不再班門弄斧，後面的內容只是簡單的總結一下學習的內容。

瀏覽器的支援
由於微軟有自己的圖形發展計劃，一直不支援WebGL，所以IE目前除了安裝插件外，是無法運行WebGL的。其他的主流瀏覽器如Chrome、FireFox、Safari、Opera等，都裝上最新的版本就可以了。除了瀏覽器要裝最新的外，還要確保顯示卡的驅動也是最新的。
裝上這些以後，可以開啟瀏覽器，輸入下面的網址驗證瀏覽器對WebGL的支援情況：http://webglreport.sourceforge.net/。

在正常安裝以上瀏覽器之後還是無法運行WebGL，那你可以強制開啟WebGL支援試一試。開啟方法如下：
Chrome瀏覽器
我們需要為Chrome加入一些啟動參數，以下具體操作步驟以Windows作業系統為例：找到Chrome瀏覽器的捷徑，右鍵點選快捷方式，選擇屬性；在目標框內，chrome.exe後面的引號後面，加入以下內容：

--enable-webgl--ignore-gpu-blacklist--allow-file-access-from-files

點選確定後關閉Chrome，然後用此捷徑啟動Chrome瀏覽器。
幾個參數的意思如下：
--enable-webgl的意思是開啟WebGL支援；
--ignore-gpu-blacklist的意思是忽略GPU黑名單，也就是說有一些顯示卡GPU因為太陳舊等原因，不建議執行WebGL，這個參數可以讓瀏覽器忽略這個黑名單，強制執行WebGL；
--allow-file-access-from-files的意思是允許從本地載入資源，如果你不是WebGL的開發者，不需要開發調試WebGL，只是想看WebGL的Demo，那你可以不加入這個參數。

Firefox瀏覽器
Firefox的使用者請在瀏覽器的網址列輸入“about:config”，回車，然後在過濾器（filter）中搜尋“webgl”，將webgl .force-enabled設定為true；將webgl.disabled設為false；在過濾器（filter）中搜尋“security.fileuri.strict_origin_policy”，將security.fileuri.strict_origin_policy設定為false；然後關閉目前開啟的所有Firefox視窗，重新啟動Firefox。
前兩個設定是強制開啟WebGL支持，最後一個security.fileuri.strict_origin_policy的設定是允許從本地載入資源，如果你不是WebGL的開發者，不需要開發調試WebGL，只是想要看一下WebGL的Demo，那你可以不設定此項。

Safari瀏覽器
在選單中找到“屬性”→“進階”，選取“顯示開發選單”，然後到“開發”選單，選取“開啟WebGL”。

開發步驟

下面的程式碼只是簡單總結一下相關的概念，它來自參考中的中文教程，涉及較多的3D方面的知識。有興趣的同學直接可以跳到實用參考中的中文教程中學習，比我這裡講解的要詳細和準確的多。湊熱鬧的同學簡單看看就可以了，不用深究每一行程式碼的意思。

準備工作
這個不用說了，就是在頁面上添加一個canvas元素作為渲染的容器。例如：

複製程式碼

程式碼如下:

Yourbrowserdoesn'tappeartosupporttheHTML5canvaselement.