Crystalskullを改造してみる

1. Crystalskullを改造してみる住友孝郎 @cattaka_net

2. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 自己紹介 ● 住友孝郎(すみともたかお) ● 株式会社ブリリアントサービス所属 ● 業務系Webアプリ開発(前職) ● Androidアプリケーション開発 ● ソフトウェアディベロッパー住友孝郎 @cattaka_net

3. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net アプリ作ったり

4. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net Android+GAEでアプリ作ったり

5. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net ゲーム作ったり

6. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 電子工作したり

7. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net ロボット作ったり

8. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net ロボット作ったり http://goo.gl/NAjBW

9. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net ラジコン作ったり ←に出展します　8月10日〜11日

10. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 電脳眼鏡かけさせられたり Mobile World Congress 2013 ＠スペイン

11. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 帽子かぶったり

12. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 3Dプリンター買ってみたり

13. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 人形作ったり ↓モデル ↑作った

14. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net ソフトウェアデベロッパーです

15. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net Crystalskullとは ● 開発ビルドについてくる WebGLのデモ ● Canvasではできない屈折のような表現

16. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 気になった理由 ● シェーダーはどうなってるの？ ● この表現はシェーダーを使わないとできない ● 3Dのモデルデータはどうやってる？ ● 3Dのフォーマットがある？ ● モデルデータは自分で作れるか？

17. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 3Dのデータの基本 ● データを構成するもの ● 頂点 ● インデックス ● 頂点の色 ● 法線 ● UV

18. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 3Dのデータの基本 ● 頂点 ● 1:( 1, 1, 1) ● 2:( 1, 1,-1) ● 3:( 1,-1,-1) ● 4:( 1,-1, 1) ● 5:(-1, 1, 1) ● 6:(-1, 1,-1) ● 7:(-1,-1,-1) ● 8:(-1,-1, 1) 1 2 3 4 6 7 8 5 vertices = { 1, 1, 1, 1, 1,-1, 1,-1,-1, 1,-1, 1,-1, 1, 1,-1, 1,-1,-1,-1,-1,-1,-1, 1}

19. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 3Dのデータの基本 ● インデックス ● A:(1,2,3) ● B:(3,4,1) ● C:(5,6,2) ● D:(2,1,5) ● E:(2,6,7) ● F:(7,3,2) ● G:・・・ ● 省略 6 5 1 2 3 4 7 A B DC E F indices = {1,2,3,3,4,1,5,6,2,2,1,5,2,6,7,7,3,2,…}

20. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 3D描画の基本 ● Vertex Shader ● ３次元のモデルを視点を加味して頂点を2次元のスクリーンに投影する ● Fragment Shader ● 投影されたものを実際に描画する

21. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 中を覗いてみた ● フォルダ構造は素直 ● モデルはmodelsにある ● 背景画像はskyboxにある ● シェーダーはshadersにある ● cssはstyleにある ● アイコンはiconsにある ● html、jsはルートにある

22. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net メインのhtmlは１つ ● index.html ● シンプルなHTMLが1つだけ ● j3d.jsというWebGLのライブラリを使ってた ● crystalskull.jsが本体のjsらしい <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="pragma" content="no-cache"> <title>Glass / Refraction, reflection, fresnel, chromatic dispersion | J3D</title> <link type="text/css" rel="stylesheet" href="style/common.css"> <script type="text/javascript" src="j3d.js"></script> <script type="text/javascript" src="crystalskull.js"></script> </head> <body data-rendering="true"> </body> </html> ←j3d.jsはWebGLのライブラリ ←このアプリのメインのjsファイル

23. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net CSSはシンプルなのが１つ html, body { width: 100%; height: 100%; overflow: hidden; margin: 0; }

24. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net crystalskull.js ● 処理の概要 ● window.onload – シェーダーのロード – 背景画像のロード – モデルデータのロード ● onMouseMove – 回転などのユーザーの入力の処理 ● draw – 描画処理

25. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net Glass.glsl ● ガッツリC言語 ● Vertex Shader ● Fragment Shader

26. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net Vertex Shader //# GlassVertex varying vec3 vNormal; varying vec3 t; varying vec3 tr; varying vec3 tg; varying vec3 tb; varying float rfac; uniform vec3 chromaticDispertion; uniform float bias; uniform float scale; uniform float power; void main(void) { gl_Position = mvpMatrix() * vec4(aVertexPosition, 1.0); vNormal = normalize(nMatrix * aVertexNormal); vec3 incident = normalize( (vec4(aVertexPosition, 1.0) * mMatrix).xyz - uEyePosition); t = reflect(incident, vNormal); tr = refract(incident, vNormal, chromaticDispertion.x); tg = refract(incident, vNormal, chromaticDispertion.y); tb = refract(incident, vNormal, chromaticDispertion.z); // bias, scale, 1, power rfac = bias + scale * pow(1.0 + dot(incident, vNormal), power); }

27. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net Fragment Shader //# GlassFragment uniform samplerCube uCubemap; varying vec3 vNormal; varying vec3 t; varying vec3 tr; varying vec3 tg; varying vec3 tb; varying float rfac; void main(void) { vec4 ref = textureCube(uCubemap, t); vec4 ret = vec4(1); ret.r = textureCube(uCubemap, tr).r; ret.g = textureCube(uCubemap, tg).g; ret.b = textureCube(uCubemap, tb).b; gl_FragColor = ret * rfac + ref * (1.0 - rfac); }

28. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 3Dモデルのファイル ● skull.js ● 開いたらアワワワワ・・・・

29. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net skull.jsの中身

30. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 3Dモデルのファイル ● ファイルの構造 ● vertics ：頂点座標 ● normals ：法線ベクトル ● colors ：頂点の色 ● uv1 ：UVマップ1 ● uv2 ：UVマップ ● tris ：三角形の頂点のインデックス

31. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 改造してみる

32. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net モデルを差し替えてみる ● J3DのDEMOデータ ● https://github.com/drojdjou/J3D ● ファイルを追加してファイル名を変えるのみ J3D.Loader.loadJSON("models/monkeyhi.js", function(j) { model.geometry = new J3D.Mesh(j); }); J3D.Loader.loadJSON("models/skull.js", function(j) { model.geometry = new J3D.Mesh(j); });

33. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 自分で3Dモデルを作る

34. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net j3d.jsはUnityを使ったエクスポーターがある

35. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net Unityをダウンロードしよう

36. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net Linuxは・・・？

37. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 気を取り直してWindowsへ

38. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net コンバーターで変換

39. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net コンバーターが吐くデータは階層が違ったので削ったオリジナルコンバーター

40. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net そのデータで差し替える

41. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net クリスタルフォクすけ完成

42. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 感想 ● シェーダーが使えるのはありがたい ● ただ、正直敷居が高い ● もうちょっと抽象化できないのかな・・・? – ライブラリがある:Three.js、SceneJS、J3D、PhiloGL、GLGE ● モデルデータのファイルサイズ ● JSONで3Dモデルは容量が大きすぎる ● 例えば頂点データ – float32bit→4byte – テキスト有効数字6桁+小数点+区切り文字→8byte →実際2倍じゃ済まない・・・

43. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net ご清聴ありがとうございました住友孝郎 @cattaka_net

Crystalskullを改造してみる

Takao Sumitomo

Crystalskullを改造してみる

A particular slide catching your eye?