WebGL第8課-鼠標(biāo)輸入

5/9WebGL第8課鼠標(biāo)輸入本節(jié)課要介紹的內(nèi)容是：鼠標(biāo)控制；紋理過濾模式。程序截圖如下：上一節(jié)課我們已經(jīng)介紹了如何在WebGL應(yīng)用程序處理鍵盤輸入，這節(jié)課介紹鼠標(biāo)輸入處理，它是WebGL應(yīng)用程序獲取用戶的另一個重要方法。雖然存在幾個不同的鼠標(biāo)事件，但是有3個事件在WebGL應(yīng)用程序中特別有用：mousemovemousedownmouseup當(dāng)把鼠標(biāo)移動到某個對象之上時就會引發(fā)mousemove事件，在某個元素之上按下鼠標(biāo)按鍵時就會引發(fā)mousedown事件，在某個對象之上釋放鼠標(biāo)按鍵時就會引發(fā)mouseup事件。這3個事件都包含幾個非常有用的屬性。這三個事件都有clientX和clientY屬性，這兩個屬性包含了鼠標(biāo)指針相對與瀏覽器視口左上角的位置信息。mousedown和mouseup也包含一個button屬性，它決定鼠標(biāo)上的哪個按鍵被按下或釋放。如果button值為0，則表示此事件與鼠標(biāo)的左按鍵有關(guān)；如果button值為1，則此事件與鼠標(biāo)的中間按鍵有關(guān)；如果button值為2，則事件與鼠標(biāo)的右按鍵有關(guān)。要使用鼠標(biāo)事件，首先需要在startup()方法中為這些事件注冊—個事件處理程序，如下面幾行代碼所示：canvas.addEventListener('mousemove',handleMouseMove,false);canvas.addEventListener('mousedown',handleMouseDown,false);canvas.addEventListener('mouseup',handleMouseUp,false);下面這段代碼包含3個函數(shù)，它們是這3個事件的處理程序。varcameraZ=-2.5;varmouseDown=false;varlastMouseX=null;varlastMouseY=null;varcubeRotationMatrix=mat4.create();mat4.identity(cubeRotationMatrix);functionhandleMouseMove(event){if(!mouseDown){return;}varnewX=event.clientX;varnewY=event.clientY;vardeltaX=newX-lastMouseX;varnewRotationMatrix=mat4.create();mat4.identity(newRotationMatrix);mat4.rotate(newRotationMatrix,deltaX/400,[0,1,0]);vardeltaY=newY-lastMouseY;mat4.rotate(newRotationMatrix,deltaY/400,[1,0,0]);mat4.multiply(newRotationMatrix,cubeRotationMatrix,cubeRotationMatrix);lastMouseX=newXlastMouseY=newY;}functionhandleMouseDown(event){mouseDown=true;lastMouseX=event.clientX;lastMouseY=event.clientY;}functionhandleMouseUp(event){mouseDown=false;}上面的代碼中，我們從event屬性中獲取鼠標(biāo)的當(dāng)前位置，并進(jìn)一步計(jì)算了出當(dāng)前幀鼠標(biāo)在X、Y方向上的移動距離，然后根據(jù)這個距離確定屏幕上立方體的旋轉(zhuǎn)角度。最后的效果就是可以按住鼠標(biāo)鍵不放左右拖動就可以旋轉(zhuǎn)立方體。處理紋理過濾在這個示例中，我還使用了jquery.ui創(chuàng)建了一個ui界面，通過按鈕可以改變紋理的過濾模式。//jquery代碼，改變紋理過濾模式$(function(){$("#slider-z").slider({value:2.5,min:1,max:12,step:0.1,slide:function(){updateCameraPosition()},change:function(){updateCameraPosition()}});$('#opt-mag-filter').buttonset();$('#opt-min-filter').buttonset();$('#mag-nearest').click(function(){gl.bindTexture(gl.TEXTURE_2D,myTexture);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.NEAREST);gl.bindTexture(gl.TEXTURE_2D,null);});$('#mag-linear').click(function(){gl.bindTexture(gl.TEXTURE_2D,myTexture);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINEAR);gl.bindTexture(gl.TEXTURE_2D,null);});$('#mag-linear').click(function(){gl.bindTexture(gl.TEXTURE_2D,myTexture);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINEAR);gl.bindTexture(gl.TEXTURE_2D,null);});$('#min-nearest').click(function(){gl.bindTexture(gl.TEXTURE_2D,myTexture);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.NEAREST);gl.bindTexture(gl.TEXTURE_2D,null);});$('#min-linear').click(function(){gl.bindTexture(gl.TEXTURE_2D,myTexture);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);gl.bindTexture(gl.TEXTURE_2D,null);});$('#min-nearest-mipmap-nearest').click(function(){gl.bindTexture(gl.TEXTURE_2D,myTexture);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.NEAREST_MIPMAP_NEAREST);gl.bindTexture(gl.TEXTURE_2D,null);});$('#min-linear-mipmap-nearest').click(function(){gl.bindTexture(gl.TEXTURE_2D,myTexture);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR_MIPMAP_NEAREST);gl.bindTexture(gl.TEXTURE_2D,null);});$('#min-nearest-mipmap-linear').click(function(){gl.bindTexture(gl.TEXTURE_2D,myTexture);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.NEAREST_MIPMAP_LINEAR);gl.bindTexture(gl.TEXTURE_2D,null);});$('#min-linear-mipmap-linear').click(function(){gl.bindTexture(gl.TEXTURE_2D,myTexture);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR_MIPMAP_LINEAR);gl.bindTexture(gl.TEXTURE_2D,null);});});functionupdateCameraPosition(){varz=$('#slider-z').slider("value");cameraZ=-z;$('#slider-z-value').html(z);}那什么是紋理過濾模式？假設(shè)有一張大小為256×256的紋理，再假設(shè)將此紋理應(yīng)用于一個正方形。這個正方形投影到屏幕上，它的大小與紋理的大小一樣。則在這個情形下，應(yīng)用紋理后的正方形看起來與原圖非常相似。在一般的3D場景中，對象離相機(jī)距離有時很近，有時很遠(yuǎn)。根據(jù)透視投影，這意味著當(dāng)對象離照相機(jī)較近時，其在屏幕上的投影比較大；當(dāng)對象離照相機(jī)較遠(yuǎn)時，其在屏幕上的投影較小。如果投影對象在屏幕上占據(jù)的區(qū)域大于紋理原始圖像的大小，則需要拉伸紋理，這就是所謂的紋理伸展（magnification）。與此相反，如果投影對象在屏幕上占據(jù)的區(qū)域小于紋理原始圖像的大小，則需要減小紋理的大小，這就是所謂的紋理收縮（minification）。我們用紋理過濾表示紋理伸展或收縮時計(jì)算片段顏色的一般過程。調(diào)用gl.texParameteri()方法可以控制紋理的過濾方式，原型如下：gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINEAR);為了定義紋理的伸展過濾器，需要把這個方法的第二個參數(shù)設(shè)置為gl.TEXTURE_MAG_FILTER；為了定義紋理的收縮過濾器，需要把它的第二個參數(shù)設(shè)置為gl.TEXTURE_MIN_FILTER。紋理伸展紋理伸展時一個紋素對于屏幕上的幾個像素。下圖說明了使用伸展過濾模式時像素與紋素之間的關(guān)系，其中桔色、白色方塊表示紋素，藍(lán)色圓點(diǎn)表示像素。紋理稍微進(jìn)行了一點(diǎn)伸展，你會發(fā)現(xiàn)左下角、右上角和右下角的三個像素落在了不同的顏色區(qū)域，那么，這幾個像素的顏色究竟應(yīng)該是桔色還是白色呢？紋理的過濾過程實(shí)質(zhì)上就是確定像素（實(shí)際上就是片段）顏色的過程。伸展紋理時，可以選擇兩種過濾模式。最基本的過濾模式是最近相鄰模式，用gl.NEAREST名稱指定。用以下代碼把伸展過濾設(shè)置為最近相鄰模式：gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.NEAREST);最近相鄰過濾模式表示把最接近紋素的顏色值賦給每個紋理坐標(biāo)。這種過濾模式速度快，因?yàn)槊總€紋理坐標(biāo)只需要使用一個紋素作為輸入。如果紋理伸展很多，這種過濾模式會產(chǎn)生塊狀效果，這有時也稱為像素化效果。這是因?yàn)樵S多像素落在同一個紋素中，因此許多像素顯示同一種顏色。伸展過濾的另一個過濾模式稱為線性過濾或雙線性過濾，用gl.LINEAR名稱定義。根據(jù)線性過濾模式，每個紋理坐標(biāo)的顏色不是來自單個紋素，而是它周圍的4個紋素的加權(quán)平均值。為了把伸展過濾設(shè)置為線性過濾模式，需要調(diào)用gl.texParameteri()方法，如下所示：gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINEAR);線性過濾不會像最近相鄰過濾模式那樣產(chǎn)生塊狀效果，但線性過濾的特點(diǎn)是，當(dāng)紋理拉伸時，會產(chǎn)生模糊效果。紋理收縮紋理收縮時幾個紋素對應(yīng)于屏幕上的一個像素。這意味著，幾個紋素影響屏幕上一個像素的顏色，但是實(shí)際上，很難確定影響每個像素的全部紋素。對于紋理收縮，與紋理伸展一樣，也可以選擇同樣的兩個過濾模式：最近相鄰過濾和線性過濾。用下面的調(diào)用語句設(shè)置紋理收縮的最近相鄰過濾模式：gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.NEAREST);最近相鄰過濾模式的顏色計(jì)算過程與紋理伸展的最近相鄰過濾模式相同。紋理坐標(biāo)的顏色由最接近紋素的顏色決定。當(dāng)每個像素對應(yīng)的區(qū)域覆蓋很多紋素時，這種過濾模式會產(chǎn)生鋸齒現(xiàn)象。紋理收縮可以使用的另一個基本過濾模式是線性過濾。下面的代碼為收縮紋理設(shè)置線性過濾模式：gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);紋理收縮線性過濾與紋理伸展線性過濾的處理過程完全相同。將離紋理坐標(biāo)最近的4個紋素的加權(quán)平均值作為此紋理坐標(biāo)的顏色。線性過濾得到的效果略好于最近相鄰過濾，但是當(dāng)一個像素對應(yīng)不止4個紋素時，這種過濾模式也會產(chǎn)生鋸齒問題。Mip映射紋理當(dāng)一個像素對應(yīng)很多紋素時，不管是最近相鄰過濾還是線性過濾都會產(chǎn)生鋸齒問題。這個問題的一個解決方法是使用一個較小尺寸的紋理，這樣每個像素不會對應(yīng)很多紋素。但是對于場景中靠近觀察者的對象，為了避免出現(xiàn)紋理伸展現(xiàn)象，你可能希望紋理具有較高的分辨率，紋理伸展會使紋理對象看起來有塊狀效果或模糊效果。Mip映射是這個問題的解決方法。除了基礎(chǔ)紋理（即零級紋理）外，Mip映射使用一系列的較小紋理。每個新紋理都是系列中前一個紋理的一半大小。這一系列紋理形成一個紋理鏈，即為Mip映射紋理鏈。與只應(yīng)用基礎(chǔ)紋理的情形相比，一個完整的Mip映射鏈大約要多占用1/3的內(nèi)存空間。紋理不必是正方形，但是紋理鏈上的紋理必須一直繼續(xù)到最后一個紋理的大小為1×1為止。作為一個示例，Mip映射紋理鏈可以包含大小為256×256、128×128、64×64、32×32、16×16，8×8、4×4、2×2、1×1的紋理。下圖顯示了Mip映射鏈的圖像。在WebGL中應(yīng)用Mip映射紋理的最簡單方法是讓W(xué)ebGL自動生成Mip映射紋理鏈。我們只需要載入基礎(chǔ)紋理作為零級紋理，然后調(diào)用gl.generateMipmap()方法，WebGL會自動生成整個Mip映射紋理鏈。以下是生成一個2D紋理的典型代碼：gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBAr,gl.RGBA,gl.UNSIGNED_BYTE,image);gl.generateMipmap(gl.TEXTURE_2D);另一個方法是用一個圖像編輯工具或?qū)ｉT為生成Mip映射紋理而設(shè)計(jì)的紋理工具，離線生成Mip映射鏈上的全部紋理圖像。然后，在生成Mip映射鏈上的全部圖像后，用gl.texImage2D()方法載入每幅圖像，這個方法的第二個參數(shù)定義了圖像的Mip映射級。以下代碼載入Mip映射0級至Mip映射4級：gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,imageLevel_0);gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,imageLevel_1);gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,imageLevel_2);gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,imageLevel_3);gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,imageLevel_4);可以看出，第二個方法需要較多的操作。但是，如果對Mip映射鏈上的低分辨率圖像有特別的要求，則會知道這種方法是很有用的。如何選擇紋理過濾模式當(dāng)我們?yōu)樽约旱募y理創(chuàng)建一個完整的Mip映射紋理鏈后，除了gl.NEAREST和gl.LINEAR這兩個普通的過濾模式外，我們還可以為紋理收縮選擇4種新過濾模式。下面列出所有可以使用的過濾模式并對它們逐一作詳細(xì)的介紹：gl.NEAREST——將最近相鄰過濾模式應(yīng)用于基礎(chǔ)紋理，這是指使用最接近紋素的顏色作為紋理坐標(biāo)的顏色。gl.LINEAR——將線性過濾（也稱為雙線性過濾）應(yīng)用于幾次基拙紋理，這是指紋理坐標(biāo)的顏色是由相鄰4個紋素的顏色的加權(quán)平均值得到的。gl.NEAREST_MIPMAP_NEAREST——選擇最近的Mip映射級，并且在這個Mip映射級中使用最近相鄰過濾。gl.NEAREST_MIPMAP_LINEAR——選擇兩個最近的Mip映射級，然后在