Blog

基本上還是延續上一篇的立體方塊的範例繼續寫下去了∼在上一篇的例子是完成了一個會自動旋轉的立體方塊，而在這一篇則是讓使用者可以透過滑鼠和鍵盤，做簡單的操作。

在 WebGL 裡的事件觸發與控制，主要是透過 JavaScript 來做的，所以其實所要加入的程式，主要都是 JavaScript 的部分；而這個範例裡使用的方法，是當使用者觸發了特訂的事件後，再透過去修改一些內部的變數，進而影響到最後畫出來的結果。

首先先來看 diaplay() 部分的變化：

function display()
{
  // Clear the canvas
  gWGL.clear( gWGL.COLOR_BUFFER_BIT | gWGL.DEPTH_BUFFER_BIT );
  
  // Compute a model/view matrix.
  gWGL.mvpMatrix.makeIdentity();
  gWGL.mvpMatrix.rotate( gAngleY, 0, 1, 0 );
  gWGL.mvpMatrix.rotate( gAngleX, 1, 0, 0 );
  gWGL.mvpMatrix.translate( 0, 0, gZpos );
  
  // Coompute the model-view * projection matrix
  gWGL.mvpMatrix.multRight( gWGL.ProjectionMatrix );
  // pass the matrix into shader
  gWGL.uniformMatrix4fv( gWGL.u_mvpMatrixLoc, false, gWGL.mvpMatrix.getAsWebGLFloatArray() );
  
  // Draw the cube
  gWGL.drawElements( gWGL.TRIANGLES, gWGL.RenderObject.numIndices, gWGL.UNSIGNED_BYTE, 0 );
  
  // Finish up.
  gWGL.flush();
}

這邊和之前的程式主要的差異有兩部分，其中一部分就是上方黃色的區域，這部分的程式是變成透過 gAngleY、gAngleX、gZPos 三個變數來計算 model view matrix；另一部分則是將本來 diaplay() 最後面，用來計算 currentAngle、以做到自動旋轉的程式拿掉了。而也由於這兩部分的修改，所以本來的全域變數 currentAngle 和 incAngle 都用不到了∼相對的，則是要宣告 gAngleY、gAngleX、gZPos 這三個新的變數。

而在 display() 這樣修改後，之後要用來作互動的 JavaScript 程式只要去修改 gAngleY、gAngleX、gZPos 這三個變數的值，就可以做到簡單的互動了！

在這個範例，由於只是要做最簡單的互動測試，所以只會針對兩種 event 做處理，其中一個是 Canvas、也就是 WebGL 繪製區域的 mouse move 事件（onmousemove），另一個則是整個網頁的鍵盤輸入事件（onkeydown）；如果有需要的話，其實也是可以再額外定義不同事件的處理函式，不過在這邊就先不提了。

而這部分的程式，主要是要在主程式 RunWebGL() 裡，加上對於事件處理的設定。

function RunWebGL()
{
  // try to get WebGL Context
  try
  {
    gCanvas = document.getElementById( "canvas_object" );
    gWGL = gCanvas.getContext( "experimental-webgl" );
  }
  catch( e )
  {
    alert( "WebGL 初始化失敗" );
    return;
  }
  
  // set event handle
  gCanvas.onmousemove = mouseMove;
  document.onkeydown = keyboardEvent;
  // setup viewport
  gWGL.viewport( 0, 0, gCanvas.width, gCanvas.height );
  ...

這部分的程式就是上方黃色的區塊，第一行是設定當滑鼠游標在 gCanvas 上移動時，就去執行 mouseMove() 這個函式；而第二行則是設定當按下鍵盤時，就去執行 keyboardEvent() 這個函式。

而 mouseMove() 所做的事實際上是根據滑鼠游標的位置，來修改 gAngleY、gAngleX 的值，進而做到立體方塊的旋轉；他的程式碼如下：

function mouseMove( ev )
{
  var w = gCanvas.width / 2, h = gCanvas.height / 2;
  gAngleY = 90 * ( ev.clientX - gCanvas.offsetLeft - w ) / w;
  gAngleX = 90 * ( ev.clientY - gCanvas.offsetTop - h ) / h;
}

這邊的程式主要是會計算出滑鼠位置（ev.clientX / ev.clientY）和 canvas 的中心點的差，然後再把他調整成 -1 ~ 1 的值，之後再乘上 90 度；所以最後所得到的 gAngleX 和 gAngleY 的值會根據滑鼠的位置，而在 -90 ~ 90 之間。

不過有一點要注意的是，由於這是比較簡單的範例，所以 canvas 本身的位置可以直接用 ( gCanvas.offsetLeft, gCanvas.offsetTop ) 來計算；但是如果網頁設計的複雜些的話，有可能會要需要做其他較複雜的處理，才能真正算出他的位置。

而 keyboardEvent() 則是用來接收鍵盤按下的事件，在這個範例裡，只有針對 Page Up 和 Page Down 兩個鈕做處理，用來做物體的拉遠、拉近控制；他的程式碼如下：

function keyboardEvent( ev )
{
  switch( ev.keyCode )
  {
  case 33: //page up
    gZPos  = 0.1;
    break;
    
  case 34: //page down
    gZPos -= 0.1;
    break;
  }
}

這部分的程式，基本上就是在按下 Page Up 時，把 gZPos 的值變大，在按下 Page Down 時，把 gZPos 的值變小了∼

而最後的網頁，則可以在這裡下載。