WebGL をタッチ操作

以前作った WebGL のデモページを iOS に対応させました。

webglgame.jpがiOSに対応しました！ https://t.co/xrjeYeHv0Z

— 奥山犛牛 (@bogyu) 2015, 5月 16

タッチ操作を可能にするには touchstart や touchmove、touchend といったイベントをリッスンしなければなりません。さらに、イベントハンドラに渡されるイベントのオブジェクトが配列になっている点がマウスイベントとは異なります。ですから、

onMouseDown( e ){
   if(window.TouchEvent){
      e = e.touches[0];
   }
}

のようにしなければなりません。

マウスイベントの場合は、例えば e.pageX にマウスボタンを押下した瞬間のページ内でのX座標が入っていますが、タッチイベントではタッチした瞬間のそれが e.touches[0].pageX になるというわけです。

ちなみに、touchend の場合は touches[] ではなく、changedTouches[] です。

—

4年前に WebGL の普及に関して悲観的な予測を書きましたが、豈図らんや、現在では IE11までが対応済みです。これで Firefox、Google Chrome、IE と主要なブラウザの全てで WebGL が使えるようになりました。

良い意味で予想が裏切られました。