Enviar búsqueda
Cargar
Basic knowledge of 3d
•
2 recomendaciones
•
898 vistas
Masayuki KaToH
Seguir
Software
Vista de diapositivas
Denunciar
Compartir
Vista de diapositivas
Denunciar
Compartir
1 de 24
Descargar ahora
Descargar para leer sin conexión
Recomendados
Isomorphic Architecture & Interface
Isomorphic Architecture & Interface
Jxck Jxck
Xamarin でクラシックデスクトップアプリ
Xamarin でクラシックデスクトップアプリ
m ishizaki
WebGL (Three.js) Code Lab - Intro. [ GTUG Girls 10th]
WebGL (Three.js) Code Lab - Intro. [ GTUG Girls 10th]
Yukio Andoh
俺と開発環境
俺と開発環境
Masayuki KaToH
Inside frogc in Dart
Inside frogc in Dart
Goro Fuji
Azure のポータル画面で、AI フレーバな BOT の作成ハンズオン
Azure のポータル画面で、AI フレーバな BOT の作成ハンズオン
Yasuaki Matsuda
どきっ!三行で作るランダムダンジョン!?~WEBもあるよ!~ - 2010/8/21 群馬Web研究会(勉強会)
どきっ!三行で作るランダムダンジョン!?~WEBもあるよ!~ - 2010/8/21 群馬Web研究会(勉強会)
parrotstudio
Excel 方眼紙撲滅委員会 活動報告 2012.11 #odstudy
Excel 方眼紙撲滅委員会 活動報告 2012.11 #odstudy
Takeshi Komiya
Recomendados
Isomorphic Architecture & Interface
Isomorphic Architecture & Interface
Jxck Jxck
Xamarin でクラシックデスクトップアプリ
Xamarin でクラシックデスクトップアプリ
m ishizaki
WebGL (Three.js) Code Lab - Intro. [ GTUG Girls 10th]
WebGL (Three.js) Code Lab - Intro. [ GTUG Girls 10th]
Yukio Andoh
俺と開発環境
俺と開発環境
Masayuki KaToH
Inside frogc in Dart
Inside frogc in Dart
Goro Fuji
Azure のポータル画面で、AI フレーバな BOT の作成ハンズオン
Azure のポータル画面で、AI フレーバな BOT の作成ハンズオン
Yasuaki Matsuda
どきっ!三行で作るランダムダンジョン!?~WEBもあるよ!~ - 2010/8/21 群馬Web研究会(勉強会)
どきっ!三行で作るランダムダンジョン!?~WEBもあるよ!~ - 2010/8/21 群馬Web研究会(勉強会)
parrotstudio
Excel 方眼紙撲滅委員会 活動報告 2012.11 #odstudy
Excel 方眼紙撲滅委員会 活動報告 2012.11 #odstudy
Takeshi Komiya
ソフト屋が挑戦した電子工作 〜力ずくの10か月〜
ソフト屋が挑戦した電子工作 〜力ずくの10か月〜
Shinichi Hirauchi
Blenderで作成したデータをMinecraftにぶっこむ
Blenderで作成したデータをMinecraftにぶっこむ
Takuro Wada
HTML5の事例をどーんと紹介~MSとHTML5~ #tdc4th
HTML5の事例をどーんと紹介~MSとHTML5~ #tdc4th
Microsoft
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
Yasunobu Ikeda
万能モジュール xCCK のご紹介 Osc20113 Nagoya
万能モジュール xCCK のご紹介 Osc20113 Nagoya
Hikawa Kilica
three.jsで作る3Dの世界
three.jsで作る3Dの世界
AdvancedTechNight
手乗りちょまぎょアプリ開発で学ぶ MRTK 入門 (MRTK 2.5 対応)
手乗りちょまぎょアプリ開発で学ぶ MRTK 入門 (MRTK 2.5 対応)
Madoka Chiyoda
Re-frame and A-Frame
Re-frame and A-Frame
Kazuhiro Hara
JAWS DAYS 2018 行ってきた & スタッフした
JAWS DAYS 2018 行ってきた & スタッフした
Masayuki KaToH
20201028 Visual IoTLT vol.5 kitazaki
20201028 Visual IoTLT vol.5 kitazaki
Ayachika Kitazaki
Atomic Designと付き合うコツ♡
Atomic Designと付き合うコツ♡
Miki Hayashi
ロボコンの為のFusion360講座 #CAD編
ロボコンの為のFusion360講座 #CAD編
電大 ヒュー研
触れるVR空間 ~水の惑星~
触れるVR空間 ~水の惑星~
Limg Limg
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
parrotstudio
Inside of excel 方眼紙撲滅委員会 #pyfes
Inside of excel 方眼紙撲滅委員会 #pyfes
Takeshi Komiya
Unityのポストエフェクトで遊ぶ!
Unityのポストエフェクトで遊ぶ!
Yamato Honda
UnrealEngineが5日間でasm.js化できたと聞いた俺たちは…
UnrealEngineが5日間でasm.js化できたと聞いた俺たちは…
Kei Nakazawa
3Dプリンタでロボット作るよ#2_始動編
3Dプリンタでロボット作るよ#2_始動編
Yoshihiro Shibata
Computer Graphics from the Mathematical Aspects - Lecture 1
Computer Graphics from the Mathematical Aspects - Lecture 1
Kodai Takao
Cocos2d-x(JS) ハンズオン #08「様々な画像描画方法」
Cocos2d-x(JS) ハンズオン #08「様々な画像描画方法」
Tomoaki Shimizu
APAC Community Summit DevOps Breakout 部屋.pptx
APAC Community Summit DevOps Breakout 部屋.pptx
Masayuki KaToH
LINE × AWSの可能性や事例について語り合う夕べ
LINE × AWSの可能性や事例について語り合う夕べ
Masayuki KaToH
Más contenido relacionado
Similar a Basic knowledge of 3d
ソフト屋が挑戦した電子工作 〜力ずくの10か月〜
ソフト屋が挑戦した電子工作 〜力ずくの10か月〜
Shinichi Hirauchi
Blenderで作成したデータをMinecraftにぶっこむ
Blenderで作成したデータをMinecraftにぶっこむ
Takuro Wada
HTML5の事例をどーんと紹介~MSとHTML5~ #tdc4th
HTML5の事例をどーんと紹介~MSとHTML5~ #tdc4th
Microsoft
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
Yasunobu Ikeda
万能モジュール xCCK のご紹介 Osc20113 Nagoya
万能モジュール xCCK のご紹介 Osc20113 Nagoya
Hikawa Kilica
three.jsで作る3Dの世界
three.jsで作る3Dの世界
AdvancedTechNight
手乗りちょまぎょアプリ開発で学ぶ MRTK 入門 (MRTK 2.5 対応)
手乗りちょまぎょアプリ開発で学ぶ MRTK 入門 (MRTK 2.5 対応)
Madoka Chiyoda
Re-frame and A-Frame
Re-frame and A-Frame
Kazuhiro Hara
JAWS DAYS 2018 行ってきた & スタッフした
JAWS DAYS 2018 行ってきた & スタッフした
Masayuki KaToH
20201028 Visual IoTLT vol.5 kitazaki
20201028 Visual IoTLT vol.5 kitazaki
Ayachika Kitazaki
Atomic Designと付き合うコツ♡
Atomic Designと付き合うコツ♡
Miki Hayashi
ロボコンの為のFusion360講座 #CAD編
ロボコンの為のFusion360講座 #CAD編
電大 ヒュー研
触れるVR空間 ~水の惑星~
触れるVR空間 ~水の惑星~
Limg Limg
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
parrotstudio
Inside of excel 方眼紙撲滅委員会 #pyfes
Inside of excel 方眼紙撲滅委員会 #pyfes
Takeshi Komiya
Unityのポストエフェクトで遊ぶ!
Unityのポストエフェクトで遊ぶ!
Yamato Honda
UnrealEngineが5日間でasm.js化できたと聞いた俺たちは…
UnrealEngineが5日間でasm.js化できたと聞いた俺たちは…
Kei Nakazawa
3Dプリンタでロボット作るよ#2_始動編
3Dプリンタでロボット作るよ#2_始動編
Yoshihiro Shibata
Computer Graphics from the Mathematical Aspects - Lecture 1
Computer Graphics from the Mathematical Aspects - Lecture 1
Kodai Takao
Cocos2d-x(JS) ハンズオン #08「様々な画像描画方法」
Cocos2d-x(JS) ハンズオン #08「様々な画像描画方法」
Tomoaki Shimizu
Similar a Basic knowledge of 3d
(20)
ソフト屋が挑戦した電子工作 〜力ずくの10か月〜
ソフト屋が挑戦した電子工作 〜力ずくの10か月〜
Blenderで作成したデータをMinecraftにぶっこむ
Blenderで作成したデータをMinecraftにぶっこむ
HTML5の事例をどーんと紹介~MSとHTML5~ #tdc4th
HTML5の事例をどーんと紹介~MSとHTML5~ #tdc4th
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
万能モジュール xCCK のご紹介 Osc20113 Nagoya
万能モジュール xCCK のご紹介 Osc20113 Nagoya
three.jsで作る3Dの世界
three.jsで作る3Dの世界
手乗りちょまぎょアプリ開発で学ぶ MRTK 入門 (MRTK 2.5 対応)
手乗りちょまぎょアプリ開発で学ぶ MRTK 入門 (MRTK 2.5 対応)
Re-frame and A-Frame
Re-frame and A-Frame
JAWS DAYS 2018 行ってきた & スタッフした
JAWS DAYS 2018 行ってきた & スタッフした
20201028 Visual IoTLT vol.5 kitazaki
20201028 Visual IoTLT vol.5 kitazaki
Atomic Designと付き合うコツ♡
Atomic Designと付き合うコツ♡
ロボコンの為のFusion360講座 #CAD編
ロボコンの為のFusion360講座 #CAD編
触れるVR空間 ~水の惑星~
触れるVR空間 ~水の惑星~
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
Inside of excel 方眼紙撲滅委員会 #pyfes
Inside of excel 方眼紙撲滅委員会 #pyfes
Unityのポストエフェクトで遊ぶ!
Unityのポストエフェクトで遊ぶ!
UnrealEngineが5日間でasm.js化できたと聞いた俺たちは…
UnrealEngineが5日間でasm.js化できたと聞いた俺たちは…
3Dプリンタでロボット作るよ#2_始動編
3Dプリンタでロボット作るよ#2_始動編
Computer Graphics from the Mathematical Aspects - Lecture 1
Computer Graphics from the Mathematical Aspects - Lecture 1
Cocos2d-x(JS) ハンズオン #08「様々な画像描画方法」
Cocos2d-x(JS) ハンズオン #08「様々な画像描画方法」
Más de Masayuki KaToH
APAC Community Summit DevOps Breakout 部屋.pptx
APAC Community Summit DevOps Breakout 部屋.pptx
Masayuki KaToH
LINE × AWSの可能性や事例について語り合う夕べ
LINE × AWSの可能性や事例について語り合う夕べ
Masayuki KaToH
俺と Active Storage + CloudFront
俺と Active Storage + CloudFront
Masayuki KaToH
俺とオープンデータ
俺とオープンデータ
Masayuki KaToH
Capacitor
Capacitor
Masayuki KaToH
俺と最近のクラウドAI系サービス
俺と最近のクラウドAI系サービス
Masayuki KaToH
俺と超高速リアルタイム検索APIをたぶん支えているAWS
俺と超高速リアルタイム検索APIをたぶん支えているAWS
Masayuki KaToH
俺と AWS Summit 2019 振り返り
俺と AWS Summit 2019 振り返り
Masayuki KaToH
俺と ha4go と Civic Tech Application & Open Data Catalog
俺と ha4go と Civic Tech Application & Open Data Catalog
Masayuki KaToH
俺 と JAWS DAYS 2019
俺 と JAWS DAYS 2019
Masayuki KaToH
俺と otoya
俺と otoya
Masayuki KaToH
俺とPrivate Forkと炭の選び方とC++からRubyへのブレイクスルーとポモドーロテクニックとコミュニティ貢献と浪人アカウントと糖尿病
俺とPrivate Forkと炭の選び方とC++からRubyへのブレイクスルーとポモドーロテクニックとコミュニティ貢献と浪人アカウントと糖尿病
Masayuki KaToH
クラウドを用いるIoT開発における実費レポート
クラウドを用いるIoT開発における実費レポート
Masayuki KaToH
俺と 2017 Code for Kanazawa Civic Hack Night運営
俺と 2017 Code for Kanazawa Civic Hack Night運営
Masayuki KaToH
俺とキーボード
俺とキーボード
Masayuki KaToH
俺とディスプレイ
俺とディスプレイ
Masayuki KaToH
俺と通知
俺と通知
Masayuki KaToH
JAWS DAYS 2018 行ってきた & スタッフした
JAWS DAYS 2018 行ってきた & スタッフした
Masayuki KaToH
俺とGitHubとcodeシリーズ
俺とGitHubとcodeシリーズ
Masayuki KaToH
ラズパイでネット対応 学習リモコンをつくろう!
ラズパイでネット対応 学習リモコンをつくろう!
Masayuki KaToH
Más de Masayuki KaToH
(20)
APAC Community Summit DevOps Breakout 部屋.pptx
APAC Community Summit DevOps Breakout 部屋.pptx
LINE × AWSの可能性や事例について語り合う夕べ
LINE × AWSの可能性や事例について語り合う夕べ
俺と Active Storage + CloudFront
俺と Active Storage + CloudFront
俺とオープンデータ
俺とオープンデータ
Capacitor
Capacitor
俺と最近のクラウドAI系サービス
俺と最近のクラウドAI系サービス
俺と超高速リアルタイム検索APIをたぶん支えているAWS
俺と超高速リアルタイム検索APIをたぶん支えているAWS
俺と AWS Summit 2019 振り返り
俺と AWS Summit 2019 振り返り
俺と ha4go と Civic Tech Application & Open Data Catalog
俺と ha4go と Civic Tech Application & Open Data Catalog
俺 と JAWS DAYS 2019
俺 と JAWS DAYS 2019
俺と otoya
俺と otoya
俺とPrivate Forkと炭の選び方とC++からRubyへのブレイクスルーとポモドーロテクニックとコミュニティ貢献と浪人アカウントと糖尿病
俺とPrivate Forkと炭の選び方とC++からRubyへのブレイクスルーとポモドーロテクニックとコミュニティ貢献と浪人アカウントと糖尿病
クラウドを用いるIoT開発における実費レポート
クラウドを用いるIoT開発における実費レポート
俺と 2017 Code for Kanazawa Civic Hack Night運営
俺と 2017 Code for Kanazawa Civic Hack Night運営
俺とキーボード
俺とキーボード
俺とディスプレイ
俺とディスプレイ
俺と通知
俺と通知
JAWS DAYS 2018 行ってきた & スタッフした
JAWS DAYS 2018 行ってきた & スタッフした
俺とGitHubとcodeシリーズ
俺とGitHubとcodeシリーズ
ラズパイでネット対応 学習リモコンをつくろう!
ラズパイでネット対応 学習リモコンをつくろう!
Basic knowledge of 3d
1.
2014-06-21 俺とBasic Knowledge of
3D PhlanXware Masayuki KaToH
2.
Profile Name! ふぁらお加藤 / PharaohKJ! Job
& Works! PhalanXware (Freelancer)! OCR system .com / .net! ISDB-T MFC / Linux C++! Social Game PHP / Java! SNS! twitter - @PharaohKJ! facebook - pharaohkj
3.
01 WebGL Demonstration z=x^2+y^2 でおググりください! by Chrome
or Firefox
4.
About three.js など 便利なライブラリがあります。 が、ここではOpenGL/WebGLの基礎を紹介、 まとめます。
5.
01 Matrix 1999年の映画! 世界がデジタルデータに見える様?
6.
01 3D CG 画像は! http://www20.atpages.jp/katwat/wp/?p=3929! より! http://www20.atpages.jp/katwat/three.js_r58/ examples/mytest27_pmx/menu.html! のレンダリング結果
7.
01 3D CG 構成している頂点座標の集まり。
8.
01 CG XY平面上にカラーのピクセルの集まり。
9.
01 つまり 表示したい頂点座標の集まり= 素材を! ! 画面上のXY平面ピクセルにする! ! それが3D CG。
10.
素材からOpen/WebGLへ送り込む
11.
∼変換てどうやんの? 4x4の行列変換でやります。数学です。! 俺には無理。! ライブラリがやってくれますので用語と英語! 抑えておけば基本的なことはなんとかなります。
12.
素材の座標は決まった こうやって計算した頂点座標を! OpenGL/WebGLに送り込み! Shader を用いて 画面にXY平面の画像を作る
13.
Shader / シェーダ ✤
WebGL/OpenGLではGLSLで書く! ✤ GLSL = OpenGL Shading Language の 略! ✤ C like なプログラム! !
14.
代表的なシェーダ ✤ Vertex Shader! ✤
頂点シェーダとも! ✤ Fragment Shader! ✤ フラグメントシェーダ、ピクセルシェーダとも
15.
VertexShader ✤ 全頂点ごとに呼ばれる。1ポリゴン3頂点だと3回! ✤ こちらからはuniform変数を使って値を渡す。! ✤
頂点情報などは規定の変数名と型を宣言することでOpenGL/WebGL からattribute/in として値を取り出すことができる。! ✤ 値を後に渡すときは varying / out としておく。(C言語でいうextern的 な感じ)! ✤ OpenGL/WebGLへ値を設定するにはgl_xxxという変数へ代入する
16.
VertexShader ✤ シンプルな実装! 頂点の場所 gl_Position は! モデルビュー変換と投影変換をした場所です。こんだけ。
17.
VertexShader ✤ なんの役に立つの???! ✤ ここで計算した頂点の場所値などを後の FragmentShaderにvarying/outで渡すことで、表現 力があげられるらしい。! ✤
例えば、ライトからの距離が近いかどうか?とか、 光がどの角度であたってるか?とか。
18.
FragmentShader ✤ ピクセルシェーダとも呼ばれる通り、ビューポート(表 示したい画面)の1ピクセルごとに呼ばれます。! ✤ つまり、1920x1080
の FullHD だと 2,073,600回!! ✤ 60FPS 描画だと124M / Sec! ✤ 結局このピクセルが画面上で何色かを決める
19.
FragmentShader ✤ シンプルな実装! 最終的なピクセルの色 gl_FragColor
は、! OpenGL/WebGLが計算した gl_Color です。こんだけ。
20.
01 御降臨 これで素材があなたのPCのXY座標にピク セルとして表現され、大天使が御降臨さ れました。
21.
まとめ ✤ 3Dプログラミングの基礎である以下について簡単に解 説した! ✤ 4x4行列計算の用法と用語! ✤
Vertex/FragmentShaderの超基本! ✤ 頂点を画面にうつすまでについて簡単にまとめた
22.
ご清聴ありがとうございました。 PhalanXware Masayuki KaToH
23.
参考文献 ✤ マルチプラットフォームのためのOpenGL ES入門! ✤
山下武志 著! ✤ Win32 API による OpenGL 3D プログラミング! ✤ 伊藤雄 著! ✤ DirectXシェーダプログラミング 仕組みからわかるゲームエフェクトテクニッ ク ! ✤ N2Factory 著
24.
参考URL ✤ Lighthouse3d.com! ✤ http://www.lighthouse3d.com/tutorials/glsl- tutorial/shader-examples/! ✤
【MMD】ちびあぴミク配布:時のカケラ 【MikuMikuDance】! ✤ http://www.nicovideo.jp/watch/sm19980352
Descargar ahora