WebGL開啟了網(wǎng)頁3D渲染的新時代,它允許在canvas中直接渲染3D的內(nèi)容,而不借助任何插件。WebGL同canvas 2D的API一樣,都是通過腳本操縱對象,所以步驟也是基本相似:準(zhǔn)備工作上下文,準(zhǔn)備數(shù)據(jù),在canvas中繪制對象并渲染。與2D不同的就是3D涉及的知識更多了,例如世界、光線、紋理、相機(jī)、矩陣等專業(yè)知識。WebGL有一個很好的中文教程,就是下面使用參考中的第一個鏈接,所以這里不再班門弄斧,后面的內(nèi)容只是簡單的總結(jié)一下學(xué)習(xí)的內(nèi)容。
瀏覽器的支持
由于微軟有自己的圖形發(fā)展計(jì)劃,一直不支持WebGL,所以IE目前除了安裝插件外,是無法運(yùn)行WebGL的。其他的主流瀏覽器如Chrome、FireFox、Safari、Opera等,都裝上最新的版本就可以了。除了瀏覽器要裝最新的外,還要保證顯卡的驅(qū)動也是最新的。
裝上這些以后,可以打開瀏覽器,輸入下面的網(wǎng)址驗(yàn)證一下瀏覽器對WebGL的支持情況:http://webglreport.sourceforge.net/。
在正常安裝以上瀏覽器之后還是不能運(yùn)行WebGL,那你可以強(qiáng)制開啟WebGL支持試一試。開啟方法如下:
Chrome瀏覽器
我們需要為Chrome加入一些啟動參數(shù),以下具體操作步驟以Windows操作系統(tǒng)為例:找到Chrome瀏覽器的快捷方式,右鍵點(diǎn)擊快捷方式,選擇屬性;在目標(biāo)框內(nèi),chrome.exe后面的引號后面,加入以下內(nèi)容:
--enable-webgl--ignore-gpu-blacklist--allow-file-access-from-files
點(diǎn)擊確定后關(guān)閉Chrome,然后用此快捷方式啟動Chrome瀏覽器。
幾個參數(shù)的含義如下:
--enable-webgl的意思是開啟WebGL支持;
--ignore-gpu-blacklist的意思是忽略GPU黑名單,也就是說有一些顯卡GPU因?yàn)檫^于陳舊等原因,不建議運(yùn)行WebGL,這個參數(shù)可以讓瀏覽器忽略這個黑名單,強(qiáng)制運(yùn)行WebGL;
--allow-file-access-from-files的意思是允許從本地載入資源,如果你不是WebGL的開發(fā)者,不需要開發(fā)調(diào)試WebGL,只是想要看一下WebGL的Demo,那你可以不添加這個參數(shù)。
Firefox瀏覽器
Firefox的用戶請?jiān)跒g覽器的地址欄輸入“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è)置是強(qiáng)制開啟WebGL支持,最后一個security.fileuri.strict_origin_policy的設(shè)置是允許從本地載入資源,如果你不是WebGL的開發(fā)者,不需要開發(fā)調(diào)試WebGL,只是想要看一下WebGL的Demo,那你可以不設(shè)置此項(xiàng)。
Safari瀏覽器
在菜單中找到“屬性”→“高級”,選中“顯示開發(fā)菜單”,然后到“開發(fā)”菜單,選中“開啟WebGL”。
開發(fā)步驟
下面的代碼只是簡單總結(jié)一下相關(guān)的概念,它來源于參考中的中文教程,涉及較多的3D方面的知識。感興趣的同學(xué)直接可以跳到實(shí)用參考中的中文教程中學(xué)習(xí),比我這里講解的要詳細(xì)和準(zhǔn)確的多。湊熱鬧的同學(xué)簡單看看就可以了,不用深究每一行代碼的含義。
準(zhǔn)備工作
這個不用說了,就是在頁面上添加一個canvas元素作為渲染的容器。例如:
<bodyonload="start()">
<canvasid="glcanvas"width="640"height="480">
Yourbrowserdoesn'tappeartosupporttheHTML5canvaselement.
</canvas>
</body>
下面就是正式開始寫腳本的時候了,首先看一下程序入口以及整體結(jié)構(gòu):
functionstart(){
varcanvas=document.getElementById("glcanvas");
initGL(canvas);
initShaders();
initBuffers();
gl.clearColor(0.0,0.0,0.0,1.0);
gl.enable(gl.DEPTH_TEST);
drawScene();
}
這里的幾個方法代表了典型的WebGL的繪制步驟:
步驟一:初始化WebGL工作環(huán)境 - initGL
這個方法的代碼如下:
vargl;
functioninitGL(canvas){
gl=null;
try{
//Trytograbthestandardcontext.Ifitfails,fallbacktoexperimental.
gl=canvas.getContext("webgl")||canvas.getContext("experimental-webgl");
}
catch(e){} //Ifwedon'thaveaGLcontext,giveupnow
if(!gl){
alert("UnabletoinitializeWebGL.Yourbrowsermaynotsupportit.");
}
}
這個方法很簡單,就是獲取WebGL的繪制環(huán)境,需要把參數(shù)"webgl"傳給canvas.getContext方法就行了,但是由于目前WebGL的標(biāo)準(zhǔn)沒有最終定型,所以實(shí)驗(yàn)階段用的參數(shù)都是"experimental-webgl"。當(dāng)然你直接去調(diào)用canvas.getContext("experimental-webgl")也是可以的,等標(biāo)準(zhǔn)定下以后,你再修改一個代碼。
步驟二:初始化著色器Shaders - initShaders
著色器Shader概念比較簡單,說白了就是顯卡運(yùn)算指令。構(gòu)造3D場景需要進(jìn)行大量的顏色、位置等等信息的計(jì)算,如果這些計(jì)算由軟件執(zhí)行的話,速度會很慢。所以把這些運(yùn)算讓顯卡去計(jì)算,速度就很快;如何去執(zhí)行這些計(jì)算,就是由著色器指定的。著色器代碼是用一種叫做GLSL的著色器語言編寫的,這個我們不去講述這個語言了。
著色器可以在html中定義,在代碼中使用。當(dāng)然了你在程序中用一個字符串去定義著色器也是一樣的。
下面先看定義的部分:
<scriptid="shader-fs"type="x-shader/x-fragment">
precisionmediumpfloat;
varyingvec4vColor;
voidmain(void){
gl_FragColor=vColor;
}
</script>
<scriptid="shader-vs"type="x-shader/x-vertex">
attributevec3aVertexPosition;
attributevec4aVertexColor;
uniformmat4uMVMatrix;
uniformmat4uPMatrix;
varyingvec4vColor;
voidmain(void){
gl_Position=uPMatrix*uMVMatrix*vec4(aVertexPosition,1.0);
vColor=aVertexColor;
}
</script>
這里有兩個著色器:面著色器和頂點(diǎn)著色器。
關(guān)于這兩個著色器,這里有必要說明一下,計(jì)算機(jī)中的3D模型基本都是由點(diǎn)結(jié)合三角面片去描述的,頂點(diǎn)著色器就是去處理這些點(diǎn)的數(shù)據(jù),而面著色器就是通過插值的方式,去處理三角面片上點(diǎn)的數(shù)據(jù)。
上面定義的頂點(diǎn)著色器就定義了頂點(diǎn)的位置和顏色計(jì)算方式;而面著色器定義了插值點(diǎn)的顏色計(jì)算方式。實(shí)際的應(yīng)用場景中,還會涉及到在著色器中處理光線等效果。
定義了著色器,在程序中就可以查找到它們并可以去使用:
varshaderProgram;
functioninitShaders(){
varfragmentShader=getShader(gl,"shader-fs");
varvertexShader=getShader(gl,"shader-vs");
shaderProgram=gl.createProgram();
gl.attachShader(shaderProgram,vertexShader);
gl.attachShader(shaderProgram,fragmentShader);
gl.linkProgram(shaderProgram);
if(!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS)){
alert("Couldnotinitialiseshaders");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute=gl.getAttribLocation(shaderProgram,"aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.vertexColorAttribute=gl.getAttribLocation(shaderProgram,"aVertexColor");
gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
shaderProgram.pMatrixUniform=gl.getUniformLocation(shaderProgram,"uPMatrix");
shaderProgram.mvMatrixUniform=gl.getUniformLocation(shaderProgram,"uMVMatrix");
}
著色器是有了,但是怎么讓顯卡去執(zhí)行,Program就是這種橋梁,它是WebGL原生的二進(jìn)制碼,它的作用基本上就是讓顯卡運(yùn)行著色器代碼去渲染指定的模型數(shù)據(jù)。
這里還用到一個輔助方法getShader,這個方法就是遍歷html文檔,查找著色器的定義,拿到定義后創(chuàng)建著色器,這里就不細(xì)說了:
functiongetShader(gl,id){
varshaderScript,theSource,currentChild,shader;
shaderScript=document.getElementById(id);
if(!shaderScript){
returnnull;
}
theSource="";
currentChild=shaderScript.firstChild;
while(currentChild){
if(currentChild.nodeType==currentChild.TEXT_NODE){
theSource+=currentChild.textContent;
}
currentChild=currentChild.nextSibling;
}
if(shaderScript.type=="x-shader/x-fragment"){
shader=gl.createShader(gl.FRAGMENT_SHADER);
}elseif(shaderScript.type=="x-shader/x-vertex"){
shader=gl.createShader(gl.VERTEX_SHADER);
}else{
//Unknownshadertype
returnnull;
}
gl.shaderSource(shader,theSource);
//Compiletheshaderprogram
gl.compileShader(shader);
//Seeifitcompiledsuccessfully
if(!gl.getShaderParameter(shader,gl.COMPILE_STATUS)){
alert("Anerroroccurredcompilingtheshaders:"+gl.getShaderInfoLog(shader));
returnnull;
}
returnshader;
}
步驟三:創(chuàng)建/加載模型數(shù)據(jù) - initBuffers
這些小例子中,模型數(shù)據(jù)基本都是直接生成的,實(shí)際的程序中,這些數(shù)據(jù)應(yīng)該都是從模型加載得到的:
vartriangleVertexPositionBuffer;
vartriangleVertexColorBuffer;
functioninitBuffers(){
triangleVertexPositionBuffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexPositionBuffer);
varvertices=[
0.0,1.0,0.0,
-1.0,-1.0,0.0,
1.0,-1.0,0.0
];
gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(vertices),gl.STATIC_DRAW);
triangleVertexPositionBuffer.itemSize=3;
triangleVertexPositionBuffer.numItems=3;
triangleVertexColorBuffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexColorBuffer);
varcolors=[
1.0,0.0,0.0,1.0,
0.0,1.0,0.0,1.0,
0.0,0.0,1.0,1.0
];
gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(colors),gl.STATIC_DRAW);
triangleVertexColorBuffer.itemSize=4;
triangleVertexColorBuffer.numItems=3;
}
上面這段代碼創(chuàng)建了三角形的頂點(diǎn)和頂點(diǎn)的顏色數(shù)據(jù)并放在緩沖區(qū)中。
步驟四:渲染 - drawScene
準(zhǔn)備好了數(shù)據(jù)以后,交給WebGL去渲染就好了,這里調(diào)用的是gl.drawArrays方法??创a:
functiondrawScene(){
gl.viewport(0,0,gl.viewportWidth,gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
pMatrix=okMat4Proj(45.0,gl.viewportWidth/gl.viewportHeight,0.1,100.0);
mvMatrix=okMat4Trans(-1.5,0.0,-7.0);
gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,triangleVertexPositionBuffer.itemSize,gl.FLOAT,false,0,0);
gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,triangleVertexColorBuffer.itemSize,gl.FLOAT,false,0,0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLES,0,triangleVertexPositionBuffer.numItems);
}
這個函數(shù)首先設(shè)置了3D世界的背景為黑色,然后設(shè)置投影矩陣,設(shè)置待繪制對象的位置,然后根據(jù)緩沖中的頂點(diǎn)和顏色數(shù)據(jù),繪制對象。這里還有一些生成投影矩陣和模型視圖矩形的輔助方法(使用了Oak3D圖形庫中的矩陣輔助方法)與主題關(guān)系不大,這里就不詳細(xì)解釋了。
基本上流程就是這么多了,更復(fù)雜的紋理,光線等都是在這些基礎(chǔ)上加入一些WegGL的特性實(shí)現(xiàn)的,這個請參看后面的中文教程,里面有詳細(xì)的例子。
怎么樣?使用原生的WebGL開發(fā)是一種什么感受?不僅需要有深厚的3D知識,還需要知道各種實(shí)現(xiàn)細(xì)節(jié)。WebGL這樣做是為了靈活的適應(yīng)各種應(yīng)用場景,但是對于大多數(shù)像我這樣非專業(yè)人士來說,很多細(xì)節(jié)是不需要知道的。這樣就催生了各種輔助開發(fā)的類庫,例如這節(jié)用到的Oak3D庫(為了演示W(wǎng)ebGL開發(fā),例子中只用到了矩陣輔助方法)。下一節(jié)會介紹一個用的比較多的Three.js圖形庫。
實(shí)用參考:
中文教程:http://www.hiwebgl.com/?p=42
開發(fā)中心:https://developer.mozilla.org/en/WebGL