Tokyo WebGL Meetup メモ

Tokyo WebGL Meetupに行ってきたので、メモした内容を公開します。

WebGL のことはじめ @edo_m18

スライド: WebGLことはじめ

  • WebGLを触ったことある人は会場の半分くらい。
  • カヤックのサイコロ給をデジタルサイネージとして会社入り口に置くためにWebGLでコンテンツを作成

ゴール

WebGLに興味はあるけど3Dと聞いてハードルが高そうと思っている人がWebGLにやってみようかなと思う

概要

  • WebGLはJavaScriptとネイティブのOpenGL ES2.0のバインディング
    • ハードウェアでアクセラレートされた(GPUを使った)高速なレンダリング能力を得られる
    • 3Dに限らない
  • iOS8がWebGLが動くので、2DのゲームもWebGLになるのではという予測を立てている

何をしているか

  • WebGLにはパイプラインという仕組みがある、データに一連の処理を施し出力する
  • 変換パイプライン
  • モデル座標変換: 世界のどこに置くか
  • ビュー座標変換: どこから撮影しているか
  • プロジェクション座標変換: どんなレンズで撮影しているか
  • 行列: 複雑な座標計算をまとめられる
  • グラフィクスパイプライン
    • 重要なのはラスタライザの部分
    • 頂点シェーダとフラグメントシェーダがいじれる部分
  • GLSL
    • JavaScriptはWebGLのAPIを叩く
    • あとはOS側で処理
  • シェーダはGPUを操作する、1pxごとに計算するのがフラグメントシェーダ

サンプル

edom18/WebGL-Meetup-sample

  • WebGLは準備が大変。準備さえできればデータの追加はできる(頂点の位置情報変更など)
  • ライブラリを使えば手軽にWebGLで表現できる

WebGL on IE11 @yomotsu

  • WebGLにセキュリティ的な懸念があった
    • JavaScriptからデバイスにアクセスできてしまうため
  • IE10ではTypedArrayをサポート
  • DirectX上でWebGLを動かす
    • DirectX用ではなくWebGL用のコードで動く

サンプル

IEとWebGL

  • IEチームはWebGLを真剣に考えている
  • IE上のWebGLはバージョン0.92(1.0ではない)
    • コンソール上から確認できる
    • Microsoft Connect上でMicrosoftの中の人も問題を認識している旨の返信をしている
    • もうすぐアップデートされてバージョン0.93になる
  • (Macユーザー向け)VM上のIEはグラフィックに差があるので、実際のWindowsを使うのがいい

WebGL in iOS (with Ejecta) @allyogilvie

  • Ejecta
    • Ejecta - Impact
    • iOS 5.0+以上サポート
    • DOMにアクセス出来ないので修正する必要がある

GLSL ray marching @h_doxas

スライド: GLSL ray marching - フラグメントシェーダでレイマーチング -

  • WebGL 開発支援サイト wgld.org
  • GLSLはOpenGL Shading Languageのこと
    • C言語と似た記法
  • ray marching
    • レイトレーシングの技法のうちの一つ
    • レイの長さを段階的にのばしながらオブジェクトとの衝突判定をおこないレンダリングする手法

レイトレーシング

  • オブジェクトがどのように見えるのか計算する
  • レイマーチングでは最短距離を指標としてオブジェクトを認識する

distance function

  • レイの先端とオブジェクト間での最短距離を返す関数
  • この関数を工夫することによりさまざまな形状を描くことができる
  • シンプルに書ける

レイマーチングのメリット

  • distance functionは比較的少ないコードで書ける
  • ポリゴンという概念がないため曲線を含むオブジェクトも比較的簡単に描ける
  • 影や反射といった複雑な描画も可能

レイマーチングのデメリット

  • モデリングツールとの連携が難しい
  • 難易度が高い
  • 負荷が高くなる可能性が高い

distance functionと法線

  • 求め方として、ほんの少しだけレイをずらし、その差分を見る

レイマーチングの参考


感想としては、html5j パフォーマンス部 第二回勉強会 と同じく、分からないところが多々あったという感じです。実際に自分で触ってみて、ここはこうなっているのかということが分かるようになるかなと感じました。