Suche senden
Hochladen
Kansai cedec 2015_fumoto
•
8 gefällt mir
•
3,463 views
F
fumoto kazuhiro
Folgen
Bildung
Melden
Teilen
Melden
Teilen
1 von 34
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Tabc vol3 テクニカルアーティストを始めるにあたって
Tabc vol3 テクニカルアーティストを始めるにあたって
fumoto kazuhiro
レイトレ合宿3!!! 5分間アピールプレゼン―Pocol
レイトレ合宿3!!! 5分間アピールプレゼン―Pocol
ProjectAsura
Unity * スマートフォン開発で学んだこと
Unity * スマートフォン開発で学んだこと
Katsutoshi Makino
Application parallelisation Android - Klaas Vangend
Application parallelisation Android - Klaas Vangend
ナム-Nam Nguyễn
뭣이 중헌디? 성능 프로파일링도 모름서 - 유니티 성능 프로파일링 가이드 (IGC16)
뭣이 중헌디? 성능 프로파일링도 모름서 - 유니티 성능 프로파일링 가이드 (IGC16)
ozlael ozlael
CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜
CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜
Drecom Co., Ltd.
Unityのポストエフェクトで遊ぶ!
Unityのポストエフェクトで遊ぶ!
Yamato Honda
中級グラフィックス入門~シャドウマッピング総まとめ~
中級グラフィックス入門~シャドウマッピング総まとめ~
ProjectAsura
Empfohlen
Tabc vol3 テクニカルアーティストを始めるにあたって
Tabc vol3 テクニカルアーティストを始めるにあたって
fumoto kazuhiro
レイトレ合宿3!!! 5分間アピールプレゼン―Pocol
レイトレ合宿3!!! 5分間アピールプレゼン―Pocol
ProjectAsura
Unity * スマートフォン開発で学んだこと
Unity * スマートフォン開発で学んだこと
Katsutoshi Makino
Application parallelisation Android - Klaas Vangend
Application parallelisation Android - Klaas Vangend
ナム-Nam Nguyễn
뭣이 중헌디? 성능 프로파일링도 모름서 - 유니티 성능 프로파일링 가이드 (IGC16)
뭣이 중헌디? 성능 프로파일링도 모름서 - 유니티 성능 프로파일링 가이드 (IGC16)
ozlael ozlael
CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜
CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜
Drecom Co., Ltd.
Unityのポストエフェクトで遊ぶ!
Unityのポストエフェクトで遊ぶ!
Yamato Honda
中級グラフィックス入門~シャドウマッピング総まとめ~
中級グラフィックス入門~シャドウマッピング総まとめ~
ProjectAsura
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
Drecom Co., Ltd.
ACEScg: A Common Color Encoding for Visual Effects Applications - DigiPro 2015
ACEScg: A Common Color Encoding for Visual Effects Applications - DigiPro 2015
hpduiker
Weighted Blended Order Independent Transparency
Weighted Blended Order Independent Transparency
zokweiron
Aclt1
Aclt1
zokweiron
声の実体化体験 - HTML5でつくるデジタルインスタレーション -
声の実体化体験 - HTML5でつくるデジタルインスタレーション -
Yamato Honda
シェーダ体系の話
シェーダ体系の話
fumoto kazuhiro
CEDEC 2015 IoT向け汎用protocol MQTTのリアルタイムゲーム通信利用と実装、そして未来へ…
CEDEC 2015 IoT向け汎用protocol MQTTのリアルタイムゲーム通信利用と実装、そして未来へ…
Drecom Co., Ltd.
Aiming 開発ゲームの裏側
Aiming 開発ゲームの裏側
Katsutoshi Makino
Unity & VR (Unity Roadshow 2016)
Unity & VR (Unity Roadshow 2016)
ozlael ozlael
Penner pre-integrated skin rendering (siggraph 2011 advances in real-time r...
Penner pre-integrated skin rendering (siggraph 2011 advances in real-time r...
JP Lee
AI in Games- Steering, Wander and Flocking behavior
AI in Games- Steering, Wander and Flocking behavior
ナム-Nam Nguyễn
Getting Native with NDK
Getting Native with NDK
ナム-Nam Nguyễn
Shadow gunのサンプルから学べるモバイル最適化
Shadow gunのサンプルから学べるモバイル最適化
Katsutoshi Makino
レイトレ合宿2!! 3分間アピールプレゼン―Pocol
レイトレ合宿2!! 3分間アピールプレゼン―Pocol
ProjectAsura
ACES 1.0 OpenColorIO config - Siggraph 2015
ACES 1.0 OpenColorIO config - Siggraph 2015
hpduiker
Filmic Tonemapping for Real-time Rendering - Siggraph 2010 Color Course
Filmic Tonemapping for Real-time Rendering - Siggraph 2010 Color Course
hpduiker
Optimizing mobile applications - Ian Dundore, Mark Harkness
Optimizing mobile applications - Ian Dundore, Mark Harkness
ozlael ozlael
Mobile crossplatformchallenges siggraph
Mobile crossplatformchallenges siggraph
JP Lee
Pre Analyze For
Pre Analyze For
JP Lee
Q(キュー)サイトに学ぶ、 演出のためのHTML5
Q(キュー)サイトに学ぶ、 演出のためのHTML5
Yamato Honda
TAと歩くGDC2013報告会資料
TAと歩くGDC2013報告会資料
fumoto kazuhiro
Siggraph2012報告会前半
Siggraph2012報告会前半
fumoto kazuhiro
Weitere ähnliche Inhalte
Andere mochten auch
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
Drecom Co., Ltd.
ACEScg: A Common Color Encoding for Visual Effects Applications - DigiPro 2015
ACEScg: A Common Color Encoding for Visual Effects Applications - DigiPro 2015
hpduiker
Weighted Blended Order Independent Transparency
Weighted Blended Order Independent Transparency
zokweiron
Aclt1
Aclt1
zokweiron
声の実体化体験 - HTML5でつくるデジタルインスタレーション -
声の実体化体験 - HTML5でつくるデジタルインスタレーション -
Yamato Honda
シェーダ体系の話
シェーダ体系の話
fumoto kazuhiro
CEDEC 2015 IoT向け汎用protocol MQTTのリアルタイムゲーム通信利用と実装、そして未来へ…
CEDEC 2015 IoT向け汎用protocol MQTTのリアルタイムゲーム通信利用と実装、そして未来へ…
Drecom Co., Ltd.
Aiming 開発ゲームの裏側
Aiming 開発ゲームの裏側
Katsutoshi Makino
Unity & VR (Unity Roadshow 2016)
Unity & VR (Unity Roadshow 2016)
ozlael ozlael
Penner pre-integrated skin rendering (siggraph 2011 advances in real-time r...
Penner pre-integrated skin rendering (siggraph 2011 advances in real-time r...
JP Lee
AI in Games- Steering, Wander and Flocking behavior
AI in Games- Steering, Wander and Flocking behavior
ナム-Nam Nguyễn
Getting Native with NDK
Getting Native with NDK
ナム-Nam Nguyễn
Shadow gunのサンプルから学べるモバイル最適化
Shadow gunのサンプルから学べるモバイル最適化
Katsutoshi Makino
レイトレ合宿2!! 3分間アピールプレゼン―Pocol
レイトレ合宿2!! 3分間アピールプレゼン―Pocol
ProjectAsura
ACES 1.0 OpenColorIO config - Siggraph 2015
ACES 1.0 OpenColorIO config - Siggraph 2015
hpduiker
Filmic Tonemapping for Real-time Rendering - Siggraph 2010 Color Course
Filmic Tonemapping for Real-time Rendering - Siggraph 2010 Color Course
hpduiker
Optimizing mobile applications - Ian Dundore, Mark Harkness
Optimizing mobile applications - Ian Dundore, Mark Harkness
ozlael ozlael
Mobile crossplatformchallenges siggraph
Mobile crossplatformchallenges siggraph
JP Lee
Pre Analyze For
Pre Analyze For
JP Lee
Q(キュー)サイトに学ぶ、 演出のためのHTML5
Q(キュー)サイトに学ぶ、 演出のためのHTML5
Yamato Honda
Andere mochten auch
(20)
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
ACEScg: A Common Color Encoding for Visual Effects Applications - DigiPro 2015
ACEScg: A Common Color Encoding for Visual Effects Applications - DigiPro 2015
Weighted Blended Order Independent Transparency
Weighted Blended Order Independent Transparency
Aclt1
Aclt1
声の実体化体験 - HTML5でつくるデジタルインスタレーション -
声の実体化体験 - HTML5でつくるデジタルインスタレーション -
シェーダ体系の話
シェーダ体系の話
CEDEC 2015 IoT向け汎用protocol MQTTのリアルタイムゲーム通信利用と実装、そして未来へ…
CEDEC 2015 IoT向け汎用protocol MQTTのリアルタイムゲーム通信利用と実装、そして未来へ…
Aiming 開発ゲームの裏側
Aiming 開発ゲームの裏側
Unity & VR (Unity Roadshow 2016)
Unity & VR (Unity Roadshow 2016)
Penner pre-integrated skin rendering (siggraph 2011 advances in real-time r...
Penner pre-integrated skin rendering (siggraph 2011 advances in real-time r...
AI in Games- Steering, Wander and Flocking behavior
AI in Games- Steering, Wander and Flocking behavior
Getting Native with NDK
Getting Native with NDK
Shadow gunのサンプルから学べるモバイル最適化
Shadow gunのサンプルから学べるモバイル最適化
レイトレ合宿2!! 3分間アピールプレゼン―Pocol
レイトレ合宿2!! 3分間アピールプレゼン―Pocol
ACES 1.0 OpenColorIO config - Siggraph 2015
ACES 1.0 OpenColorIO config - Siggraph 2015
Filmic Tonemapping for Real-time Rendering - Siggraph 2010 Color Course
Filmic Tonemapping for Real-time Rendering - Siggraph 2010 Color Course
Optimizing mobile applications - Ian Dundore, Mark Harkness
Optimizing mobile applications - Ian Dundore, Mark Harkness
Mobile crossplatformchallenges siggraph
Mobile crossplatformchallenges siggraph
Pre Analyze For
Pre Analyze For
Q(キュー)サイトに学ぶ、 演出のためのHTML5
Q(キュー)サイトに学ぶ、 演出のためのHTML5
Mehr von fumoto kazuhiro
TAと歩くGDC2013報告会資料
TAと歩くGDC2013報告会資料
fumoto kazuhiro
Siggraph2012報告会前半
Siggraph2012報告会前半
fumoto kazuhiro
究極のバッチフレームワーク(予定)
究極のバッチフレームワーク(予定)
fumoto kazuhiro
ネットワークコマンド入力に対応したツール事例
ネットワークコマンド入力に対応したツール事例
fumoto kazuhiro
そうだRTシェーダをはじめよう
そうだRTシェーダをはじめよう
fumoto kazuhiro
SA09 Realtime education
SA09 Realtime education
fumoto kazuhiro
Taと歩くgdc2012 up
Taと歩くgdc2012 up
fumoto kazuhiro
Tart2011 Art sub
Tart2011 Art sub
fumoto kazuhiro
Cedec taラウンドテーブル プログラマー編
Cedec taラウンドテーブル プログラマー編
fumoto kazuhiro
Gdc2011報告会用 fumotokz
Gdc2011報告会用 fumotokz
fumoto kazuhiro
Cyma gdc2011 tabc報告
Cyma gdc2011 tabc報告
fumoto kazuhiro
物理ベースの絵作りのための基礎
物理ベースの絵作りのための基礎
fumoto kazuhiro
海外Ta事情から日本のta像について考えてみる
海外Ta事情から日本のta像について考えてみる
fumoto kazuhiro
Dccツール別リアルタイムシェーダの環境
Dccツール別リアルタイムシェーダの環境
fumoto kazuhiro
データフロー自動化ツールの考え方
データフロー自動化ツールの考え方
fumoto kazuhiro
第一回テクニカルアーティストラウンドテーブル・セッション
第一回テクニカルアーティストラウンドテーブル・セッション
fumoto kazuhiro
Mehr von fumoto kazuhiro
(16)
TAと歩くGDC2013報告会資料
TAと歩くGDC2013報告会資料
Siggraph2012報告会前半
Siggraph2012報告会前半
究極のバッチフレームワーク(予定)
究極のバッチフレームワーク(予定)
ネットワークコマンド入力に対応したツール事例
ネットワークコマンド入力に対応したツール事例
そうだRTシェーダをはじめよう
そうだRTシェーダをはじめよう
SA09 Realtime education
SA09 Realtime education
Taと歩くgdc2012 up
Taと歩くgdc2012 up
Tart2011 Art sub
Tart2011 Art sub
Cedec taラウンドテーブル プログラマー編
Cedec taラウンドテーブル プログラマー編
Gdc2011報告会用 fumotokz
Gdc2011報告会用 fumotokz
Cyma gdc2011 tabc報告
Cyma gdc2011 tabc報告
物理ベースの絵作りのための基礎
物理ベースの絵作りのための基礎
海外Ta事情から日本のta像について考えてみる
海外Ta事情から日本のta像について考えてみる
Dccツール別リアルタイムシェーダの環境
Dccツール別リアルタイムシェーダの環境
データフロー自動化ツールの考え方
データフロー自動化ツールの考え方
第一回テクニカルアーティストラウンドテーブル・セッション
第一回テクニカルアーティストラウンドテーブル・セッション
Kürzlich hochgeladen
ゲーム理論 BASIC 演習106 -価格の交渉ゲーム-#ゲーム理論 #gametheory #数学
ゲーム理論 BASIC 演習106 -価格の交渉ゲーム-#ゲーム理論 #gametheory #数学
ssusere0a682
生成AIの回答内容の修正を課題としたレポートについて:お茶の水女子大学「授業・研究における生成系AIの活用事例」での講演資料
生成AIの回答内容の修正を課題としたレポートについて:お茶の水女子大学「授業・研究における生成系AIの活用事例」での講演資料
Takayuki Itoh
ゲーム理論 BASIC 演習105 -n人囚人のジレンマモデル- #ゲーム理論 #gametheory #数学
ゲーム理論 BASIC 演習105 -n人囚人のジレンマモデル- #ゲーム理論 #gametheory #数学
ssusere0a682
UniProject Workshop Make a Discord Bot with JavaScript
UniProject Workshop Make a Discord Bot with JavaScript
yuitoakatsukijp
The_Five_Books_Overview_Presentation_2024
The_Five_Books_Overview_Presentation_2024
koheioishi1
東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2
東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2
Tokyo Institute of Technology
TokyoTechGraduateExaminationPresentation
TokyoTechGraduateExaminationPresentation
YukiTerazawa
Kürzlich hochgeladen
(7)
ゲーム理論 BASIC 演習106 -価格の交渉ゲーム-#ゲーム理論 #gametheory #数学
ゲーム理論 BASIC 演習106 -価格の交渉ゲーム-#ゲーム理論 #gametheory #数学
生成AIの回答内容の修正を課題としたレポートについて:お茶の水女子大学「授業・研究における生成系AIの活用事例」での講演資料
生成AIの回答内容の修正を課題としたレポートについて:お茶の水女子大学「授業・研究における生成系AIの活用事例」での講演資料
ゲーム理論 BASIC 演習105 -n人囚人のジレンマモデル- #ゲーム理論 #gametheory #数学
ゲーム理論 BASIC 演習105 -n人囚人のジレンマモデル- #ゲーム理論 #gametheory #数学
UniProject Workshop Make a Discord Bot with JavaScript
UniProject Workshop Make a Discord Bot with JavaScript
The_Five_Books_Overview_Presentation_2024
The_Five_Books_Overview_Presentation_2024
東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2
東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2
TokyoTechGraduateExaminationPresentation
TokyoTechGraduateExaminationPresentation
Kansai cedec 2015_fumoto
1.
Technical Artist Bootcamp
2015 vol.1 1
2.
Introduction • Technical Artist
Bootcamp とは • テクニカルアーティストの能⼒力力を強化するための講座のような もの • Bootcampとは「基礎訓練」を意味するが、基礎だけではな く、応⽤用的な内容なども幅広く取り扱っていく • 今年年より開催し、賛同者を募りながら、毎年年、継続的に開催し ていきたい 2 一番最初に、テクニカルアーティストブートキャンプのイントロダクションを紹介させていただきます。 講演の内容はテクニカルアーティストの能力を強化するための講座風プレゼンテーションです。 ブートキャンプという言葉は基礎訓練とう意味ですが、このシリーズは基礎から応用まで幅広く取り扱っていきます。今回は基礎で。初級編と位置付けています。 もともとGDCでも開催されているものですが、CEDECとして今年から開催し、賛同者を募りながら、毎年各地で継続的に開催していきたいと考えていますので、この セッションがおわって、「自分もできそう・・・」「ネタ持ってるよ」と思われた方は是非ともご一報ください。 講演希望でなくてもTAのコミュニティとしても活動しておりますので、情報交換にも役立てると思います。
3.
Technical Artist Bootcamp
2015 vol.1 • 前半「ノードベースリアルタイムシェーダ表現学習」 麓 ⼀一博(30分) • 後半「インスタント・アルベドチャート作成」 久禮禮 義⾂臣(30分) 3 それでは今年最初のCEDEC TABootcampの講演内容は、まず私が初級編としてノードベースリアルタイムシェーダ表現学習を30分。 後半は久禮さんによる、インスタントアルベトチャート作成と題して30分のご講演という流れでいきたいと思います。
4.
講演者情報 • 所属チーム -‐‑‒
株式会社セガ ソリューション本部 開発技術部 技術開発課 ツールチーム • 仕事(⾃自分の役割) -‐‑‒ SoftimageやMayaをベースとしてツール、表現⼿手法、ワークフローのサポート、提案(元デザ イナーのテクニカルアーティスト) • 登壇経験など -‐‑‒ CEDEC2012:バイナリードメインにおけるモーションワークフローの作り⽅方 (CeDiL) -‐‑‒ 他TAラウンドテーブル、TABootcampコーディネート • 寄稿「デジタルゲームの技術」「ゲームクリエイターが知るべき97の事」 • Facebook等でTAコミュニティ 4 講演者情報
5.
「初〜~中級編」ノードべースRTシェーダ表現学習 5 Autodesk Maya ShaderFx それでは早速ノードべースRTシェーダ学習をやってみたというタイトルでセッションを始めさせていただきます。 画面をみてお分かりかと思いますが、今回はMaya2015で導入された、もともとMayaLTの方に入っていたShaderFxの機能を使って学習するというのを試してみましょ う。 前回札幌CEDECでは軽くUE4のノードツリーシェーダの動画を紹介したのですが、変化をつけるために今回はMayaにしてみました。 初級∼中級編とかいてありますが、どちらかというと導入編。と位置付けたほうがちょうどいいかもしれません。 それではこれを前置きとして・・・
6.
アジェンダ ✓ 前置き ✓
1: 準備「シェーダの表現学習に⾏行行く前に把握しておくこ と」 ✓ 2: 考察「取り扱うデータの種類や関数とノードについて」 ✓ 3: 実践 ✓ 4: まとめ 6 本日のアジェンダです。 1: 準備「シェーダの表現学習に行く前に把握しておくこと」 2: 考察「取り扱うデータの種類や関数とノードについて」 3: 実践 4: まとめ という順でご紹介します。今日のキモは実践の部分ですのでそれまでは軽く流していきます。
7.
準備「シェーダの表現学習に⾏行行く前に把握しておくこと」 • MayaのShaderFxの使い⽅方と設定⽅方法 プラグインマネージャーで「dx11shader.mll」の チェックを確認 7 まずはMayaでShaderFxを組むための準備ですが、ネットで検索するとAutodeskさんオフィシャルやDFTalkさんとかそこそこ情報が出てくるので省略しながら行きます。 まず、プラグインマネージャーでdx11shaderのプラグインのチェックをONにします。
8.
準備「シェーダの表現学習に⾏行行く前に把握しておくこと」 • MayaのShaderFxの使い⽅方と設定⽅方法 8 ハイパーシェードから・・・ ★ShaderFx
Shaderを作成して、 ★オブジェクトにドロップで適用し、 ★アトリビュートエディタのOpen ShaderFxボタンを押して ★ShaderFxウィンドウを開きます
9.
準備「シェーダの表現学習に⾏行行く前に把握しておくこと」 • MayaのShaderFxの使い⽅方と設定⽅方法 ShaderFxウィンドウのSettingsで「Show
Property Panel」と「Toggle Advanced Mode」のチェックを ONにする 9 ShaderFxウィンドウのSettingsで、ウィンドウ内にプロパティを表示できる「Show Property Panel」と、プリセットではなく細かくノードをつなぐことができる 「Toggle Advanced Mode」のチェックをONにします。 新規に1からシェーダを組んでいくときは、画面上のノードツリーは全て削除しておきましょう。
10.
考察「取り扱うデータの種類や関数とノードについて」 • Applicationから頂点シェーダへ⼊入⼒力力するデータ、頂点シェーダ からpixelシェーダへ出⼒力力するデータ(セマンティクス) •
Position(頂点) • Normal • Color • UV(TEXCOORD) • ・・・ 10 MS DevNet セマンティクス (DirectX HLSL) Applicationから頂点シェーダへ入力するデータ、頂点シェーダからpixelシェーダへ出力するデータなどなど、計算されたデータを色々なところへ持っていくために必要 な名前というかお約束があります。 それらをセマンティクスというのですが、どういうデータがやり取りできるかは例えば右のQRコードの先にあるMSのHLSLのセマンティクスのサイトで参照してみてく ださい。
11.
考察「取り扱うデータの種類や関数とノードについて」 • 複雑な関数はノードになっている •
dot Product • sin, cos, tan • clamp • Multiply • Normalize • pow • etc… 11 MS DevNet 組み込み関数 (DirectX HLSL) ここがシェーダが割と簡単に覚えられるようになっている重要な点ですが、複雑な計算式は関数で呼べるようにになっています。 ShaderFxではこれらがノードという一つの塊になっていて、そこにデータを入れる(オペレーション的にはつなぐ)だけで計算された結果が簡単に得られます。 どの関数がどういう役割を意味しているかは右側のQRコードのサイトを参照してみてください。 関数名とMayaのノード名が違うこともあるのでどれがどれに当たるのかを探すので苦労するかもしれませんが、全体の数はそんなに多くないので覚えてしまえばこっち のものです。
12.
考察「取り扱うデータの種類や関数とノードについて」 • とりあえずシェーダ学習ができるところまで組んでみた 12 World View
Prj Vertex Position と言ったようなことを念頭に置いて、とりあえずシェーダ学習ができるところの最低限の所まで組んでみました。このほかにもアルファブレンディングの設定をしたいな ら、State SettingsをPassにつなぐとか色々ありますが、やはりDFTalkさんがやってくれているので細かいところはそういうところを参照してください。 ここからは、PSと書いてあるピクセルシェーダのColorのところへシェーダで求められた結果をピクセル単位の色として戻すことで表現をしていきます。 上段の頂点シェーダの方で計算したほうが処理が軽いとか、最適化を考えると上段の頂点シェーダも使いますが、まずは学習なのでピクセルシェーダで行います。
13.
3: 実践 13 ここまで組んだ段階でこんな風に青い玉が表示されていれば準備は完了です。
14.
3: 実践 1.内積でランバート〜~応⽤用 2.反射ベクトルとスペキュラー
3.CubeMap 4.マトリクスからのUVで貼るテクスチャ 5.シェーディングマップ 14 さてそれでは、実際にシェーダを組んでどういう仕組みで絵が作られているのか学習していくわけですが、今回は時間が短いのでほんの一部ということで、 内積でランバート∼応用 反射ベクトルとスペキュラー CubeMap マトリクスで貼るテクスチャ トーンマップ の、5項目を取り上げてみました。 この順で取り組んでみると、ちゃんと1項目前にやったことが生きるという積み上げ型の学習が出来ます。
15.
3: 実践 • 内積でランバート〜~応⽤用
• 内積:ベクトルが2〜~3次元の場合⼆二つのベクトルの⽅方 向⾓角度度の違いを1〜~ー1で返す計算式(個⼈人的な解釈) • N・L = |N||L|cosθ (N=Normalvec, L=Lightvec) • ↑Dot Productを使う 15 =1 =0 =ー1 まずは何よりも光と影を表現しなければいけません。 ライトが当たるところは明るく、反対側は暗いというシンプルな現象を近似で表現することができて一番長く使われている式が内積でのランバート表現です。 内積でベクトルの解を求めると、二つのベクトルの方向の違いを−1∼1で求めることができ、それを単純に色に置き換えたというのがランバートです。 公式が書いてありますが左側の解にNとLの間にドットが使われています。 そこからも関数名がdotということになり、どのシェーダ言語にも用意されている関数です。 シェーダ言語が変わっても、たとえノードツリー型になっても、まず最初に探すのはdot productという点を覚えておいてください。
16.
3: 実践 • 内積でランバート〜~応⽤用
ShaderFxツリー 16 内積 dot(L,N); 早速シェーダツリーで組んでみました。 ShaderFxにもちゃんとDotOpという内積ノードがあるので、その入力へライトベクトルとワールドの法線ベクトルをつなぎ、その結果を色で返した結果が一番単純なラ ンバートになります。
17.
3: 実践 • 内積でランバート〜~応⽤用
動画 17 見た目はつまらない、いつもビューポートで眺めている景色ですが、このシェーディングがちゃんと自分で組んだノードの結果が表示されているという点を意識してく ださい。 ここにRGBの色を乗算すると、一般的なランバートマテリアルが作成できます。
18.
3: 実践 • 内積でランバート〜~応⽤用
• ハーフランバート=光の数が多かったり、⽪皮下散乱など を簡易易的に表現するために、ランバートの明るい範囲を 拡張したもの 18 =1 =0 =ー1 =1 =0.5 =0 ランバート ハーフ ランバート ランバートの応用例の一つで、ハーフランバートというものがあります。 10年位前ですかね、ネット記事に出てきたのはハーフライフだったような記憶がありますが、通常のランバート計算だとライトが1方向からしか当たっていないような 表現になってしまうのに対して、世の中の光源は一つではないですよね?というのを例に提唱されたのがこの手法でした。 本来は0以下は色的には黒なので0以下をクランプして切り捨てるのですが、ハーフランバートに応用するためにさっきはあえて残しておきました。 図の上の結果を下の結果にするために必要なのは簡単な掛け算足し算で、関数とかは必要ありません。 上の図のランバートの結果に0.5をかけて、0.5を再度足すだけで求められます。
19.
3: 実践 • 内積でランバート〜~応⽤用
ハーフランバートShaderFxツリー 19 ×0.5 +0.5 ランバートのシェーダツリーの結果にまずMultiplyという掛け算ノードを繋いで0.5をかけて、その結果に足し算ノードを繋いで、0.5を足しています。 0.5という数値ノードは両方で同じ値を使うので、使い回しています。
20.
3: 実践 • 内積でランバート〜~応⽤用
ハーフランバート動画 20 ネットでハーフランバートを検索すると、この単純なかけて足す方法と、さらにそのあとに2乗するという方法が出てきます。 2乗するとガンマカーブをいじったような少し黒い部分が広がるイメージのハーフランバートが出来上がりますが、今回は後で使いたいので今は2乗しないものでとどめ ておきます。
21.
3: 実践 • 反射ベクトルとスペキュラー
• 反射ベクトル:⼆二つのベクトルの⼀一⽅方を進⾏行行ベクトルと した場合、壁で反射した⽅方向を求められる。 • 進⾏行行ベクトルを視線ベクトル、壁と直⾏行行するベクトルを 法線ベクトルとする(計算式省省略略) • 反射ベクトル=reflect(N,E) • スペキュラー輝度度はさらに反射ベクトルとライトベクト ルの内積で求める 21 ランバートの表現が終わったところで次は「キラッと反射」のスペキュラーへ移ります。 スペキュラーの表現は幾つかあるのですが、今回は反射ベクトルを使った方法で表現してみます。 反射ベクトルは進行ベクトルのものが、壁に当たって跳ね返る反射先のベクトルを求めるというもので、進行ベクトルを視線のベクトル。そして壁の表向きを法線ベクト ルに置き換えて、reflect();という関数をシェーダでは使います。 さらにスペキュラーのライティングはもう一段階あって、ランバート同様に輝度の1∼0値に置き換える必要があります。 ということで反射ベクトルとライトベクトルの内積で求められます。
22.
3: 実践 • 反射ベクトルとスペキュラー
ShaderFx 22 反射ベクトル 内積 スペキュラーをノードツリーにしたものがこれです。 視線ベクトルは取得の仕方によりますが、カメラベクトルから取得すると向きが逆なので、反転させて、法線ベクトルとの二つから反射ベクトルを計算しています。 そしてライトが反射してキラッとしているので、反射ベクトルとライトベクトルの内積でスペキュラーの輝度を決定しています。
23.
3: 実践 • 反射ベクトルとスペキュラー
動画 23 動画を見るとこんな感じです。 これも見慣れた結果ですが、同様に自分で組んで表現できていることが重要です。
24.
3: 実践 • 反射ベクトルとスペキュラー
ShaderFx 24 また、スペキュラーのサイズを調整する方法は一番簡単な「べき乗」を使います。 内積の結果にpowノードをつなぎ、べき乗する値を設定します。 左の60という値に対して、右側が結果のスペキュラー光沢のサイズになります。 物理ベースでいうとこの状態は表面がツルツルになって行き、反射率が高くなってきているということですね。 ライトの形がそのまま反射すると、小さい点になっていくという近似値の考え方です。
25.
3: 実践 • Cubemap
• 9枚のテクスチャ(1つのdds)を使って反射を表現する • texCube(cubemap, uvw) →ノード名は「Texture Sampler」 • uvwに法線ベクトルを⼊入れるとDiffuse、反射ベクトル をいれるとSpeculerの反射になる 25 ここまでのものは従来のマテリアルで、真っ黒い空間にライトが焚かれているだけというものの近似表現でした。 実際の空間には周りにいろんなものが置いてあって、それらの影響を受けていろんな色が表面に写り込んでいる、究極がイメージベースドライティングということになり ますが、それの基礎表現に用いられるものがCubemapです。 そもそもテクスチャの解説を省略していますが、口頭でいうとテクスチャをオブジェクトに貼るには、ピクセルの情報と、オブジェクトのUV値が必要なのですが、 Cubemapではモデル製作者がUVを決めるわけではありません。 UV値には今まで求めたそれぞれのベクトルを使用し、法線ベクトルを使うとDiffuseで、反射ベクトルを入れるとSpeculerということになります。 シェーダ言語などで使われる関数はtexCubeというものですが、ShaderFxではTexture Samplerとちょっと名前が違うノードが用意されています。
26.
3: 実践 • Cubemap
ShaderFx 26 Texture Component Texture Sampler Texture Type シェーダツリーは反射ベクトルを使う場合です。もともとこのツリーにも法線ベクトルがすでにあるので、Diffuseを見たい場合は繋ぎ直してください。 テクスチャのつなぎ方は、シェーダ言語のお約束の範囲なので少々癖があります。 まずTexture Componentというノードを使い、テクスチャファイルを取得します。 テクスチャの画像情報をSamplerStateを通して、TextureSamplerノートへとつなぎます。 これらのノードのテクスチャタイプはTextureTypeノードを繋げて設定します。 最後にTexture SamplerノードのUV Texcoordsのポートにスペキュラーで求めた反射ベクトルが接続されていることにご注目ください。
27.
3: 実践 • Cubemap
動画 27 例によって見慣れたキューブマップの様子ができあがります、動画を御覧ください。 上から見たらちゃんと空が、下から見たらちゃんと地面が反射しています。 そして、反射ベクトルが繋がっているポートに法線ベクトルをつなぎ直すと、今度は拡散反射用のキューブマップへ変化します。
28.
3: 実践 • シェーディングマップ
• シェーディング表現にテクスチャを使う • tex2D(texturemap, uv) →ノード名は「Texture Sampler」 • uvにハーフランバートを適⽤用することで、シェーディ ングをUVとしたテクスチャが貼られる。 28 またさらに、途中段階を省略していますが、シェーディングマップというのをご存知でしょうか? トゥーンシェーディングなど、陰影のシェーディング階調をテクスチャで持ちたい(アーティスティックにコントロールしたい)という場合によく用いられる手法で、ノ ンフォトの基本中の基本のようなものです。 前に紹介したハーフランバートを活用します。 例えばキューブマップはベクトルをテクスチャ展開に使うことで動的にテクスチャを貼っていたのですが、次はこのハーフランバートの結果をUV展開に使うことで、テ クスチャの画像座標の0がハーフランバートの0、1もそのまま1として貼り付けられます。 この場合は二次元としてテクスチャを展開するだけなので、tex2D関数をつかいますがそのままの名前のノードがShaderFxにはありません。 Cubemap同様にTexture Samplerという名前のノードを使います。
29.
3: 実践 • シェーディングマップ ShaderFx 29 ハーフランバート Texture
Sampler Type=2D ツリーが大きくなってだんだん苦しくなってきました。 ハーフランバートの結果をUVのU値にしてTexture SamplerのUVへつなぎます。 テクスチャファイルからTexture Samplerまでの流れはCubemapと一緒ですが、TextureTypeの指定はTexture2Dとしておきます。 テクスチャの座標は左が0で右が1ですが、ハーフランバートそのままだと逆に明るい方が1で暗い方が0となってしまいますので、計算結果を1から引いて、明暗の方 向を反転させています。 そうすることで、テクスチャの左側が明るい色、右側が暗い色という自然な流れでグラデーションをかけるようになります。
30.
3: 実践 • シェーディングマップ Texture
Space 30 UV=0 U=1 UV=1V=1 ちなみにテクスチャスペースは左下がUV0位置で右上がUV1の位置という点を覚えておくと、ただのグラデーションマップよりも表現力を上げることができるかもしれま せん。 Mayaの標準UV値と同じ設定なので間違えることは無いとは思います。
31.
3: 実践 • シェーディングマップ
動画 31 結果、テクスチャの緑の方がライトの方向で明るい側、赤い部分が暗い側という表現になります。 テクスチャをそれっぽい白黒グラデーションに変えると、普通のランバートっぽくなりますし、水彩階調っぽく描いたものに変えることで、カートゥーン表現も出来るよ うになります。
32.
4: まとめ • 表現の仕組みがわかると次への応⽤用が⾒見見えて来る
• ⾃自分で特殊な表現の実験ができる • どういうリソースを⽤用意すればいいかを知ることができる • 結果、⾼高い表現に効率率率の良良いワークフローを構築できる 32 時間の関係で今回紹介する方法はこれだけですが、一つ一つ表現方法の仕組みがわかるだけで、ほかの表現の応用を思いついたり、どうやって動いているのかが見えて 来るのが伝わりましたか? また、自分でシェーダが組めるようになると、あの表現はどうだろう。こういう表現がしたい。等プログラマの手を煩わせる前に自分で実験をすることができるように なり、うまくシナプスが繋がっていい表現ができたらそれにどういうリソースが必要かを知ることができます。 結果として自分がやりたかった表現に効率の良いワークフローを構築することができるようになりますので、テクニカルアーティストの皆さんは是非とも簡単なシェーダ だけでも自分で作れるようになっておくことをお勧めします。
33.
最後に • facebookのTAラウンドテーブルグループ 33 TechnicalArtist's Rountable
JP 最後にfacebookのTAラウンドテーブルのグループを紹介しておきます。 今後のTAブートキャンプへの要望や、こういうネタはどうだろう?とか、今回の質問事項と続きが見たいとかそういった投稿でもいいのでご自由に使ってください。
34.
ご静聴ありがとうございました。 34 ご静聴ありがとうございました。
Jetzt herunterladen