pirosikick's diary

君のハートにunshift

Tokyo WebGL meetup行った #webgl_tokyo

http://tokyowebglmeetup.github.io/

行ってきた。 半年間仕事でThree.js使ってたし、WebGL自体もすごく注目してたので楽しみに品川へ。

個人の意見だけどWebGLってとっつきにくいし(Three.js使えば楽だけど)、他のHTML5技術に比べるとサービスに活かしにくいので、なんとなく気になってるけど実際ガッツリ使ったことがない人が多いのかなと予想してたけど、最初のほうで「仕事orプライベートで3Dプログラミングやってる人いますか?」ってスピーカーの人が質問したら、結構な人が挙手しててビビった。

GLSLってシンプルでアウトプットもgl_Positiongl_FragColorだけだと思うんだけど、そのシンプルさで複雑な3Dができるのはやっぱりすごい。でも、人が書いたGLSLを見ても何をやってるのか理解するのって結構難しくて、みんなどうやって勉強してるのかなってちょっと思った。あと、水面が揺れているかのようなフィルターとか、そういうのをGLSLで表現するって本当にクリエイティブな作業だなと思う。

あと、スポンサーがMicrosoftだったからIEのゲームとかIE11の話があったけど、普段Mac使ってるしあんまり調べないから、すごく興味深かった。でもなんでMicrosoftWebGLに力を入れてるのは未だによくわからない。

iOS8からMobile SafariにもWebGLがのるし、今後が楽しみ。WebGLのデモって初音ミクとか車とかの3Dモデルをゲーム的に動かすか、すごい派手なグラフィックかの2種類くらいしか見ないから、それ以外でもなんか面白いのがもっとでるといいなー。例えば、プロジェクションマッピングとか。プロジェクションマッピングとか!!

以下、メモです。

WebGLことはじめ@edo_m18

  • 比留間さん、カヤック、@edo_m18
    • 2月からiOSやってるで、Lobiってやつ作ってるで
    • マイQiitaってのも作ってるで
    • 作ったもの
  • 今日のゴール
    • WebGLやってみようかなって思うことやで
  • アジェンダ
    • 何ができる?なにしてるの?
  • 何ができる?
  • iOS8からWebGL使えるで
  • 何をしてるの?
    • パイプライン処理
      • ラスタライズ
        • 2次元のピクセルに変換や
      • Vertex Shader, Fragment Shader
  • GLSL
    • GPUを直接操作する言語や
    • 意外と簡単やで
    • が、結構長い
  • だいたいみんなライブラリ使う
    • Three.js

WebGL on IE@yomotsu

  • おやまださん@PixelGrid
    • よもつさん
    • MMDのやつとか作っとるで
  • //build/ 2013
    • MSのカンファレンス
    • IEWebGLに乗る!IE11から
  • IE10ではWebGLがのらなかった
    • セキュリティ的要因、直接ハードウェア触るからやで
    • Typed Arrayだけサポートしててわろた
    • Vineに公式動画を上げたりしとったんや
  • DirectX上で動かすで。GLSLでな!
  • Surface上のIE11でデモや!
    • FPS結構出てるで
  • MSが結構デモ出してる
    • www.rethinkie.com
    • http://photosynth.net/
    • MSもthree.jsを推奨してる
    • バビロン.jsはMSが積極的にやってる
  • WebGLの0.92と1.0の違いは?
    • IE11は0.92や
    • WebGLのサポートテストがちょっと通ってない
    • ほとんど一緒
  • Macの人はVMWare使うと思うけど、ちょっと動かないかもな

iOS, Ejecta & WebGL@allyogilvie

@allyogilvie

  • 実はiOS6でも作れるで!Ejectaなら!
  • Three.jsそのままやっても動かないw
    • DOMが触れないから
    • constructorとOrbitControls
    • window.ejectaで判定して、修正コードぶちこむ
  • iOS5.1.1でも動いとる!すごい!すごい!

GLSL ray marching

  • すぎもとまさひろさん
  • GLSLでray marchingを実装
  • レイトレーシングとは?
    • オブジェクトがどのように見えるはずか、視点から逆算する
  • ray marchingとは?
  • distance function
    • レイの先端とオブジェクト間での最短距離を返す
  • raymarchingのメリット
    • ポリゴンという概念がない
  • デメリット
  • 参考資料
    • www.iquilezles.org
    • demoscene.jp
    • shadertoy
    • GLSL sandbox