Crystalskullを改造してみる
住友 孝郎
@cattaka_net
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
自己紹介
● 住友 孝郎(すみとも たかお)
● 株式会社ブリリアントサービス所属
● 業務系Webアプリ開発(前職)
● Androidアプリケー...
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
アプリ作ったり
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
Android+GAEでアプリ作ったり
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
ゲーム作ったり
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
電子工作したり
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
ロボット作ったり
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
ロボット作ったり
http://goo.gl/NAjBW
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
ラジコン作ったり
←に出展します
 8月10日〜11日
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
電脳眼鏡かけさせられたり
Mobile World Congress 2013 @スペイン
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
帽子かぶったり
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
3Dプリンター買ってみたり
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
人形作ったり
↓モデル
↑作った
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
ソフトウェア
デベロッパーです
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
Crystalskullとは
● 開発ビルドについてくる
WebGLのデモ
● Canvasではできない
屈折のような表現
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
気になった理由
● シェーダーはどうなってるの?
● この表現はシェーダーを使わないとできない
● 3Dのモデルデータはどうやってる?
● 3Dのフ...
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
3Dのデータの基本
● データを構成するもの
● 頂点
● インデックス
● 頂点の色
● 法線
● UV
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)...
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,...
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
3D描画の基本
● Vertex Shader
● 3次元のモデルを視点を加味して
頂点を2次元のスクリーンに投影する
● Fragment Sha...
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
中を覗いてみた
● フォルダ構造は素直
● モデルはmodelsにある
● 背景画像はskyboxにある
● シェーダーはshadersにある
● ...
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
メインのhtmlは1つ
● index.html
● シンプルなHTMLが1つだけ
● j3d.jsというWebGLのライブラリを使ってた
● cr...
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
CSSはシンプルなのが1つ
html, body {
width: 100%;
height: 100%;
overflow: hidden;
ma...
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
crystalskull.js
● 処理の概要
● window.onload
– シェーダーのロード
– 背景画像のロード
– モデルデータのロー...
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
Glass.glsl
● ガッツリC言語
● Vertex Shader
● Fragment Shader
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
Vertex Shader
//# GlassVertex
varying vec3 vNormal;
varying vec3 t;
varyin...
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
Fragment Shader
//# GlassFragment
uniform samplerCube uCubemap;
varying ve...
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
3Dモデルのファイル
● skull.js
● 開いたらアワワワワ・・・・
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
skull.jsの中身
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
3Dモデルのファイル
● ファイルの構造
● vertics :頂点座標
● normals :法線ベクトル
● colors :頂点の色
● uv...
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
改造してみる
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
モデルを差し替えてみる
● J3DのDEMOデータ
● https://github.com/drojdjou/J3D
● ファイルを追加してファイ...
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
自分で3Dモデルを作る
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
j3d.jsはUnityを使った
エクスポーターがある
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
Unityをダウンロードしよう
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
Linuxは・・・?
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
気を取り直してWindowsへ
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
コンバーターで変換
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
コンバーターが吐くデータは階層が
違ったので削った
オリジナル
コンバーター
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
そのデータで差し替える
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
クリスタルフォクすけ完成
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
感想
● シェーダーが使えるのはありがたい
● ただ、正直敷居が高い
● もうちょっと抽象化できないのかな・・・?
– ライブラリがある:Three...
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net
ご清聴ありがとうございました
住友 孝郎
@cattaka_net
Upcoming SlideShare
Loading in …5
×

Crystalskullを改造してみる

1,508 views

Published on

関西Firefox OS勉強会 2nd GIGの発表資料です。
http://atnd.org/events/40622

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,508
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Crystalskullを改造してみる

  1. 1. Crystalskullを改造してみる 住友 孝郎 @cattaka_net
  2. 2. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 自己紹介 ● 住友 孝郎(すみとも たかお) ● 株式会社ブリリアントサービス所属 ● 業務系Webアプリ開発(前職) ● Androidアプリケーション開発 ● ソフトウェアディベロッパー 住友 孝郎 @cattaka_net
  3. 3. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net アプリ作ったり
  4. 4. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net Android+GAEでアプリ作ったり
  5. 5. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net ゲーム作ったり
  6. 6. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 電子工作したり
  7. 7. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net ロボット作ったり
  8. 8. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net ロボット作ったり http://goo.gl/NAjBW
  9. 9. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net ラジコン作ったり ←に出展します  8月10日〜11日
  10. 10. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 電脳眼鏡かけさせられたり Mobile World Congress 2013 @スペイン
  11. 11. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 帽子かぶったり
  12. 12. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 3Dプリンター買ってみたり
  13. 13. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 人形作ったり ↓モデル ↑作った
  14. 14. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net ソフトウェア デベロッパーです
  15. 15. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net Crystalskullとは ● 開発ビルドについてくる WebGLのデモ ● Canvasではできない 屈折のような表現
  16. 16. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 気になった理由 ● シェーダーはどうなってるの? ● この表現はシェーダーを使わないとできない ● 3Dのモデルデータはどうやってる? ● 3Dのフォーマットがある? ● モデルデータは自分で作れるか?
  17. 17. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 3Dのデータの基本 ● データを構成するもの ● 頂点 ● インデックス ● 頂点の色 ● 法線 ● UV
  18. 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. 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. 20. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 3D描画の基本 ● Vertex Shader ● 3次元のモデルを視点を加味して 頂点を2次元のスクリーンに投影する ● Fragment Shader ● 投影されたものを実際に描画する
  21. 21. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 中を覗いてみた ● フォルダ構造は素直 ● モデルはmodelsにある ● 背景画像はskyboxにある ● シェーダーはshadersにある ● cssはstyleにある ● アイコンはiconsにある ● html、jsはルートにある
  22. 22. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net メインのhtmlは1つ ● 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. 23. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net CSSはシンプルなのが1つ html, body { width: 100%; height: 100%; overflow: hidden; margin: 0; }
  24. 24. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net crystalskull.js ● 処理の概要 ● window.onload – シェーダーのロード – 背景画像のロード – モデルデータのロード ● onMouseMove – 回転などのユーザーの入力の処理 ● draw – 描画処理
  25. 25. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net Glass.glsl ● ガッツリC言語 ● Vertex Shader ● Fragment Shader
  26. 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. 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. 28. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 3Dモデルのファイル ● skull.js ● 開いたらアワワワワ・・・・
  29. 29. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net skull.jsの中身
  30. 30. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 3Dモデルのファイル ● ファイルの構造 ● vertics :頂点座標 ● normals :法線ベクトル ● colors :頂点の色 ● uv1 :UVマップ1 ● uv2 :UVマップ ● tris :三角形の頂点のインデックス
  31. 31. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 改造してみる
  32. 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. 33. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 自分で3Dモデルを作る
  34. 34. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net j3d.jsはUnityを使った エクスポーターがある
  35. 35. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net Unityをダウンロードしよう
  36. 36. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net Linuxは・・・?
  37. 37. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 気を取り直してWindowsへ
  38. 38. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net コンバーターで変換
  39. 39. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net コンバーターが吐くデータは階層が 違ったので削った オリジナル コンバーター
  40. 40. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net そのデータで差し替える
  41. 41. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net クリスタルフォクすけ完成
  42. 42. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net 感想 ● シェーダーが使えるのはありがたい ● ただ、正直敷居が高い ● もうちょっと抽象化できないのかな・・・? – ライブラリがある:Three.js、SceneJS、J3D、PhiloGL、GLGE ● モデルデータのファイルサイズ ● JSONで3Dモデルは容量が大きすぎる ● 例えば頂点データ – float32bit→4byte – テキスト有効数字6桁+小数点+区切り文字→8byte →実際2倍じゃ済まない・・・
  43. 43. 2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net ご清聴ありがとうございました 住友 孝郎 @cattaka_net

×