web glの話
DESCRIPTION
TRANSCRIPT
Web GLの話2012/08/26 Sapporo.js
@havanaclub_
2012年8月26日日曜日
WebGLってなんすか(いきなり)
2012年8月26日日曜日
WebGLってなんすかOpen GL ES 2.0 のJavaScript porting
canvas要素にOpenGLのプレーンを作れる
GPUに直接命令を投げれる（ドライバ経由で）
2012年8月26日日曜日
対応ブラウザPC新しげな Firefox, Chrome, Safari,OperaIEは対応する気がない（アドオン…）HandheldFirefox, Opera, ソニエリUIWebViewはsetWebGLEnabled:YESがいるよ
2012年8月26日日曜日
OpenGL ES 2.0 ってなんぞ
OpenGL 2.0のサブセット
最近のスマホの標準
ProgrammableShaderモデル, 実数精度プリフィクス, 冗長なAPIの削除etc
ちなみにこの前のSIGGRAPHで ES3.0が公開されたよ
2012年8月26日日曜日
何がうれしいの
zero-deploy
cross platform
cross device
で3Dインタラクションプログラムが動く（やったー）
2012年8月26日日曜日
デモるよ
MMD on WebGL
http://edv.sakura.ne.jp/mmd/Minecraft っぽいの http://mrdoob.github.com/three.js/examples/webgl_geometry_minecraft_ao.html
Google zygote bodyhttp://zygotebody.com/
2012年8月26日日曜日
Programmable shaderOpenGL ES 2.0では全部の描画をProgrammable Shaderを使わないといけない =>どゆこと？頂点を投げてphong shadingで塗れとかいうようなAPIが一切なくなったパイプラインにデータとシェーダプログラムを投げて描画させる =>自由度の代わりに煩雑
2012年8月26日日曜日
Shader pipeline
頂点データ 頂点データ'出力ビットマップバッファ
Fragment shader
Vertex shader
テクスチャarray
GLSLGLSL
2012年8月26日日曜日
プログラムの流れ1.初期化（キャンバスとか座標関係とか作る）
2.頂点データ&頂点用GLSLをセット3.Vertex shader（頂点シェーダ）で頂点をごにょる
4.テクスチャとFragment Shader用GLSLをセット
5. Fragment shader（DirectXでいうピクセルシェーダ）で画素ごとにどういう色にするか決める
2012年8月26日日曜日
GLSLシェーダプログラミング専用言語Cっぽい。型付き複数の頂点・ピクセルに同じプログラムが適用される一種のストリーム処理WebGLだと実行時コンパイル後GPUに流される
2012年8月26日日曜日
セキュリティローカルファイルや異なるドメインの画像はテクスチャとして読めないのでローカル開発するときもWebサーバ立てること
異ドメインについてはCORSヘッダつければ大丈夫だそう（未調査）
2012年8月26日日曜日
実際どんなかんじなの（コード解説）
Learning WebGL のサンプルを少し整理した奴http://learningwebgl.com/blog/?page_id=1217
2012年8月26日日曜日
補足：座標の話
http://www.belanecbn.sk/opengl_tutorialy/obrazky/opengl_perspective_projection.jpg
2012年8月26日日曜日
ぶっちゃけめんどい
2012年8月26日日曜日
ライブラリとか使おう
2012年8月26日日曜日
各種ライブラリ
three.jshttp://mrdoob.github.com/three.js/
PhiloGLhttp://www.senchalabs.org/philogl/
GLGEhttp://www.glge.org/
SceneJShttp://scenejs.org/
おすすめ
2012年8月26日日曜日
やってくれること•球とかの単純なオブジェクトの生成•モデルデータ（＋テクスチャ）・カメラの管理（シーングラフ管理）
•ボーンとかIKあたりのアニメーション支援
• LOD、Fogなどなど2012年8月26日日曜日
デモ
2012年8月26日日曜日
パフォーマンス
•JavaScriptよりGPUのほうが10倍くらい早いのでなるべくGPUにやらせること
•パーティクル生成とかポストプロセスとか
2012年8月26日日曜日
で、使い道は？
とりあえずゲーム方面？Quake 2は移植できたしMinecraftくらいなら余裕そうGISとか3Dチャートとかよろしいのでは3Dチャートライブラリ作りたい(Rにはなんかあるのを見せてもらった）
2012年8月26日日曜日
本とか
2012年8月26日日曜日
WebGL: Up and RunningBuilding 3D Graphics for the Web
今月出たばっかの本
three.jsベースでゲームとか作る
とても良いです
2012年8月26日日曜日
Professional WebGL Programming: Developing 3D Graphics for the
Web
今年7月の本
絵を出してテクスチャ貼るところまで（初心者向け？）
持ってない
2012年8月26日日曜日
OpenGL Insights
今月出たばっかの本
OpenGLの最近のトピックや使いこなしテクが色々！
WebGLの話もいくつか（結構値段するけど）
2012年8月26日日曜日
Programming OpenGL ES 2.0Super Bibleとかは結構レガシー記述が多い
Programmable shader なOpenGLはこれから入ると良い
日本語版もあるよ
2012年8月26日日曜日
OpenGL 4.0 Shading Language cookbook
GLSLはこれいいよ
GLSLのバージョンが違うのでそのへんはがんばる
あとnVidiaのサイトとかWebに色々サンプルのってる
2012年8月26日日曜日