Enviar búsqueda
Cargar
Crystalskullを改造してみる
•
2 recomendaciones
•
1,883 vistas
Takao Sumitomo
Seguir
関西Firefox OS勉強会 2nd GIGの発表資料です。 http://atnd.org/events/40622
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 43
Descargar ahora
Descargar para leer sin conexión
Recomendados
Power Assert and perl.js
Power Assert and perl.js
Goro Fuji
Decades around here
Decades around here
Akio Tajima
カーネル VM懇親会LT
カーネル VM懇親会LT
cosmo0920
Coqでsprintf
Coqでsprintf
Masaki Hara
Coqでsprintf
Coqでsprintf
Masaki Hara
AndroidとArduinoで ロボットを作って思ったこと
AndroidとArduinoで ロボットを作って思ったこと
Takao Sumitomo
Androidでロボットアームを動かしてみた(2012OSC愛媛)
Androidでロボットアームを動かしてみた(2012OSC愛媛)
Takao Sumitomo
簡単!OpenGL ES 2.0フラグメントシェーダー
簡単!OpenGL ES 2.0フラグメントシェーダー
Eiji Kamiya
Más contenido relacionado
Similar a Crystalskullを改造してみる
【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計
【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計
UnityTechnologiesJapan002
Shadow gunのサンプルから学べるモバイル最適化
Shadow gunのサンプルから学べるモバイル最適化
Katsutoshi Makino
VRアバターをモバイルARでより身近に! Vismuth
VRアバターをモバイルARでより身近に! Vismuth
Takumi Ito
ちょっと詳しくJavaScript 第4回【スコープとクロージャ】
ちょっと詳しくJavaScript 第4回【スコープとクロージャ】
株式会社ランチェスター
【Unite Tokyo 2018】誘導ミサイル完全マスター
【Unite Tokyo 2018】誘導ミサイル完全マスター
Unity Technologies Japan K.K.
ハンズオン勉強会 はじめてのJavaScriptとSPARQL
ハンズオン勉強会 はじめてのJavaScriptとSPARQL
Taisuke Fukuno
NArray and scientific computing with Ruby - RubyKaigi2010
NArray and scientific computing with Ruby - RubyKaigi2010
Masahiro Tanaka
オープンデータセミナー in 鳥取
オープンデータセミナー in 鳥取
Taisuke Fukuno
Node.js - JavaScript Thread Programming
Node.js - JavaScript Thread Programming
takesako
Similar a Crystalskullを改造してみる
(9)
【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計
【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計
Shadow gunのサンプルから学べるモバイル最適化
Shadow gunのサンプルから学べるモバイル最適化
VRアバターをモバイルARでより身近に! Vismuth
VRアバターをモバイルARでより身近に! Vismuth
ちょっと詳しくJavaScript 第4回【スコープとクロージャ】
ちょっと詳しくJavaScript 第4回【スコープとクロージャ】
【Unite Tokyo 2018】誘導ミサイル完全マスター
【Unite Tokyo 2018】誘導ミサイル完全マスター
ハンズオン勉強会 はじめてのJavaScriptとSPARQL
ハンズオン勉強会 はじめてのJavaScriptとSPARQL
NArray and scientific computing with Ruby - RubyKaigi2010
NArray and scientific computing with Ruby - RubyKaigi2010
オープンデータセミナー in 鳥取
オープンデータセミナー in 鳥取
Node.js - JavaScript Thread Programming
Node.js - JavaScript Thread Programming
Más de Takao Sumitomo
僕は上スワイプでBottomSheetを出したかっただけなんだ
僕は上スワイプでBottomSheetを出したかっただけなんだ
Takao Sumitomo
sharedUserIdを使った俺得開発ツールの作り方
sharedUserIdを使った俺得開発ツールの作り方
Takao Sumitomo
CIのビルドを通知する仕組みをAndroidとFirestoreで作った話
CIのビルドを通知する仕組みをAndroidとFirestoreで作った話
Takao Sumitomo
Camera API 1と2が混在するプロダクトの開発で 泣いたこととそのワークアラウンド
Camera API 1と2が混在するプロダクトの開発で 泣いたこととそのワークアラウンド
Takao Sumitomo
アプリを成長させるためのログ取りとログ解析に必要なこと
アプリを成長させるためのログ取りとログ解析に必要なこと
Takao Sumitomo
(beta)アプリを成長させるためのログ取りとログ解析に必要なこと
(beta)アプリを成長させるためのログ取りとログ解析に必要なこと
Takao Sumitomo
高速でトライ&エラーを するために気をつけてること
高速でトライ&エラーを するために気をつけてること
Takao Sumitomo
Maker Faire Bay Areaに行きたかったのでGoogle I/Oに行ってきた
Maker Faire Bay Areaに行きたかったのでGoogle I/Oに行ってきた
Takao Sumitomo
Viewを動的に変化させるアプローチ
Viewを動的に変化させるアプローチ
Takao Sumitomo
プロダクトを育てるのにGoogleのサービスが助けてくれること
プロダクトを育てるのにGoogleのサービスが助けてくれること
Takao Sumitomo
AdapterToolboxでRecyclerViewを楽にする
AdapterToolboxでRecyclerViewを楽にする
Takao Sumitomo
エンジニアがプロダクト育成を始めるまでにやったこと
エンジニアがプロダクト育成を始めるまでにやったこと
Takao Sumitomo
Wantedlyのテスト事情
Wantedlyのテスト事情
Takao Sumitomo
用途に合わせたアニメーションの実装方法
用途に合わせたアニメーションの実装方法
Takao Sumitomo
Uml速習会
Uml速習会
Takao Sumitomo
potatotips (iOS/Android開発Tips共有会) 第19回 資料
potatotips (iOS/Android開発Tips共有会) 第19回 資料
Takao Sumitomo
SQLiteDatabaseを無理矢理覗く
SQLiteDatabaseを無理矢理覗く
Takao Sumitomo
開発を効率的に進めるられるまでの道程
開発を効率的に進めるられるまでの道程
Takao Sumitomo
テストがあればなんとかなる〜効率化までの道程〜
テストがあればなんとかなる〜効率化までの道程〜
Takao Sumitomo
勉強会資料 データ構造とアルゴリズム
勉強会資料 データ構造とアルゴリズム
Takao Sumitomo
Más de Takao Sumitomo
(20)
僕は上スワイプでBottomSheetを出したかっただけなんだ
僕は上スワイプでBottomSheetを出したかっただけなんだ
sharedUserIdを使った俺得開発ツールの作り方
sharedUserIdを使った俺得開発ツールの作り方
CIのビルドを通知する仕組みをAndroidとFirestoreで作った話
CIのビルドを通知する仕組みをAndroidとFirestoreで作った話
Camera API 1と2が混在するプロダクトの開発で 泣いたこととそのワークアラウンド
Camera API 1と2が混在するプロダクトの開発で 泣いたこととそのワークアラウンド
アプリを成長させるためのログ取りとログ解析に必要なこと
アプリを成長させるためのログ取りとログ解析に必要なこと
(beta)アプリを成長させるためのログ取りとログ解析に必要なこと
(beta)アプリを成長させるためのログ取りとログ解析に必要なこと
高速でトライ&エラーを するために気をつけてること
高速でトライ&エラーを するために気をつけてること
Maker Faire Bay Areaに行きたかったのでGoogle I/Oに行ってきた
Maker Faire Bay Areaに行きたかったのでGoogle I/Oに行ってきた
Viewを動的に変化させるアプローチ
Viewを動的に変化させるアプローチ
プロダクトを育てるのにGoogleのサービスが助けてくれること
プロダクトを育てるのにGoogleのサービスが助けてくれること
AdapterToolboxでRecyclerViewを楽にする
AdapterToolboxでRecyclerViewを楽にする
エンジニアがプロダクト育成を始めるまでにやったこと
エンジニアがプロダクト育成を始めるまでにやったこと
Wantedlyのテスト事情
Wantedlyのテスト事情
用途に合わせたアニメーションの実装方法
用途に合わせたアニメーションの実装方法
Uml速習会
Uml速習会
potatotips (iOS/Android開発Tips共有会) 第19回 資料
potatotips (iOS/Android開発Tips共有会) 第19回 資料
SQLiteDatabaseを無理矢理覗く
SQLiteDatabaseを無理矢理覗く
開発を効率的に進めるられるまでの道程
開発を効率的に進めるられるまでの道程
テストがあればなんとかなる〜効率化までの道程〜
テストがあればなんとかなる〜効率化までの道程〜
勉強会資料 データ構造とアルゴリズム
勉強会資料 データ構造とアルゴリズム
Último
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
Sadao Tokuyama
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
Shumpei Kishi
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
Ayachika Kitazaki
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
Tetsuya Nihonmatsu
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
ssuser539845
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
arts yokohama
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
ssuser370dd7
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
Matsushita Laboratory
2024 04 minnanoito
2024 04 minnanoito
arts yokohama
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
Industrial Technology Research Institute (ITRI)(工業技術研究院, 工研院)
2024 03 CTEA
2024 03 CTEA
arts yokohama
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
arts yokohama
Último
(12)
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
2024 04 minnanoito
2024 04 minnanoito
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
2024 03 CTEA
2024 03 CTEA
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
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 ● 3次元のモデルを視点を加味して 頂点を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は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.
2013/07/20 関西Firefox OS勉強会 2nd GIG @cattaka_net CSSはシンプルなのが1つ 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
Descargar ahora