推薦：檢測瀏覽器是否支持html5視頻的代碼
學(xué)習(xí)w3c是看到一個檢測您的瀏覽器是否支持 HTML5 視頻的方法，在這里與大家分享下，感興趣的各位可以參考下哈，希望可以幫助到你

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

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

在正常安裝以上瀏覽器之后還是不能運行WebGL，那你可以強制開啟WebGL支持試一試。開啟方法如下：
Chrome瀏覽器
我們需要為Chrome加入一些啟動參數(shù)，以下具體操作步驟以Windows操作系統(tǒng)為例：找到Chrome瀏覽器的快捷方式，右鍵點擊快捷方式，選擇屬性；在目標(biāo)框內(nèi)，chrome.exe后面的引號后面，加入以下內(nèi)容：

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

點擊確定后關(guān)閉Chrome，然后用此快捷方式啟動Chrome瀏覽器。
幾個參數(shù)的含義如下：
--enable-webgl的意思是開啟WebGL支持；
--ignore-gpu-blacklist的意思是忽略GPU黑名單，也就是說有一些顯卡GPU因為過于陳舊等原因，不建議運行WebGL，這個參數(shù)可以讓瀏覽器忽略這個黑名單，強制運行WebGL；
--allow-file-access-from-files的意思是允許從本地載入資源，如果你不是WebGL的開發(fā)者，不需要開發(fā)調(diào)試WebGL，只是想要看一下WebGL的Demo，那你可以不添加這個參數(shù)。

Firefox瀏覽器
Firefox的用戶請在瀏覽器的地址欄輸入“about:config”，回車，然后在過濾器（filter）中搜索“webgl”，將webgl.force-enabled設(shè)置為true；將webgl.disabled設(shè)置為false；在過濾器（filter）中搜索“security.fileuri.strict_origin_policy”，將security.fileuri.strict_origin_policy設(shè)置為false；然后關(guān)閉目前開啟的所有Firefox窗口，重新啟動Firefox。
前兩個設(shè)置是強制開啟WebGL支持，最后一個security.fileuri.strict_origin_policy的設(shè)置是允許從本地載入資源，如果你不是WebGL的開發(fā)者，不需要開發(fā)調(diào)試WebGL，只是想要看一下WebGL的Demo，那你可以不設(shè)置此項。

Safari瀏覽器
在菜單中找到“屬性”→“高級”，選中“顯示開發(fā)菜單”，然后到“開發(fā)”菜單，選中“開啟WebGL”。

開發(fā)步驟

下面的代碼只是簡單總結(jié)一下相關(guān)的概念，它來源于參考中的中文教程，涉及較多的3D方面的知識。感興趣的同學(xué)直接可以跳到實用參考中的中文教程中學(xué)習(xí)，比我這里講解的要詳細(xì)和準(zhǔn)確的多。湊熱鬧的同學(xué)簡單看看就可以了，不用深究每一行代碼的含義。

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

下面就是正式開始寫腳本的時候了，首先看一下程序入口以及整體結(jié)構(gòu)：


這里的幾個方法代表了典型的WebGL的繪制步驟：

步驟一：初始化WebGL工作環(huán)境 - initGL
這個方法的代碼如下：


這個方法很簡單，就是獲取WebGL的繪制環(huán)境，需要把參數(shù)"webgl"傳給canvas.getContext方法就行了，但是由于目前WebGL的標(biāo)準(zhǔn)沒有最終定型，所以實驗階段用的參數(shù)都是"experimental-webgl"。當(dāng)然你直接去調(diào)用canvas.getContext("experimental-webgl")也是可以的，等標(biāo)準(zhǔn)定下以后，你再修改一個代碼。

步驟二：初始化著色器Shaders - initShaders
著色器Shader概念比較簡單，說白了就是顯卡運算指令。構(gòu)造3D場景需要進行大量的顏色、位置等等信息的計算，如果這些計算由軟件執(zhí)行的話，速度會很慢。所以把這些運算讓顯卡去計算，速度就很快；如何去執(zhí)行這些計算，就是由著色器指定的。著色器代碼是用一種叫做GLSL的著色器語言編寫的，這個我們不去講述這個語言了。
著色器可以在html中定義，在代碼中使用。當(dāng)然了你在程序中用一個字符串去定義著色器也是一樣的。
下面先看定義的部分：

這里有兩個著色器：面著色器和頂點著色器。
關(guān)于這兩個著色器，這里有必要說明一下，計算機中的3D模型基本都是由點結(jié)合三角面片去描述的，頂點著色器就是去處理這些點的數(shù)據(jù)，而面著色器就是通過插值的方式，去處理三角面片上點的數(shù)據(jù)。
上面定義的頂點著色器就定義了頂點的位置和顏色計算方式；而面著色器定義了插值點的顏色計算方式。實際的應(yīng)用場景中，還會涉及到在著色器中處理光線等效果。
定義了著色器，在程序中就可以查找到它們并可以去使用：


著色器是有了，但是怎么讓顯卡去執(zhí)行，Program就是這種橋梁，它是WebGL原生的二進制碼，它的作用基本上就是讓顯卡運行著色器代碼去渲染指定的模型數(shù)據(jù)。
這里還用到一個輔助方法getShader，這個方法就是遍歷html文檔，查找著色器的定義，拿到定義后創(chuàng)建著色器，這里就不細(xì)說了：


步驟三：創(chuàng)建/加載模型數(shù)據(jù) - initBuffers
這些小例子中，模型數(shù)據(jù)基本都是直接生成的，實際的程序中，這些數(shù)據(jù)應(yīng)該都是從模型加載得到的：


上面這段代碼創(chuàng)建了三角形的頂點和頂點的顏色數(shù)據(jù)并放在緩沖區(qū)中。

步驟四：渲染 - drawScene
準(zhǔn)備好了數(shù)據(jù)以后，交給WebGL去渲染就好了，這里調(diào)用的是gl.drawArrays方法。看代碼：


這個函數(shù)首先設(shè)置了3D世界的背景為黑色，然后設(shè)置投影矩陣，設(shè)置待繪制對象的位置，然后根據(jù)緩沖中的頂點和顏色數(shù)據(jù)，繪制對象。這里還有一些生成投影矩陣和模型視圖矩形的輔助方法(使用了Oak3D圖形庫中的矩陣輔助方法)與主題關(guān)系不大，這里就不詳細(xì)解釋了。
基本上流程就是這么多了，更復(fù)雜的紋理，光線等都是在這些基礎(chǔ)上加入一些WegGL的特性實現(xiàn)的，這個請參看后面的中文教程，里面有詳細(xì)的例子。

怎么樣？使用原生的WebGL開發(fā)是一種什么感受？不僅需要有深厚的3D知識，還需要知道各種實現(xiàn)細(xì)節(jié)。WebGL這樣做是為了靈活的適應(yīng)各種應(yīng)用場景，但是對于大多數(shù)像我這樣非專業(yè)人士來說，很多細(xì)節(jié)是不需要知道的。這樣就催生了各種輔助開發(fā)的類庫，例如這節(jié)用到的Oak3D庫(為了演示W(wǎng)ebGL開發(fā)，例子中只用到了矩陣輔助方法)。下一節(jié)會介紹一個用的比較多的Three.js圖形庫。

實用參考：
中文教程：http://www.hiwebgl.com/?p=42

開發(fā)中心：https://developer.mozilla.org/en/WebGL

分享：Javascript 高級手勢使用介紹
在IE10中新加入的對高級用戶輸入的識別支持，舉例說明：注冊一個點擊操作，通過一句addEventListener 就能夠知道當(dāng)前用戶的點擊是哪種設(shè)備，是手指的點擊，是鼠標(biāo)的單擊還是觸控筆的點擊（平板設(shè)備都會帶有觸控筆）