ゲームエフェクトデザイナーのブログ | A Real-Time VFX Artist's Blog

About Making Materials on UE, Making Tools with C#, etc

数学が苦手な人向けのCG数学シリーズ

少し前の私のように「数学の知識が中学生止まり」だけど「テクニカルアーティスト方面に興味があって3DCGで知ってると便利な数学を理解したい」人向けに、私が学習を経て理解していった部分を備忘録を兼ねてメモしておきたいと思います。

ターゲットは数学が苦手なCGアーティストです。

ただし、数学をちゃんと勉強してきた方や今現在で活用している方にとっては「初学者はこういうところで躓くのか‥」といったあたりで参考になるかも知れません。。

CGをやっていると、数学の利用目的がハッキリしている(シェーダーの計算とか3Dソフト内のツール制作とか)ためモチベーションが維持しやすいのと、覚えたことをスクリプト等ですぐに試せるので、1つの関数を知ると表現できることがぐっと増えるのを体感できて非常に楽しめます!
これは我々の特権というやつではないでしょうか。

例えば、pythonのような言語が扱えなくても、社会人なら誰しもが日常から慣れ親しんでいるエクセルのセル内に関数を使って計算式を書けば、とてもお手軽に計算を試せます。xy座標から角度を出したり、逆に角度と長さからxy座標を出したり‥

そうやって試してみることと楽しむことが習熟の近道な気がします。

今からでも遅くありません。あなたも、ぜひ!

目次


中学レベルで必要な知識について
 ・四則演算
 ・分数の計算
  ・通分と約分
  ・分数の割り算を掛け算に変換すること
 ・式の展開
 ・ルート(√ / 平方根)と三平方の定理
 ・パイ(π / 円周率)

割り算の3つの考え方 
 ・A ÷ Bの場合‥
  ・AをB等分する
  ・AにBが何個入るか
  ・Bに対してAの割合

パーセンテージと割合と単位
 ・100%は1、50%は0.5(百分率と割合)
  ・RGBA値もUVもfloatなら0~1が基本の範囲になる
  ・xyz座標のグリッドのメモリは単位とも言える
 ・最大の値に割合をかけると現在の値が分かる
  ・三角関数の理解に繋がる
 ・何かの単位の最大値を、1を100%とした単位にするなら1に対して割る
  ・1日24時間なので 1 ÷ 24 = 0.041666..
   つまり「1時間は 0.041666..日」になる

「三角形の合同条件と三角関数
 ・三角形の合同条件は?
 ・なぜ直角三角形なのか?
 ・xyのグラフと単位円での考え方
 ・sinによる高さの求め方、cosによる底辺の求め方
 ・プログラムでのsin関数とcos関数
 ・余弦定理

「エクセルのセル内で計算してみる 1」
 ・四則演算、乗数、ルート、パイ
 ・sin、cos

「度数とラジアン
 ・ラジアンとは
  ・3DCGの内部の角度計算では360°みたいな度数は使われないらしい
   なのでラジアンと度数を変換する必要がある場面に遭遇する
   (ユーザーが入力したり表示するのは度数、計算はラジアンで行うなど)
 ・プログラムでのラジアン関数
  ・度数をラジアンに変換、ラジアンを度数に変換
  ・パイ関数とラジアン関数を使ったパイの求め方

三平方の定理とアークタンジェント
 ・三平方の定理でxy座標から斜辺の長さを出す
 ・xy座標からアークタンジェントで角度を出す
 ・底辺の長さと角度から斜辺の長さを出す
 ・プログラムでのルートとアークタンジェント

「正規化」
 ・正規化(ノーマライズ)とは
 ・A ÷ A のように同じ値で割ると正規化できる

「ベクトル」
 ・ベクトルは向きと大きさ
  ・角度と半径で表せるし、原点からのxy座標でも表せる
 ・座標とベクトルとスカラー
 ・ゴールから現在地を引くと距離が分かる例
 ・単位ベクトルは正規化したベクトルのこと

内積
 ・内積とは
 ・結果はベクトルではなくスカラー
 ・正規化した内積の利用
  ・Lambertの拡散反射率の例、45度は0.5じゃないよという話

「エクセルのセル内で計算してみる 2」
 ・ルート(sqrt)、アークコサイン(acos)、アークタンジェントatan2
 ・2つのベクトルをなす角を求めてみる

外積
 ・外積とは
 ・結果は内積とは違ってベクトル
 ・外積の利用
  ・平面から垂直な法線を求める例

「行列」
 ・行列とは
 ・座標の移動とスケールと軸に対する反転
 ・座標変換(ワールド座標とローカル座標みたいな)
 ・回転行列
  ・理解のための三角関数の加法定理

「いろいろな記号」
 ・シグマ(Σ) は for 文
  5分で分かる!総和記号「Σ(シグマ)」の計算方法 | あぱーブログ
 ・ファンクション( f ) は関数
  関数f(x)[意味・使い方・読み方] / 数学I by ふぇるまー |マナペディア|
 ・---

GDC Vault にアップされている GDC2018 の動画&スライドを一部ピックアップ

GDC Vault に動画やスライド資料がアップされたので、大型タイトル関連の講演を中心にピックアップしてみました。

ただしアニメーション・AI・自動テスト・ビジネス寄りのものなどはほぼ取り上げていません(★が付いているものは有料のもの)。

 

ゲームデザイン

'ARMS': Building 'Mario Kart 8' Insights into a Showcase Nintendo Switch Fighter(Nintendo)
https://www.gdcvault.com/play/1024907/-ARMS-Building-Mario-Kart
http://www.4gamer.net/games/368/G036834/20180322118/
マリオカートの経験を活かしたARMSの開発について(プロデューサー視点)

'Monster Hunter: World' Postmortem: Concept Design through Prototyping and Iteration(Capcom
https://www.gdcvault.com/play/1024981/-Monster-Hunter-World-Postmortem
http://www.4gamer.net/games/384/G038423/20180323098/
https://www.famitsu.com/news/201803/23154202.html
モンハンワールドの検証時の動画たっぷり

'Splatoon' and 'Splatoon 2': How to Invent a Stylish Franchise with Global Appeal(Nintendo)
https://www.gdcvault.com/play/1024999/-Splatoon-and-Splatoon-2
http://www.4gamer.net/games/368/G036835/20180322116/
スプラトゥーンの誕生秘話

A Fun Time in Which Some No-Good Game Developers May or May Not Discuss How We Made 'NieR:Automata'(Independent)
https://www.gdcvault.com/play/1024894/A-Fun-Time-in-Which
http://www.4gamer.net/games/353/G035315/20180322055/
ニーアオートマタのアクションとゲームにおける「自由」の話

Character Development in Non-Linear Spaces(Naughty Dog
https://www.gdcvault.com/play/1024926/Character-Development-in-Non-Linear
https://www.gdcvault.com/play/1025459/Character-Development-in-Non-Linear
キャラクターとユーザー体験

Classic Game Postmortem: 'Ultima Online'(Portalarium)
https://www.gdcvault.com/play/1024930/Classic-Game-Postmortem-Ultima-Online
http://www.4gamer.net/games/005/G000570/20180326044/
Ultima Online」のポストモーテム

Classic Game Postmortem: 'Sonic the Hedgehog'(Arzest Corporation / Unity Technology Japan)
https://www.gdcvault.com/play/1024928/Classic-Game-Postmortem-Sonic-the
https://www.gdcvault.com/play/1025496/Classic-Game-Postmortem-Sonic-the
http://www.4gamer.net/games/999/G999905/20180322115/
ソニック誕生秘話

'For Honor': From a Great Launch to a Challenging Live Period(Ubisoft
https://www.gdcvault.com/play/1024949/-For-Honor-From-a
For Honorのベータから発売後1年目までの話

'Horizon Zero Dawn': A Game Design Postmortem(Guerrilla Games)
https://www.gdcvault.com/play/1024963/-Horizon-Zero-Dawn-A
ホライゾンの振り返り 検証動画など

Intelligent Game Design on 'Rainbow Six Siege'(Ubisoft, Ubisoft Montreal)
https://www.gdcvault.com/play/1025166/Intelligent-Game-Design-on-Rainbow ★
https://www.gdcvault.com/play/1025322/Intelligent-Game-Design-on-Rainbow
https://www.gdcvault.com/play/1025323/Intelligent-Game-Design-on-Rainbow
データに基づくゲームデザイン

10 Years of Evolution of the 'Assassin's Creed' Brand(Ubisoft
https://www.gdcvault.com/play/1024890/10-Years-of-Evolution-of
http://www.4gamer.net/games/384/G038410/20180324011/
アサシンクリードシリーズ10年の振り返り


レベルデザイン

Level Design Workshop: Invisible Intuition: Blockmesh and Lighting Tips to Guide Players and Set the Mood(Naughty Dog / NYU Game Center)
https://www.gdcvault.com/play/1025179/Level-Design-Workshop-Invisible-Intuition ★
https://www.gdcvault.com/play/1025529/Level-Design-Workshop-Invisible-Intuition
https://www.gdcvault.com/play/1025360/Level-Design-Workshop-Invisible-Intuition
レベルデザインにおけるライティングによる視線誘導の話

Plot and Parcel: Procedural Level Design in 'XCom 2'(Firaxis Games)
https://www.gdcvault.com/play/1025387/Plot-and-Parcel-Procedural-Level
コストを最小限に抑えながらAAAタイトルのレベルを作る

EXPLORING HIDDEN STORIES IN THE WORLD OF 'XCOM 2'(Firaxis Games)
https://gdcvault.com/play/1024943/Exploring-Hidden-Stories-in-the
http://www.4gamer.net/games/303/G030325/20180326027/
自動生成マップに隠されたストーリー


■アート

Art Direction Bootcamp: A No Nonsense Approach to Designing Robot Dinosaurs(Guerrilla Games)
https://www.gdcvault.com/play/1025049/Art-Direction-Bootcamp-A-No ★

Art Direction Bootcamp: Artistry in a New Medium: 'Lone Echo' and the Magic of VR(Ready at Dawn)
https://www.gdcvault.com/play/1025050/Art-Direction-Bootcamp-Artistry-in ★
https://www.gdcvault.com/play/1025438/Art-Direction-Bootcamp-Artistry-in

Art Direction Bootcamp: Inspiring Creativity through Internal Game Jams(Riot Games)
https://www.gdcvault.com/play/1025051/Art-Direction-Bootcamp-Inspiring-Creativity ★

Art Direction for AAA UI(DICE LA)
https://www.gdcvault.com/play/1025498/Art-Direction-for-AAA

Art Direction: Escaping Your Comfort Zone(Ubisoft
https://www.gdcvault.com/play/1025053/Art-Direction-Escaping-Your-Comfort ★

Between Tech and Art: The Vegetation of 'Horizon Zero Dawn'(Guerrilla Games)
https://www.gdcvault.com/play/1025066/Between-Tech-and-Art-The ★
https://gdcvault.com/play/1025530/Between-Tech-and-Art-The

Breaking Through: Psychosis and the Making of 'Hellblade'(Ninja Theory, Ltd.)
https://www.gdcvault.com/play/1024922/Breaking-Through-Psychosis-and-the
http://www.4gamer.net/games/342/G034272/20180331001/

Bridging the Gap Between UX Principles and Game Design(Epic Games
https://www.gdcvault.com/play/1025073/Bridging-the-Gap-Between-UX ★
https://www.gdcvault.com/play/1025393/Bridging-the-Gap-Between-UX

Creating Living, Breathing Key Art for Your Front-End(Ubisoft
https://www.gdcvault.com/play/1025092/Creating-Living-Breathing-Key-Art ★

Procedural World Generation of 'Far Cry 5'(Ubisoft
https://www.gdcvault.com/play/1025215/Procedural-World-Generation-of-Far ★

Repopulating the Earth: Character Production on 'Horizon Zero Dawn'(Guerrilla Games)
https://www.gdcvault.com/play/1024992/Repopulating-the-Earth-Character-Production

Spline-Based Procedural Modeling in 'Agents of Mayhem'(Deep Silver Volition )
https://www.gdcvault.com/play/1025244/Spline-Based-Procedural-Modeling-in ★

Technical Artist Bootcamp: Contributing to Open Source(Volition)
https://www.gdcvault.com/play/1025253/Technical-Artist-Bootcamp-Contributing-to ★
https://www.gdcvault.com/play/1025253/Technical-Artist-Bootcamp-Contributing-to

Technical Artist Bootcamp: Identifying Technical Art by Its Habits(Unity Technologies)
https://www.gdcvault.com/play/1025254/Technical-Artist-Bootcamp-Identifying-Technical ★
https://www.gdcvault.com/play/1025543/Technical-Artist-Bootcamp-Identifying-Technical

Technical Artist Bootcamp: Learning an Established Content Creation Pipeline, Workflow and Codebase(Bio Ware)
https://www.gdcvault.com/play/1025255/Technical-Artist-Bootcamp-Learning-an ★
https://www.gdcvault.com/play/1025545/Technical-Artist-Bootcamp-Learning-an

Technical Artist Bootcamp: Procedural Islands of 'Dauntless'(Pheonix Labs)
https://www.gdcvault.com/play/1025256/Technical-Artist-Bootcamp-Procedural-Islands ★
https://www.gdcvault.com/play/1025541/Technical-Artist-Bootcamp-Procedural-Islands

Technical Artist Bootcamp: Production Values: Improving Quality, Longevity and Scalability(Creative Assembly)
https://www.gdcvault.com/play/1025257/Technical-Artist-Bootcamp-Production-Values ★
https://www.gdcvault.com/play/1025540/Technical-Artist-Bootcamp-Production-Values

Technical Artist Bootcamp: Shaders 301(Bio Ware) ※UE4のシェーダー
https://www.gdcvault.com/play/1025259/Technical-Artist-Bootcamp-Shaders ★
https://www.gdcvault.com/play/1025538/Technical-Artist-Bootcamp-Shaders

Texturing a Hyper-Reality Experience: Star Wars: Secrets of the Empire(ILMxLAB)

The Animation Pipeline of 'Mario + Rabbids Kingdom Battle'(Ubisoft
https://www.gdcvault.com/play/1025262/The-Animation-Pipeline-of-Mario

UI/UX for Creating Your Mobile Game in VR(MunkyFun)
https://www.gdcvault.com/play/1025293/UI-UX-for-Creating-Your ★


Substance

Allegorithmic's Keynote: What's New with Substance(Allegorithmic)
https://www.gdcvault.com/browse/gdc-18/play/1024843

Creating Photorealistic Procedural Materials with Substance Designer(Bungie
https://www.gdcvault.com/browse/gdc-18/play/1024844
https://www.youtube.com/watch?v=WNwtc-OeGQ0

Ruins of the Reich: Debris and Rubbles Pipeline in 'Wolfenstein 2' with Substance Designer(Allegorithmic)
https://www.gdcvault.com/browse/gdc-18/play/1024845

Substance Automation Toolkit: Building a Future-Proof Material Pipeline(Allegorithmic)
https://www.gdcvault.com/browse/gdc-18/play/1024846
https://www.youtube.com/watch?v=3EzEEnYHt3c

The Substance of Shadow of War(Red Storm Entertainment)
https://www.gdcvault.com/browse/gdc-18/play/1024847
https://www.youtube.com/watch?v=TeMCtK1llIM&index=1&t=0s&list=PLM8Mtt_RtLBOYrZVAljIndtk3GnnFb38T

 

■エフェクト

Frostbite GPU Emitter Graph System(Electronic Arts
https://www.gdcvault.com/play/1025132/Frostbite-GPU-Emitter-Graph ★

Real-Time VFX: A Visual Language Spectrum(FXVille )
https://www.gdcvault.com/play/1025230/Real-Time-VFX-A-Visual ★
https://www.gdcvault.com/play/1025507/Real-Time-VFX-A-Visual

The Visual Effects Technology of 'Destiny'(Bungie
https://www.gdcvault.com/play/1025282/The-Visual-Effects-Technology-of ★
https://www.gdcvault.com/play/1025490/The-Visual-Effects-Technology-of

Translating Art into Technology: Physically Inspired Shading in 'Destiny 2'(Bungie
https://www.gdcvault.com/play/1025382/Translating-Art-into-Technology-Physically

Visual Effects Bootcamp: Autonomy in Real-Time Effects: Artist Driven Tools and Techniques for Large Scale Production(Epic Games
https://www.gdcvault.com/play/1025297/Visual-Effects-Bootcamp-Autonomy-in ★
https://www.gdcvault.com/play/1025520/Visual-Effects-Bootcamp-Autonomy-in

Visual Effects Bootcamp: How VR is Going to Break All the Rules in VFXEpic Games
https://www.gdcvault.com/play/1025298/Visual-Effects-Bootcamp-How-VR ★
https://www.gdcvault.com/play/1025470/Visual-Effects-Bootcamp-How-VR

Visual Effects Bootcamp: The Elementary Particles(Arkane Studios)
https://www.gdcvault.com/play/1025299/Visual-Effects-Bootcamp-The-Elementary ★

Visual Effects Bootcamp: The Thinking Process of Beautiful Design(Riot Games)
https://www.gdcvault.com/play/1025300/Visual-Effects-Bootcamp-The-Thinking ★
※スタイリッシュな手描きの炎!

Visual Effects Bootcamp: Zip! Thwack! Ping! Animation Principles of VFX(SideFX)
https://www.gdcvault.com/play/1025301/Visual-Effects-Bootcamp-Zip-Thwack ★
https://www.gdcvault.com/play/1025417/Visual-Effects-Bootcamp-Zip-Thwack


■ツール環境/その他

The Asset Build System of 'Far Cry 5'(Ubisoft Montreal)
https://www.gdcvault.com/play/1025264/The-Asset-Build-System-of ★
https://www.gdcvault.com/play/1025444/The-Asset-Build-System-of

Tools Tutorial Day: A Tale of Three Data Schemas(Electronic Arts
https://www.gdcvault.com/play/1025284/Tools-Tutorial-Day-A-Tale ★

Tools Tutorial Day: Bungie's Asset Pipeline: 'Destiny 2' and Beyond(Bungie
https://www.gdcvault.com/play/1025285/Tools-Tutorial-Day-Bungie-s ★
https://www.gdcvault.com/play/1025430/Tools-Tutorial-Day-Bungie-s

Tools Tutorial Day: Playtesting 'Overwatch'(Blizzard Entertainment
https://www.gdcvault.com/play/1025012/Tools-Tutorial-Day-Playtesting-Overwatch

Tools Tutorial Day: Shipping 'Call of Duty'(Infinity Ward)
https://www.gdcvault.com/play/1025286/Tools-Tutorial-Day-Shipping-Call ★
https://www.gdcvault.com/play/1025380/Tools-Tutorial-Day-Shipping-Call

Tools Tutorial Day: Workflow Driven Tools Design(Remedy Entertainment)
https://www.gdcvault.com/play/1025289/Tools-Tutorial-Day-Workflow-Driven ★


レンダリング

"Advances in Real-Time Voxel-Based GI" & "Temporal Super-Resolution" (NVIDIA
https://www.gdcvault.com/play/1024800/

Advanced Graphics Techniques Tutorial: "New Techniques for Accurate Real-Time Reflections" & "Memory Management in Vulkan and DX12"(Microsoft
https://www.gdcvault.com/play/1025029/Advanced-Graphics-Techniques-Tutorial-New ★
https://www.gdcvault.com/play/1025458/Advanced-Graphics-Techniques-Tutorial-New

Advanced Graphics Techniques Tutorial: GPU-Based Clay Simulation and Ray-Tracing Tech in 'Claybook'(Second Order)
https://www.gdcvault.com/play/1025030/Advanced-Graphics-Techniques-Tutorial-GPU ★
https://www.gdcvault.com/play/1025316/Advanced-Graphics-Techniques-Tutorial-GPU

Advanced Graphics Techniques Tutorial: The Elusive Frame Timing: A Case Study for Smoothness Over Speed(Croteam)
https://www.gdcvault.com/play/1025031/Advanced-Graphics-Techniques-Tutorial-The ★
https://www.gdcvault.com/play/1025407/Advanced-Graphics-Techniques-Tutorial-The

Advanced Graphics Techniques Tutorial: The Latest Graphics Technology in Remedy's Northlight Engine(Lemedy Entertainment)
https://www.gdcvault.com/play/1025032/Advanced-Graphics-Techniques-Tutorial-The ★
https://www.gdcvault.com/play/1025315/Advanced-Graphics-Techniques-Tutorial-The

Advanced Graphics Techniques Tutorial: Water Rendering in 'Far Cry 5'(Ubisoft Toronto)
https://www.gdcvault.com/play/1025033/Advanced-Graphics-Techniques-Tutorial-Water ★

Circular Separable Convolution Depth of Field(Electronic Arts
https://www.gdcvault.com/play/1025372/Circular-Separable-Convolution-Depth-of

Cluster Forward Rendering and Anti-Aliasing in 'Detroit: Become Human'(Quantic Dream)
https://www.gdcvault.com/play/1025084/Cluster-Forward-Rendering-and-Anti ★
https://www.gdcvault.com/play/1025420/Cluster-Forward-Rendering-and-Anti

NVIDIA GameWorks Technologies in 'FINAL FANTASY XV', Behind the Scenes(NVIDIA
https://www.gdcvault.com/browse/gdc-18/play/1024811

Precomputed Global Illumination in Frostbite(Electronic Arts
https://www.gdcvault.com/play/1025214/Precomputed-Global-Illumination-in ★
https://www.gdcvault.com/play/1025434/Precomputed-Global-Illumination-in

Ray Tracing in Games with NVIDIA RTX(NVIDIA

https://www.geforce.com/whats-new/articles/nvidia-rtx-real-time-game-ray-tracing

Real-Time Reflections in 'Mafia III' and Beyond(2K Games
https://www.gdcvault.com/play/1025229/Real-Time-Reflections-in-Mafia ★
https://www.gdcvault.com/play/1025467/Real-Time-Reflections-in-Mafia

Terrain Rendering in 'Far Cry 5'(Ubisoft
https://www.gdcvault.com/play/1025261/Terrain-Rendering-in-Far-Cry ★
https://www.gdcvault.com/play/1025480/Terrain-Rendering-in-Far-Cry

The Lighting Technology of 'Detroit: Become Human'(Quantic Dream)
https://www.gdcvault.com/play/1025264/The-Asset-Build-System-of ★
https://www.gdcvault.com/play/1025339/The-Lighting-Technology-of-Detroit


GDC 2018]「RTX」一色のNVIDIAブースで,ゲームにおけるレイトレーシング技術の活用アイデアをチェック
http://www.4gamer.net/games/208/G020859/20180326064/

GDC 2018]西川善司の3DGE:DirectX Raytracingにおける最適解は「レイトレーシングを行わないこと」!? Futuremarkが語るその真意
http://www.4gamer.net/games/033/G003329/20180323164/

GDC 2018]西川善司の3DGE:DirectX RaytracingにRTX,Optix,ProRenderにRadeon Rays。“レイトレだらけ”の状況をすっきりさせてみる
http://www.4gamer.net/games/033/G003329/20180323013/

GDC 2018]映像やAR/VR,さらにリアルタイムレイトレーシングまで! 2018年のUnreal Engineはこうなる
http://www.4gamer.net/games/144/G014484/20180322097/

GDC 2018]Futuremark,「DirectX Raytracing」ベースとなるリアルタイム技術デモのムービーを公開
http://www.4gamer.net/games/143/G014363/20180322075/


■パフォーマンス / QA

'Assassin's Creed Origins': Monitoring and Validation of World Design Data(Ubisoft Montrial)
https://www.gdcvault.com/play/1025054/-Assassin-s-Creed-Origins ★
https://www.gdcvault.com/play/1025452/-Assassin-s-Creed-Origins
自動テストとレポートシステムなど

Performance and Memory Postmortem for 'Middle-earth: Shadow of War'
https://www.gdcvault.com/play/1025209/Performance-and-Memory-Postmortem-for ★
https://www.gdcvault.com/play/1025429/Performance-and-Memory-Postmortem-for

Shading of 'Spellsouls': Achieving AAA Quality on Mobile(Nordeus)
https://www.gdcvault.com/play/1025238/Shading-of-Spellsouls-Achieving-AAA ★
https://www.gdcvault.com/play/1025473/Shading-of-Spellsouls-Achieving-AAA

'Horizon Zero Dawn': A QA Open World Case Study(Guerrilla Games)
https://www.gdcvault.com/play/1025153/-Horizon-Zero-Dawn-A ★
https://www.gdcvault.com/play/1025326/-Horizon-Zero-Dawn-A


Deep Learning

Deep Learning for Animation and Content Creation(NVIDIA
https://www.gdcvault.com/browse/gdc-18/play/1024808

Deep Learning for Game Developers(NVIDIA
https://www.gdcvault.com/browse/gdc-18/play/1024809

Deep Learning: Beyond the HypeElectronic Arts
https://www.gdcvault.com/play/1025098/Deep-Learning-Beyond-the

Developing the Art of 'Fortnite'(Epic Games
https://www.gdcvault.com/play/1024936/Developing-the-Art-of-Fortnite

Robocalypse Now: Using Deep Learning to Combat Cheating in 'Counter-Strike: Global Offensive'(Valve)
https://www.gdcvault.com/play/1024994/Robocalypse-Now-Using-Deep-Learning

 

UE4でSNNフィルタを適用する

SNN(Symmetric Nearest Neighbor)は Photoshop のフィルタの「面を刻む」のような効果で、絵画調になるというか単純化するというかのっぺりするというか‥そんなフィルタです。

下記のもんしょさんのブログにてSNNの概要やコードでの実装方法が紹介されており、こちらを頼りにポストプロセスマテリアルを作成してシーンに適用してみました(UE4.19)。

DirectXの話 第111回 - もんしょの巣穴


こちらが元のシーンのスクリンショット(2倍に拡大)。

f:id:moko_03_25:20180401033846j:plain

こちらがSNNフィルタ適用後です(2倍に拡大)。

f:id:moko_03_25:20180401033844j:plain

前回の記事で軽くご紹介したように、おかずさん輪郭検出の記事を試していれば、隣接するピクセルの情報を拾う方法が分かるかと思います。

ここからは、ピクセルの情報を拾う方法を知っている前提で話を進めます。

また、いきなりSNNフィルタを試すより、先に平均化フィルタやガウスブラーフィルタを試した方が、理解するのに丁度良いステップアップになると思います。
その際には下記のサイトの記事がとても参考になりました。

平滑化(移動平均、ガウシアン)フィルタ 画像処理ソリューション

 

その後にSNNフィルタを試しました。

こちらのツイートの小さい画像では分かりにくいと思うので、順を追って解説していきます。

     *     *     *     *     *

まずはUV座標をズラすマテリアル関数を作成します。

f:id:moko_03_25:20180401033841j:plain

内容はおかずさんの輪郭検出の記事そのままです。

Scene TextureノードでScene Colorを選択、InvSizeポートからは画面サイズの逆数‥つまり1ピクセル分のUVの幅を取得できるので、Inputノードで入力してきた値を掛けると「何ピクセル分の幅か」が決まります。それをUV座標に足すと、そのピクセル分ズレた座標が出力結果になります。

f:id:moko_03_25:20180401033838j:plain

もう1つマテリアル関数を作成します。
こちらはズラしたUV座標の色を拾うような構成にします。

f:id:moko_03_25:20180401033836j:plain

先ほどのマテリアル関数を Scene Texture ノード(PostProcessInput0 を選択)に接続して、シーンの色を出力するだけの構成です。
こちらもおかずさんの輪郭検出の記事と流れは一緒です。

たったこれだけなのになぜ先ほどのマテリアル関数と分けているのかと言うと、PostProcessInput0 を Scene Depth にして深度を出力したりと用途に応じて構成が変わるため、流用可能なよう分けているのかと思います。

f:id:moko_03_25:20180401033917j:plain

さらにマテリアル関数を作成します。
もんしょさんのSNNフィルタの記事の図入りでの説明をご覧になっている前提で進んでいますが、SNNフィルタの肝となる、範囲(今回は5x5)内の対称(対角線上)となる2つのピクセルの色のうち、自身(中央のピクセル)の色に近い方を出力する構成にします。

f:id:moko_03_25:20180401050651j:plain

ここはもんしょさんの記事をそのまま参考にさせて頂きました。

基本的な構成の意味はもんしょさんの記事で解説されています。
ただ、DotProductノードが使われていて「どゆこと?」と思う方もいらっしゃるかと思います。

私は中学以降の数学を全く勉強しなかったため、DotProductは2つのベクトルの向きがどれくらい違うかを-1~1で取得してくれる程度にしか理解できていないのですが、どうもAとBのベクトルを掛けた後に全てのチャンネルを足すようです。
この点については、RGBのグレースケール変換に便利というもんしょさんの解説がおかずさんのブログ記事で紹介されていたおかげで知りました。

なのでここでのDotノードは「3チャンネルあるRGB値を比較するために1チャンネルに値を統合するのに利用しているのだな」程度には理解できました。。

f:id:moko_03_25:20180401050708j:plain

さて、さらにもう1つマテリアル関数を作成します。
いよいよSNNフィルタを5x5ピクセルの範囲で行う構成を組みます。

f:id:moko_03_25:20180401050401j:plain

最終的にこんな感じになりました。

ノードが多くて線が散らばっているので一瞬ぎょっとするかと思いますが、同じことを繰り返しているだけで、行っていることはとてもシンプルだったりします。

f:id:moko_03_25:20180401033912j:plain

まず左半分は、5x5のピクセルの色を拾う構成になっています。
ここは輪郭検出の構成を試したことがあれば大丈夫ですよね。

f:id:moko_03_25:20180401033909j:plain

右半分では、下図のように対称(対角線上)の2つのピクセルと中央のピクセルを比較して色を決める関数に繋ぎますが、これが全部で12通りの組み合わせになります。
そして12通りの出力結果を順に足していきます。

f:id:moko_03_25:20180401033906j:plain

最後に、25ピクセル分の色が足された値を25で割って平均の色を出力します。
こちらが最終的に決定する色になります。
この構成を少し変えれば、結果も変わって面白いかと思います。

f:id:moko_03_25:20180401033944j:plain

最後にマテリアルを作成します。

f:id:moko_03_25:20180401034045j:plain

Material Domain を Post Process に変更して、最後に作成したSNNフィルタのマテリアル関数をエミッシブカラーに繋いで、PostProcessVolume アクターに登録するだけです。

f:id:moko_03_25:20180401034042j:plain

 

さて、別のシーンで結果を見てみます。SNNフィルタ適用前はこちら。
(画像クリックで倍サイズになります)

f:id:moko_03_25:20180401034039j:plain

SNNフィルタを適用するとこちらのような結果になりました。
(画像クリックで倍サイズになります)

f:id:moko_03_25:20180401034036j:plain

以上になります。

面白い効果ではありますが、アーティスト的には綺麗な見た目にするためにもう一工夫入れたいところ。。そうするとどんどん描画負荷が重くなっていきそうですが‥

という訳で参考になれば幸いです!

 

UE4でPost Process Materialを使ってフィルタ効果を適用する

UE4では色んなフィルタ効果を自作して画面に適用することができます。

例えば下図のようなシーンがあったとします。

f:id:moko_03_25:20180401033802j:plain

シーンにモザイクフィルタを適用してみたものがこちらです。

f:id:moko_03_25:20180401033759j:plain

面白いし、結構カンタンに作れてしまえます。

そんなフィルタ効果ですが、コミュニティの方々のブログ記事(大変ありがたいです‥!)を頼りにいくつか試してみたので、これから初めて触ってみるアーティスト向けに備忘録を兼ねてメモしておきたいと思います。

今回はフィルタの手順をさらっとだけ(UE4.19)。

     *      *      *      *      *

まずマテリアルを新規作成して、詳細パネルの Material Domain を Post Process に設定します。

f:id:moko_03_25:20180401033804j:plain

するとメインマテリアルノードではエミッシブカラーのみ有効になります。
試しに赤い色の情報を入力してみます。

f:id:moko_03_25:20180401040416j:plain

次にレベルに PostProcessVolume アクターを配置して、詳細パネルの Post Process Materials の項目の「+」ボタンを押してエレメントを追加します。

f:id:moko_03_25:20180401033810j:plain

プルダウンでアセットリファレンスを選択するとマテリアルを設定できる項目が表示されるので、先ほど用意したマテリアルをドラッグ&ドロップします。

f:id:moko_03_25:20180401033807j:plain

するとシーンが真っ赤になりました。

f:id:moko_03_25:20180401040642j:plain

フィルタ効果を与える手順としてはたったこれだけです。

あとは、マテリアルの中身次第なので、ネットの情報を頼りに試してみたり、こねくりまわしてみたりしていく感じでしょうか。

UE4で Post Process Material だとセルルック関係の情報が多いですが、その中でも輪郭検出を試してみたら案外シンプルで導入にも良いと思ったので、まずはそちらから試してみると良いかも知れません。

輪郭検出で参考にさせて頂いたのは、おかずさんのブログ記事です。

私はその後、ぼかしフィルタ>ガウスぼかしフィルタ>SNNフィルタ(絵画調になる)>モザイクフィルタ‥という感じで試してみました。

参考サイトをリンクしておきたいと思います。

◆おかずさん

UE4のポストプロセスマテリアルで色々してみた 応用編 - Unreal Engine 4 (UE4) Advent Calendar 2014 - ぼっちプログラマのメモ

UE4のポストプロセスマテリアルで色々してみた 番外編 - ぼっちプログラマのメモ

◆com04さん

ポストプロセス - UE4 Document@com04

ポストプロセス-マテリアル - UE4 Document@com04

UE4のセルシェード実装方法を纏めたい - Qiita

◆「emotion」

【UE4】ホストプロセスマテリアルSceneTexture:SceneColorでエラー | emotion

◆公式ドキュメント

Unreal Engine | ポストプロセス マテリアル

Unreal Engine | ポストプロセス マテリアルのサンプル

GCC2018 カプコンMHW Houdiniアセット制作事例の講演メモ

GCC2018に参加してきた際のメモになります。

ゲームクリエイターズカンファレンス'18 | GAME CREATORS CONFERENCE'18

※理解もメモもほとんど追いつかなくただ書き散らしたものになっています
 間違った記載が大量だと思いますのでご注意ください

◆講演タイトル

『MH:W | Houdini - Houdiniエフェクトアセット作例紹介-』
 モンスターハンターワールドの講演です。

◆自己紹介 

株式会社カプコン 竹井 翔さん
VFX室 テクニカルアーティスト
Houdini歴 4年くらい
ツール周りの整備だけでなくがっつりリソース作成にも従事

MHWで担当したもの:
・初期 汎用テクスチャ作成、シェーダーの検証、エフェクトエディタの仕様周りの精査
・中期 プレイヤーやギミック周りのエフェクト
・後期 モンスターのエフェクト、エフェクトの処理上げ

結果的に3年くらいチームに在籍

◆FLIPで作成したパーティクル用RGBテクスチャ

RGBテクスチャについてまず解説
RGB各チャンネルに各要素を格納
 スペキュラ、屈折、密度、マスク

RGB CommonとRGB Water Shaderの2種類のシェーダがある

HoudiniのFLIPシミュレーションの結果をAEでコンポジット

RGB Water Shaderを使用
同じリソースを使いつつパラメータを変えることでランタイムで様々なバリエーションの表現が可能
1種類のテクスチャから、水、マグマ、泥、粘液、チリなど
メモリ効率面で非常に良い結果がでている
テクスチャは大体64パターンの2Kで運用

FLIPの説明

エミッタの形状を平面に近しくする ベロシティも平面上から延びるようにしている
立体と相性がよくないため
中心に近しい部分に情報が集中しないメリットがある
高解像度で運用すれば立体感がでないことはないと思うが

フルイドソースにデフォルトで格納されているカールノイズで
力技
AutoDOP内 ガス 粘りを出した
エミッションの尺やライフは

シミュレーションが完了したらMantraでダンダリング

サンプリングは3x3
リフラクトリミットなどもデフォルトのまま
設定はPhysical Renderにしている
レンダーパスは InDirect Direct 両方のリフラクション 密度 マスク
2種類のHDRを使っている
リフレクションとリフラクション 取り込みはIBL
ライティングはグレースケールテクスチャで

AEで各チャンネルを加算合成
チャンネルシフトを使用 32bitで合成

別のファイルでテクスチャをレイアウトして最終調整をかけて出力
社内のスクリプトでレイアウト 

ROPのExtra Image Planeの設定がとても楽
今回はAEでコンポしたが、今後はCOPで運用していきたい

◆頂点アニメーションによる濁流モデル

古代樹の森の大がかりなギミック
岩壁に一定ダメージを与えると決壊して水が流れる

Wrangleもご紹介

ベース形状はシリンダーの底をカット
地形に近い形状でカーブ
Xのスケールを0にして歪みのアーティファクトを回避
P Scaleをカーブに沿ってランプで調整可能にしている
シリンダーのUVが元なので展開が綺麗

Ocean Spectram ループ機能が付いている $T Length
波のアニメーション速度を調整しつつループしてくれる
整数でない数を入れると挙動が怪しくなる

Time Scale

モデルの先端で波の勢い フォールオフ

セカンダリUV
DCCのUV情報 32bit システムで使うのは16bit
bit数の劣化でアーティファクトが発生した
シェーダーでノーマライズしてアーティファクトを回避

頂点数が8192を超えると折り返しが必要
濁流では折り返ししなかったが折り返しも簡単にできるようにした

For文を使わずとも高速でレイアウトできる

頂点アニメーションへのベイクは自前
ブロックとタイムシフトで回す

COPは一度テクスチャ化しなくても良いのが素晴らしい

各モデルは2000から4000頂点(?)くらい

LuizさんのPythonのCOPツールを使用していたが
Houdini 15.5で使用不可になったので自作ベイクツールに移行
結果的に勉強になって良かった

放射状に広がるメッシュ変形の波紋アニメ
最初は4方向の波を合成していたがウェーブインスタンスの機能を後で知ってノードが減った

◆陸珊瑚の大地の雲海

15番のエリアから見える
かなりの画面領域を専有する

特にややこしことはしていないのでシンプルなネットワーク

クラウド>メッシュ化>メタボール化してクラウドクラウドノイズでボリューム化

カメラから良い感じに見えるよう近距離のものの解像度を上げた LOD的な考え
中景~遠景はほぼ同じネットワーク

雲のボリュームはゲームでは環境マップテクスチャに変換して使用
前後上下左右6枚の絵 カメラの画角を調整して隣同士をシームレスで繋いで
Houdiniで一発レンダリング可能なようにした 

AEでレイアウトしてDDSで出力

ライティングはステージに合わせているため法線マップは使用していない
※補足:珊瑚大地のマップはゲーム中に時間経過しない

環境マップに適用する板は4頂点か8頂点
不透明で運用 カメラへの突き刺さりはαディザで回避
雲海を抜ける時はパーティクルで雲を配置

当初はTerragen(?)を検討したが、ボリュームのレイアウトやディティール調整ではHoudiniが圧倒的有利

◆痕跡アセット

自動配置される
複数の痕跡リソース デカール 

痕跡アセットのhipはSOPとCOPの合わせ技

ハイポリゴンのグリッド
足跡の形状の内側の凹みと外側の凸を制御
起伏もそれなりに反映される

法線マップも含めHoudiniから一発でレンダリングできるようにしている

似たようなテイストのアセットの量産が可能

最初に作成したのはアンジャナフの足跡
痕跡作成に一週間くらいかかったのでHoudiniに移行
一週間くらいで完成
これにより20分で作成できるようになり、メンバーの負担を大幅に軽減

MHWは今までのシリーズで存在しなかった変更がとても多かった
Houdiniでなければなしえなかった

◆質疑応答 

Q「Houdiniのデータの管理はどうしていた?」

A「MHWではHoudiniを使っていたのはほぼ私のみ 好きなように管理していた
 使用者が増えて欲しいとは思う」

Q「スクリプトは全て自分で?」

A「全て自分で書いた」

Q「Houdiniの社内での広がり具合は?」

A「背景班で活動が広がってきている
  エフェクトも勉強会を開いているが積極的にチームに取り込もうとしているのは背景班の方が意欲的」

Q「濁流は最初から円筒からのアプローチだった?」

A「制作自体が難産だった トータル半年くらい 作り直しがあった
  ディスプレイスメントで頂点オフセットさせたり 頂点数が少ないとピクツキが起こった
 ピクつかなくするのに3万ポリゴン必要だった
 Uncharted4で頂点アニメーションを使用しているのを知ってやってみた」

Q「Houdiniで今後取り組みたい表現などは?」

A「UE4でボリュームスライスを再現するためのテクスチャテクニックがある
 現行機では現実的ではなさそうだが今後検証したい」

◆ボンデジさんから宣伝

・Houdini Core 23万円 -33% ゲーム会社限定 5/31まで

・新テキスト(英語) PDFがDL可能 これから始める人用
 SideFXのウェブサイトにリンクあり

・CGWORLDでMHWの記事が入っている 竹井さんも載っている

・ボンデジブースでアンケートに協力して欲しい ミニタオルをプレゼント

◆感想

ハイエンドなタイトルでエフェクトを制作する上で、Houdiniが強力なツールでありつつ、がっつり触っていかないといけないということを痛感させられるセッションでした。

組織としては、1本はライセンスを購入して1人はずっと触り続ける人を設け、経験値を溜める意味でも半ば無理矢理にでもゲームに組み込んでいって開拓していく必要がありそうです(実装するところまでやらないと問題点も浮き彫りにならないので)。

スクウェア・エニックスの高安さんの講演は竹井さんの講演と対照的にデフォルメや特殊な表現に特化した内容で「特殊表現を求められた時の解決にHoudiniが強い」という感じでしたが、竹井さんの講演のように濁流や雲など環境寄りのアセットを背景班にお願いしてエフェクト班で作らずにいると、そういったアセットを作成することになった場面でどうしたらいいか分からなかったりクオリティが出せない状況に陥る可能性もあると思いますが、そういった状況の打開面でもHoudiniがカバーしてくれる部分は多そうに思います。

ただ何よりも、講演で取り上げられていた水飛沫アセットのクオリティが高いのが素晴らしいなと。。

グっと危機感を煽られつつも大変刺激になったセッションでした‥!

GCC2018 フロムソフトウェアの開発体制取り組みの講演メモ

GCC2018に参加してきた際のメモになります。

ゲームクリエイターズカンファレンス'18 | GAME CREATORS CONFERENCE'18

※ほぼスライドの文字をそのままメモったものになります
 たまにお話されていたものも混ざっています
 また、メモが追いつかなくて抜けもちょこちょこありますのでご注意ください

◆講演タイトル

『複数タイトルの並行開発を維持しつつ大規模化に適応した中小企業エンジニアの取り組み』
 フロム・ソフトウェアの講演です。

前提の共有

伊藤 淳さん
R&Dセクション 部長 プログラマー/ゲームエンジニアアナリスト

会社紹介
280名程度 ほぼ全員開発者
東京 普通の中小企業
キティちゃんとかも作っている

フロムソフトならではの用語の説明 

・ライン
  ひとつのタイトルの制作を直接担当するチーム

・R&D
  研究開発チーム
  タイトル制作は行わない
  会社全体や全ラインに関係する業務を行う

・チーム間の移動は比較的頻繁に行われる
  チームのメンバは固定されていない 

複数タイトルの平行開発

・具体的には?
  大小5ライン前後が平行
  ピークのライン1~2
  量産開始中 1~2
  プロトタイプ中のライン1~2

エンジニアは全体で70名程度
 ライン専属が1ライン10名前後
 R&D(とグラフィック)で残り30名くらい
  ※質疑応答でもR&Dで27~28名とのこと

大規模化

・具体的には?
 ハードウェア的には
 PS2>3>4世代

・主流の画面解像度やメモリサイズは
 480i>720p>1080p>2K
 数十MB>数百MB>数千MB(数GB)

・開発期間
 1年前後>2年前後>それ以上

PS2世代の開発体制

・主流の画面解像度は480i
・メモリサイズは数十MB
・開発期間は1年前後
・シングルプラットフォーム(独占状態)
 特定のプラットオーム専用にタイトル開発
 他のプラットフォームには移植

具体的なリリースタイトル 

ARMORED CORE シリーズ
・Another Century Episored
義経
RUNE
O・TO・GI
 ※大体2005年頃までのタイトル

⇒ これらがどのような開発体制だったか?

開発体制

・独自の開発体制を築く
 プラットフォームに特化した作り方が効率的
 タイトルの内容に特化した作り方が効率的
 開発期間が1年前後と短いので

・他ラインと連携するメリットがあまりない
 各ラインが独自の進化をする
 お互いに干渉せずやりやすいように作る

⇒ 今の感覚ではひどい作り方のように感じるが
  この時代はこういった作り方が効率的だった

PS3世代の取り組みと開発体制 

・主流の画面解像度は720p
・メモリサイズは数百MB
・開発期間は2年前後+DLCで1年くらい
マルチプラットフォーム
 複数のプラットフォームにタイトルを同時リリースする

⇒ ハードウェアの進化だけではなく
  プラットフォームの外側で大きな環境変化が起きた

具体的なリリースタイトル 

・Demons Souls
機動戦士ガンダムUC
NINJA BLADE
ARMORED CORE
DARK SOULS
 ※大体2014年頃までのタイトル 

⇒ マルチプラットフォーム対応への転換

開発体制

マルチプラットフォーム対応が移植作業になる
 ひとつのプラットフォーム完成後にあらためて開発
  同時発売するには向かない

・リソースの大規模化との相性が悪い
 データ化せずプログラムで作り込み
  初動を優先した小規模かつ短期間での開発を前提とした作り方
  大規模な量産には向かない

⇒ このままではまずい

R&D主導でのタイトル開発環境の構築
・理想の実現への取り組み
 R&D製マルチプラットフォームライブラリの新規開発
  低レベルからリソース管理や描画などの高レベルまで
 R&D製ツールとデータ形式とビルドシステムの新規開発

・単体の理想としては悪くはなかった
  実現するとなるとそれだけではだめだった

・うまくいったものもあったが失敗といえるものも多かった

比較的うまくいったもの

・ライン側エンジニアの協力が得られたもの
 負担を肩代わりするようなもの
  プラットフォームAPIをラップするライブラリ
  世代交代に伴うデータ形式の刷新

・ライン側エンジニアに負担がなく絵デメリットもないもの
 R&Dが導入を肩代わりして完結するようなもの
  静的解析とか分散ビルドなどの導入

⇒ これらは全ライン共通でうまくいった
  トラブルがあっても強力して解決していけた

あまりうまくいかなかったもの

・ライン側エンジニアに負担があってメリットがないもの
 既存の仕組みをミドルウェアやR&D製に置き換えるもの
  手間やリスクが発生する

・ラインの協力を得られずにR&D側が置き換え
 ライン側の協力なしでは互換性維持して置き換えが限界
 無理矢理になるし余計なトラブルも発生する

⇒ ライン側の協力なしではそうそううまくいかない

エンジニア以外への影響が大きいもの

・データ作成ツールやワークフローに関わるもの
 メニューやカットシーンの制作環境
  グラフィカルな状態遷移ツール
  トップダウンで強引に導入したもの
   リソースを含めたバージョン管理システム 

⇒ エンジニア以外の協力はなかなか得られなかった
  ラインごとに採用状況がバラバラになった 

ひと段落ついてからの取り組み

・ツール開発を全ライン対応の方針へ
 各ラインのツールの機能を全て取り入れていく
  ラインからの要望には片っ端から答えていく
  大量の設定がある全部入りのツールにする

・メンテナンスはどんどん大変になっていく

⇒ とにかくツールを統一することを優先
  使われ方などはバラバラだが全ラインで採用 

ミドルウェア類のサポート窓口として機能
 ベンダーへの問い合わせやノウハウの蓄積を担う
  バージョンアップの事前検証や取り組みサポート
  新規導入時の比較検証や組み込みサポート

・ライン間の橋渡し的な形で間接的に連携をサポート
 うまくいったものの継続的メンテナンス
  ライン側のトラブルや要望には優先対応

⇒ 結果として新しい試みをする余裕がなくなっていく
  裏方的仕事がメイン 対応に追われる日々 

・ライン側でも大規模化へ効率化で対応

・ツールの拡充やデータドリブンの加速
 プログラマはゲーム側の実装より環境整備優先
  実装は可能な範囲でプランナーが肩代わりする体制に

・ワークフロー改善のための仕組みを整備
 DCCツールからワンボタンでホットリロードなど

・様々な自動化の取り組み
 物量に対応していくため&人為的ミスを減らしていく
 プログラマが付き合ってられない 

⇒ 相変わらずラインごとの取り組みではあった

マルチプラットフォーム対応
 R&D製のライブラリが全ラインで採用された

・大規模化にはライン単位での効率化で対応
 自動化など一通りは手をつけた

・ワークフローや高レベルの実装はライン独自
 多少連携はあっても基本はそれぞれやりやすいように 

⇒ ライン独自路線は変わらず

PS4世代の取り組みと開発体制

・主流の画面解像度は1080p
・メモリサイズは数千MB
・開発期間は3年前後+DLC1年
・求められるデータの規模や品質がさらにあがる

⇒ PS3世代のときにうらべて変化は小さめ
  新世代「感」のリソースへの依存度は大きい

具体的なリリースタイトル 

DARK SOULS 2
DARK SOULS 3
・Bloodborne
 ~現在のタイトル

⇒ 大規模化、長期化する開発への対応が必要
  DLCをしっかり作っていることも要因の一つ 

前世代の問題点

・ラインの環境整備による効率化はもう伸びしろがない
 効果的なものは全世代であらかた手をつけてしまった

・現状の環境のメンテナンスで手一杯
 当然ゲームエンジンや諸々の世代交代も必要

・R&Dもすでに現状維持で手一杯
 メンテナンス作業や要望対応で余裕がない 

⇒ このままではまずい

ライン開発環境を全ラインで共通化する

・今回はライン手動での取り組み

・なぜ共通化なのか
 開発環境を全ラインで協力したら担当者数が数倍に!
  ライン単位の運用を考慮しても実質1.5~2倍程度は期待

 R&Dの全部入りツール負担が数分の1に激減!
 ライン間の移動が容易になって人員配置が柔軟になる
  今までは新しいラインに慣れるのに1週間~1ヶ月などかかっていた

⇒ 人員の効率運用で大規模化に対応することに

通化を後押しする要因

・ライン開発環境が実は意外と共通化されていた
 R&Dのマルチプラットフォーム対応は全ラインで共通すでに完了していた
 全部入り戦略で全ライン共通
  ツールの半分以上がR&D製で実行ファイルは共通
  枠フローなどが各ラインでバラバラなだけ
 結果的ではあるが共通化への足がかりができていた 

⇒ ライン側がしっかり連携すっれば共通化が可能 なはず

最初のとっかかり

・2ライン合流で開発体制の構築を開始

・1ラインで取り組んでもうまくいく見込みがなかった
 具体的にはBloodborneに将来ダクソ3を作るチームを引き抜いて合流
 合流して取り込むことを提案して実現

・加えて他ラインからも人員を引き抜き
 各ラインのノウハウが

・分離でPS4世代のラインが2ラインになる
 開発環境は共通
 PS4世代ネイティブの環境はこれだけ

・新しいラインはこの環境をベースにするのが自然
 結果的に全ラインが共通の環境で立ち上がる

・ただし、あくまでもベースにしただけ
 つまり放置したらそれぞれ独自進化して共通ではなくなる

⇒ 共通環境を維持する工夫が必要 

共通環境を維持するための工夫

・情報共通を密に行う
 思想の共有を徹底的に行う なぜそういった実装なのか
  やりたいことに対して妥当な方針がどういったものか

・作業状況をつぶやいて全ラインでリアルタイム共有
 ツイッター的なツール
 困っていたら誰かがすぐフォローする
 不適切な機能追加などを防ぐ 

⇒ 共通環境を維持することにメリットを感じてもらう

メンテナンスや機能追加はラインの作業として行う

・自分たちのための作業として取り組むことを徹底
 専門チームを作るべきという意見がでるが避けるべき
 必要な機能が必要なだけ実装される

・ひとつのラインが実装したら全ラインで共有
 自分たちのための実装を他のラインがやってくれてお得

・多少、出来が悪くても共通化することを優先
 共通化後のリファクタはできても逆は厳しい 

⇒ ラインの互助システムとして共通化を機能させる

とにかく他職種を巻き込んだ

・理解や興味を示してくれる見方を増やす
 現状の問題や解決方法について相談の機会を多く持つ

・各職種の統一見解を引き出せるように
 新しいアイディアの相談には窓口の台頭を立ててもらう

・機能ではなく困っていることを相談してもらうように
 こういう機能のボタンを追加して欲しい的な要望をNGにした 

 これらを徹底してその後エンジニアと一緒に相談

⇒ 他職種の協力も得られるように

全ラインで共通の開発環境をベースに開発

・全ラインで共通のワークフロー
 ツールの使い方や命名規則など諸々

・新しい機能の追加なども情報共有して連携
 ラインをまたいで関係者とすり合わせしながら進める

・実装はひとつのラインで担当してから共有

⇒ 人員の効率的な運用も実現

◆課題と今後の取り組み

通化に関する誤解の問題

・新しい取り組みに対する萎縮
 共通化を優先するために新しいことはNGという誤解
 新しいこと(改善)と好き勝手(好み)の区別が難しい

・気軽に試せない&効率悪いという考え
 全ラインの合意を得ないと試せないという誤解
  実際は気軽に試してから不況でもかまわない 

⇒ 不満につながる誤解なので放置してはいけない

通化とは

・良いアイディアを独り占めしないこと
 そしてそれをみんなで共有していく取り組み

・現状維持をしてやりくりすることではなく
 変化をみんなで受け入れていく取り組み

・結果的としてさらに改善する機会が得られる
 いまいちだった場合にも発覚が早まる

⇒ こういった取り組みだという啓蒙が必要

契約上の問題 ※弊社のケース

・タイトル固有情報についての共有はNG
 エンジニアにはついては共通エンジンを前提とした契約
  権利関係の問題だけではなく情報共有のしやすさにも影響する

・他職種の場合は条件が異なる可能性が高いので注意
 エンジニアに比べてかなり制限のある共有に限定される

⇒ とにかく法務への確認と連携を怠らないように!!
  法務担当者と協力的な関係を築くように

今後の取り組み

・問題としてあげた2点の改善
 共有がもっと前向きに受け入れられるようにしたい
 契約上の制限を緩和したい

・次も現世代の延長では多分対応できなくなる
 別の軸で対応することになるが
  開発期間を延ばすのはそろそろ限界のはず
  人を増やすのも簡単なことではない
  毎年発売を維持できなくなる
  DLCを続けてリリース? ⇒ 本編が失敗したらDLCも失敗するのでリスクが大きい 

⇒ さてどうしたものか

今のところは

・ゲームそのものの作り方を効率化できないか
 エンジニア以外にも共通エンジンのような仕組み
 攻めのプロシージャル 

⇒ データ作成を直接効率化するのではなく
  その根っこの効率化を図ることでデータ制作の歩止まりを向上させる

Q「R&Dの人数は?」

A「現在27~28名くらい」

Q「た職種への理解や仕組みを入れる中でプログラマへの理解が重要と思うが
 その中で工夫されていることは?」

A「基本的にはプログラマが協力者と思ってもらえるよう気を付けている
 こういう機能を追加してくれというのは要求せず
 とにかく困っていることを共有して寄り添っている 相談できるように」

Q「便利屋になりそうだが」

A「そこは気を付けている お互いにできることをやり合う関係を作る
 情報をグラフィッカーがやりたいことがあった時に
 他のグラフィッカーはどう思っているか?をグラフィッカー自体に集めてもらう
 お互いが努力するような体制を作る」

Q「自動化はどういったものを?」

A「ツールからボタンを押したらホットリロードとかメモリ状況などの収集とか
 出たワーニングを担当者に分配するとか 細かいことも含めて色々やっている

Q「共通化していくと 変更が他のプロジェクトに影響していくのでは?」

A「そこは課題があるがパターンとしては共通のライブラリになっている
 他ラインに自動的に反映されるケースとそれぞれのラインがマージをするケースの2つある
 マージする方は結構手間なのでもう少し良いやり方を検討している
 一番簡単なのはライブラリ化していくこと
 今できていない理由は手が回っていない まずは手を回るよう時間を作る
 Gitなどの環境で解決していく 色々やりようはあるかなと」

Q「これらの導入の決断は現場?上層?」

A「フロムソフトウェアは元々システムを作っていた会社なので
 恐らく最初からそういう体制だった」

Q「新しい人が入ると把握ができていないと思うが育成は?」

A「半年くらい新人研修に時間を使っている
 後は経験者に部下としてつけて学んでいってもらう」

 

GCC2018 INEIのコンセプトアートの講演メモ

GCC2018に参加してきた際のメモになります。

ゲームクリエイターズカンファレンス'18 | GAME CREATORS CONFERENCE'18


◆講演タイトル

『どうしたらコンセプトアートを効果的につかえるのか』
 コンセプトアート専門の会社 INEI の講演です。

◆自己紹介

INEI 代表取締役・コンセプトアーティスト 富安健一郎さん
コンセプトアート専門の会社

講演のタイトルを変えた

「世界観を作るコンセプトアートの考え方・進め方」

質問はその場でどうぞ
「質問などあればどんどん言ってもらえれば
 楽しくやれればと」 

普段どういうお仕事をしているか?
FFXI アート
・黒騎士と白い魔王 アート
・写真家さんとコラボした企画のアート
 木とか岩の写真をコラージュしてアートに仕上げたもの
・富安さんの個人的なアート
・タバコのキャンペーン映像作品のアート
ポルトガル?の会社の作品のアート
・その他

爽やかなものからダークなものまで
空間が広がっていくような気持ちの良い絵が好き 得意技にしている

普段お仕事でこのようなコンセプトアートを描いているときに大切にしていることがある

それを今日は説明していく

実際にどのように考えて何を大切にしているか

◆会議を始める前にすること

仕事なので色んな人と会議をしながら進めていく

準備や心持ちについて

プロジェクトが現在どのような状況であるかを確認
まったく立ち上がってない状態のこともある
 次の会議で立ち上げようと思う みたいな 生まれる瞬間
 プリプロが進んでいる中だったり 

確認しないと入り方が変わってくるので 話がちぐはぐにならないよう確認する 

会議の出席メンバーと人数を確認

どういうポジションの人が出席しているのか
キャラクターデザインが先行している場合はデザイナーがどなたなのか
 お話優先なら脚本家や小説家がどなたなのか
 など

 顔ぶれからプロジェクトを掴んでいく
 最終的な決定権を誰が持っているかを把握する

会議の流れのイメージトレーニング

参加者がどういう反応をするかなども
素晴らしいプロジェクトだと当日意気込みすぎて肩に力が入り過ぎたりするので
慣れてリラックスして楽しめるようにしていきたいと考えてイメージしている

◆会議が始まったら心がけている事

話し合いがすごく重要と思っている
ただカッコイイ絵を描くのではなくクライアントが何を表現したいか汲み取る
そういうことを思いながら会議している

クライアントのお話をとにかくよく聞く

自由に描く アーティストという名前のイメージではなく
デザイナーのような正解はなんだろうなと探りあてるような仕事と思っている
望まれることはあるが、自分から描きたい、というのは無い

リラックスした空気になるようにする

有名なクリエイターさんがいて物が言えないような状況になると場が緩やかに回っていかないので
みなさんがフラットな関係性でいられるように
音楽をかけたりお菓子や飲み物を置いてみたり
基本的に笑顔でいるようにしていたり
雑談を挟んだり
始めて会う人の緊張をほぐすように 

出席者の発言をうながす

「Aさんこれどう思いますか?」みたいに

クライアントの中にあるコンセプトを引き出す

はっきりしたものがある場合もあるが
もやもやした状態のものをどう引き出していくかが勝負

モバイルノート ライブペインとを使って
「例えばこうですかね?」「こういう色ですかね?」「こういうデザインですかね?」と聞きながら引き出していく

クライアントが気が付いていないコンセプトも引き出す

対話して進めると新しいものが生まれたりもする
コンセプトに合っているなと思ったら提案してみたり
気づいたこと プロジェクトに対して有効なインフォメーションだなと思ったら話をしたり
クライアントさんが自分たちで考えたコンセプトって最高じゃんって思えるように
そこに向かうように

会議をあまく長くなりすぎないように

すごく集中して会議を進めるので大体みなさん1時間半くらいすると疲れてだらだらしだしてしまうので
なるべく1時間半で終わるように 

誰がどのように見るのかを確認する

どういうタイミングで誰に見せるのか
見え方、感じ方が変わるので 

ファシリテーターを目指す

こういうことはファシリテーションになる
会議がすごく大事なので
色んな手段を使ってクライアントさんの考えやコンセプトを引き出すことを常に目指している

Q「引き出しているうちにコンセプトが大きく変わっていったりもする?」

A「最初に描くコンセプトがあるので、そこから大きく外れることは今のところ経験していない」

◆コンセプトアートを描くときに考える事

ドラゴンが炎を吐いて辺りが焼けているコンセプトアートを例に紹介
書籍を出すときのサンプルの絵 
※下記リンク先にドラゴンのアートが掲載されています

タイトルをまず付ける

サンプルの例では「王都壊滅」
こちらがそのままコンセプトを示している
中二病っぽかったりもする 英語だったり記号だったりも
イメージを喚起できるので

 どういう状況かを文章で書き出す

「呪われたドラゴンが王都を襲撃し、壊滅しようとしている
 主人公は一般の兵士でこの事件で大きなダメージを負う」

そこからさらにイメージを膨らませていく

・暗雲が立ち込めている
 もしくは嵐の中なのか 青空ではないだろう
 どういう天候か

・融通がきかなそうな怖いドラゴンを登場させる
 色んなドラゴンがいると思うが 賢いドラゴン 守ってくれそうなドラゴンなど

・遠景の背の高い建物でここが栄えた街だった事を説明
高い塔がある

・破壊され尽した建物
 ディティールよりも
 無慈悲になぎ倒された 人間の意志が及ばす壊滅させられた状況

・最後の抵抗を試みる魔術師軍団
 この絵の中に瞬間、ストーリーを発生させて
 この絵を見る人が1分~3分くらい遊んでもらう 入り込んでもらう
 1秒後には魔術師軍団に炎が当たって大変なことになりそうな状況

・遠景に煙がたなびく
 この場所にいたくない 地獄のような場所 それを演出

・鑑賞者の目の前の炎で臨場感が出る
 ゲームの主人公と同じ目線にしたい
 今このゲームの主人公は地面に倒れているか隠れているかしていて
 崩壊した建物の陰から、ダメージを負いながら見ている 

絵の中で見る人が考える余地を残すことが結構必要だと思っている
仕掛けを散りばめるようにしている
見る人との関係性を築いてくれる絵にしたい

レンズのボケを結構作っている
臨場感を引き立てるようにしたい
レンズの汚れだったり
アニメーションだと画面が揺れたり
その中に飛び込んでいけるような絵を目指して描いている

もちろん描いている時に全体的なトーン 色や明暗 バランスにしようか 考えている
人間ドラマやサスペンス 映画のシーンの色をピックして塗ってみたり
周りが少し暗くなっていて中央がぼんやり明るくなっていて視線誘導するような構成にした

なるべく鑑賞時間が長くなって目がぐるぐる移動するようにして楽しませる
こういうゲームを作りたいと思えるような
こういうシーンならこういう演出やアニメーションが考えられる 想像力を喚起する
そういう狙いがある

例に挙げたアートのコンセプトは一言で表すと圧倒的な「絶望感
5秒くらいで焼き尽くされそうな
もしかしたら生き延びるかも知れない、正義の味方が現れるかも知れない
そういう希望を抱かせないくらいの

一つの大きなコンセプトを前面にバーンと押し出せているか?

これを常に気にしている

コンセプトアートで陥りやすい罠がある
色々なことを表現してしまおうとすることがある
絶望感があるけど村の端では人が生きているようにして欲しいとか
この村は戦闘状態、一方その頃別の村は温泉の町で賑わっている、とか
そういうのは描きづらい どちらも推しが弱くなってしまう
こういうことが頻繁に起こる

自分としては一枚のコンセプトアートで表現するコンセプトは1つが良い
そう打ち合わせではいつも言っている 

ただ、絶望の中で小さな希望があったり
一見楽しそうに見えるがすごく犠牲の上に成り立っている
そういうコンセプトもある

絵になった時にどういう表現になるか、先ほどのドラゴンの例のように会議の中で確認していく

すごく楽しそうに見える楽園だけど地下では奴隷のように働かされている人たちがいるとか
そのエネルギーがどこから来るのかなんとなくわからせるようなデザインにしたり
どこか怖いシルエットにしたり

実際に東京の刑務所の壁の絵で印象的だったものがある

壁に木の絵が描いてある 緑の生い茂った木が一本
骸骨の形の木
木という生命力が溢れるものがシルエットは骸骨
ここに入るのは良くないよということを暗喩しているのかなと思った
良いモチーフだけど不吉なデザインの例

逆に骸骨だけど尊いものと思わせることもできる

結局は一つの絵に対して一つのコンセプトを全面に出せているかが大事

言いたいことが散漫になっていないか?

一日描いて、帰る時に最後に赤丸を描いてレビュー ここはもう少しこうする、みたいな
赤ペン先生を自分でやって 一旦リセットして
次の日赤ペンを見て取り掛かる
そういうことをやっている

◆まとめ

クライアントに寄り添って立ち
 クライアントの気持ちを汲み取れるようなスタンスでずっといる
 クライアントがどう表現したいのかを意識しながら

何が本当に大切なのかを理解し
 このプロジェクトにとって何が本当に大事なものなのか
 全体のクオリティが必要なのか
 本当に大事なことは何なのかよく考える

絵を作っていくテクニックを総動員して

魅力のあるコンセプトアートを作っていく

Q「未来やファンタジー アセットのネタの引き出しは日頃どう得ている?」

A「お仕事で長い間やっているので頭の中にまず引き出しは多少ある
 さらにその上に 色んな書籍が出ている ファンタジー 部族 地形 食物がどう育つか
 そういう細かい設定のチェックリストを見つけて参考にして
 クライアントさんから設定を引き出す時にそれを織り交ぜながら」

Q「会議が重要だということだが、何回くらいの会議でどれくらい作品数を描く?」

A「よくあるのは コンセプトアート自体だと 1時間半を一区切り
 収まらなければ日を改めたり休憩したりすることもあるが大体一回で終わるようにしている
 これで合ってますよね どうですかというチェックを行う
 2~3回行ってFIXできるようにしている」

Q「コンセプトアートを依頼する側だが、こういう依頼のされ方は良い、困った、があれば」

A「どういう場合でも対応していきたいが 進めやすいのはこれが作りたいという想い
 根拠のない思いみたいなものが強いとすごく進めやすい
 加速してどんどんいいものができていったりする
 誰も何を作っていいのか分からないみたいな状態 足の設置場所が無い
 最終決定者がいない状態で進めていくとかなり難航する
 誰かが決めないと進めないので、まずはそれを進めるように促している」

Q「ボツもあるのか?」

A「コンセプトアートに関わるのは超初期段階が多いのでプロジェクトが無くなることが多い
 半分とは言わないがそれに近い作品が無くなる
 その判断をするのにもコンセプトアートが役に立つ
 誰もイメージする人がいなくて何となく進めて稟議が通りお金と人が動いてから止めると本当に大変なので
 判断が付ければそれはそれで役目を果たせている
 ボツという意識はあまり無い」

Q「ワークフロー色々あると思うが 使っているツールとか」

A「私自身はPhotoshopがほぼ全て
 最近は3Dソフトを使うことがINEIの中ではあるが 随時調整しながら
 板タブが好きで古いIntuosをずっと使っている
 感触が変わるのが好きじゃないので」

Q「コンセプトアートの平均的な描く時間は?」

A「決まりは無いが 大体 どんなにかかっても一か月は無いようにしている
 一週間とか二週間とかで上げていくのがクライアントさんにとっても良いペースなのかなと」

Q「海外など遠隔地でのやり取りは?」

A「海外になるとそこまでのコミュニケーションは難しいので
 依頼されて描くパターンが多い
 ここまで入り込んでいかない
 本当は紹介したような流れでやりたいが」

 

Flipbookマテリアルについて

※2018.6/9追記
 UE4標準のマテリアル関数「Flipbook」の中身の方がシンプルで不具合もありません
 この記事の組み方は良くないです‥
 また時間のある際にそちらを解説します

 

UE4でエフェクト向けにマテリアルを組む際に、Particle System側ではなくマテリアル内でSubUVアニメーション(Flipbook / パラパラアニメ)させたいことがあります。

今回はその方法についてメモしておきたいと思います。

UE4標準のFlipbookマテリアル関数を使用する


UE4.19時点で、Flipbookのためのマテリアル関数が2つ見当たります。
1つはGPUパーティクル用みたいですね。

f:id:moko_03_25:20180322002616j:plain

こちらを使用しても良いのですが、中身が少々分かり辛いのと不要な機能が入っていたりもするので、シンプルな構成のものを自作していきます。

基本的なマテリアル構成


テスト用にテクスチャを用意します。
縦と横のパターン数が違う方がデバッグしやすいと思います。

f:id:moko_03_25:20180322014431j:plain

まずベースとなる基本構成はこちら。1パターン分の絵が表示されるようにしています。
横・縦ともに1パターン分のサイズを出してUV座標に掛けています。
この時点では機能していないAddの部分にUVの移動を与えていきます。

f:id:moko_03_25:20180322002610j:plain

次に、1秒ごとにU方向へパターンが切り替わるようにします。
Timeの値をFloorで切り捨てると1秒ごとに1ずつ増える値を取得できるので、それをU座標に足すだけで1パターン分移動するようになります。
このようにTexcoordに対しては、パターン切り替えを先にAddで行って、後からMultiplyで1パターン分の大きさにUVをスケールする方が数値の流れを理解しやすいと思います。

f:id:moko_03_25:20180322002608j:plain

今度は、U方向のパターンが最後まで表示されたら次はV方向に1パターン分移動するように構成します。
つまりU方向に5パターンの絵が敷き詰められているなら、Timeで1カウントするのに5秒かかるようにします。そのためにはTimeを5で割れば良いのですが、これまでの手順で5で割っている部分があるので再利用しています。

f:id:moko_03_25:20180322002605j:plain

全体図を見てみます。これで1秒ごとにパターンが切り替わるようになりました。

f:id:moko_03_25:20180322002654j:plain

 

パーティクルごとにランダムなパターンから再生を開始させる


開始パターンをランダムにしたい場合、Timeノードから得られる値に全パターン分の範囲内でランダムな値を足すようにしてあげればOKです。

Dynamic Parameterノード(cascadeでDynamicモジュールを追加して0~1の乱数を設定する必要があります)やParticle Random Valueノード(こちらはGPUパーティクル限定 / 詳しくはこちらの記事をどうぞ)を使って得られる「0~1」のランダムな値に対して全パターン分の値を掛けて、Timeに足せばOKです。

f:id:moko_03_25:20180322002652j:plain

 

パターン切り替わり時に次のパターンをブレンドさせる


Timeから得られる値に1を足してあげるだけで次のパターンになります。
構成は一気に増えますがやっていることとしてはとてもシンプルです。

今の絵柄と次の絵柄をLerpノードでブレンドさせますが、遷移させるためにTimeの値をFracで小数点以下だけ取り出して、LerpのAlphaポートに繋いでいます。

f:id:moko_03_25:20180322002649j:plain

 

パターンが切り替わる速度を変える


説明が後回しになりましたが、1秒に1パターンの切り替え速度では遅いですよね。
図のようにTimeに30を掛けると1秒間に30回、パターンが切り替わります。

f:id:moko_03_25:20180322002646j:plain

ただし、Timeの値はもんしょさんの記事で解説されているようにパーシスタントレベル開始時からカウントされるため、時間経過とともに値がどんどん大きくなっていきますが、30のように大きな値を掛けるとさらに巨大な値になります。そして値が大きくなるにつれfloatの精度が悪くなるためか、このように絵が崩れていきます。

f:id:moko_03_25:20180322002643j:plain

そこでTimeノードのプロパティ「Period」で、ある程度のカウントで0にリセットされるようにしておきます。リセットされる瞬間は切り替わりがおかしい絵が一瞬出てしまいますが、これは仕方ないかと思います。。

f:id:moko_03_25:20180322013527j:plain

 

パーティクルの寿命に応じて一通り再生させる


パーティクルが生まれてから死ぬまでを0から1に遷移する値で取得できるParticle Relative Timeノードを使って、最初のパターンから最後のパターンまで再生させる構成は図のような感じになります。

f:id:moko_03_25:20180322013524j:plain

開始パターンをランダムにする必要が無いので構成も楽ですね。

以上になります!参考になれば幸いです。
 

C# PictureBoxの主なプロパティ

良く忘れるのでメモ。

デフォルトから変えることが多いものを中心にメモっています。

◆動作

SizeMode
 StretchImage ‥にするとPictureBoxのサイズに合わせて画像を拡大縮小する

◆直に記述しないといけないもの

pictureBox1.AllowDrop = true;
 ドラッグ&ドロップで画像を受け付ける場合にTrueにする
 public Form1() 内に記述すればOK

UE4にPythonプラグインを導入してみる

UE4.17でPythonを使用できるようにするUnrealEnginePythonプラグインを導入してみたのでメモ。

いくつかの記事を参考にさせて頂きました。

まず前提条件が以下になります。

Python環境そのものをPCにインストールしていなくても大丈夫
・ビルド環境が無くても大丈夫
プラグインの入ったzipをDLして所定の場所に入れるだけ

続きを読む