Go our for Creation

UE4始め3DCGとか、プログラミングとか、カメラとかとか。

【UE4】ハイトマップのノード処理を何となくグラフで可視化しようとしてみた

(※5月19日追記 Clampの箇所を書き直しました。unwithererさん、ありがとうございます!!)

 

UE4マテリアルデザインの本を読んでいる中で何となく気になった箇所があったので、備忘録的に更新。本のなかでも「理屈で考えずに」と言われているのでひっそりとまとめてみる。

www.amazon.co.jp

※記事の内容に誤りがあればご指摘頂けると幸いです。。

 

記事の内容を無理やりまとめるとするなら、

「此処で述べられているハイトマップ処理の裏でなされている計算を視覚的に考えてみた」って感じでしょうか。。

 

「第9章 古く汚れた壁を作成しよう」p.230より、

ブロック壁面+漆喰剥げを表現するためにベースカラー/ラフネス/ノーマルマップそれぞれ2通りのテクスチャをブレンドしたのち、頂点カラーを塗り塗りして漆喰の剥げを表現していく工程。

 

塗るブラシにもマップを使ったほうが複雑な表現が出来るよね、という箇所で下記のようにBlueprintを組むことになります。

f:id:shin_t_o:20170515010342p:plain

 選択状態にある箇所の[Multiply]・[Add]・[Power]・[Clamp]ノード、一体何してるんだろと少し考え込んでこんなグラフが浮かびました、というのが今回の記事の流れ。

 

 

 ハイトマップ内に引いた或る直線の始点・終点(x:0~1)に沿って、白黒の高さデータが対応している①の灰色線のような関数 f(x):0~1を考えてみます。凸凹のハイトマップの1断面を切り取って横から高さを見た感じです。

(実際にはpixelデータなので、曲線ではない不連続ステップ関数になるはずですが、今は簡略化して曲線で表示)

 

対してVertexColorはy=kk:0~1)の定数と置き換えられるので、グラフ上に載せると②のように横1本の直線に。これを前提として、選択箇所の処理をグラフに置き換えてみます。

f:id:shin_t_o:20170519003100p:plain

 

①Multiply

ハイトマップデータ(y=f(x))とVertexColor(y=k)の積によって、縦軸方向に少し縮尺が変化した関数y=kf(x)が生成されます(赤線)。

 

②Add

それに対して再度VertexColorを加算することで、グラフ的には縦軸方向への平行移動が生じ、

y=kf(x)+k=k(1+f(x))

となります。

 

③Power

コレを指定値ぶん累乗するということは、

y=(k (1+f(x)))^n

となります。指数関数なので、1より大きい値はより1から離れ、1より小さい値は急速に0に収束します。1を軸として上下に引き伸ばす感じでしょうか。

 

Clamp

引き伸ばした関数を0〜1の範囲で切り取る、足切りならぬ頭切りの作業です。

具体的には、対象範囲で1を越えるような値は全て1とする(累乗のため値がマイナスになることはない)ということです。ムリくり式で表すならば、

y=(k (1+f(x)))^n (y<1の場合)

y=1 (y≧1の場合)

となります。

実際にはハイトマップは2次元データなので、y=f(x,y)x,y:0~1)と書くのが正しいのですが。…などとだらだら述べてきたところで、もはやごちゃごちゃしててあんまり数式を追う意味もなくなってきたので、グラフでどうなるかだけイメージしてみます。 

 

 

③のPowerによって、元々1より大きかった値はぐーんと大きくなり(頭が切られて皆1=白に)、1未満の数は0に収束していきます。事例だとなめらかな曲線ですが、その勾配がどんどん鋭くなっていくイメージです。どうでしょう、白黒はっきりつける「コントラストを強める」という直感に合うのではないでしょうか。

 

…ごめんなさい、それが言いたいがためにこんなに長文になりました。

特にオチはないです。終わり。

 

※マテリアル本だとnをMaskContrast値と名付け、値を20に設定しているようですが…20乗もしたら値が飛び跳ねそうな気が。

【読書】非常識な建築業界 ~「どや建築」という病~

www.amazon.co.jp

 

いままではtxtファイルやA4用紙にメモ書きしてきたけれど、折角なのでブログに読書メモも残していこうかなと。メモなので文体も変えて。

 

建築CGパースの会社に所属して半年ながら、それまで建築もCGも未経験ということもあり知識の補完兼ねて買って読んでみました(序に言うとKindleセールだったので)。

 

−−

 

正直なところ…始め1割読んでみて、言葉を失った。

クライアントとの打ち合わせにたまに同席してみて薄々感じては居たが…思った以上にこの業界酷いな、というのが率直な感想。

 

此処数日、中国深センの最先端の姿をTwitterのコメントや記事を通して浴びる機会が多かったので、尚更酷い。実に酷い。

「つくったは良いけど誰も利用しない施設」の抱える闇、みたいな話が延々出てきて辛い。

 

※この辺とかご参考に

 

第7回ニコ技深圳観察会(2017年04月) 感想まとめ:tks(高須 正和)のブロマガ - ブロマガ

 

著者が繰り返し批判していたのが脱構築主義建築

従来の建築が当然のように守ってきた「建物を立てる上でのルール」からぶち壊そうとする流儀、という印象を受けた。

 

新国立競技場問題の根底にある脱構築主義ってのは、現代アート的な考えを建築に当てはめてしまったモノ、という解釈をしたのだが、合っているだろうか。そして、「いい大人なんだから、そういうことは他人に迷惑がかからない範囲でやりましょうね」っていう話に集約されるんだろうか。

 

「普通の」「無個性の」建築から脱構築主義へ。大型建造物から、小規模建造物へ、そして住居へ。既に戸建が飽和している中で、彼ら建築家は何処を目指すのか。

そして彼らに一戸建の建築を依頼する我々一般人側からすれば、そういう流れの変化がある中で、自分が作って欲しいものとマッチするかどうか、という視点を持っておくしか無いのか。

 

40歳以下の建設業就業者が全体数の2割に満たず、実質最高決定権を持つ(現場)工事監督はじめ管理領域に於いては労働派遣法の改正により派遣労働が増えた結果、その場限りの面々による報告書上での「体裁の良い」作業が繰り広げられ、当然のように人材は育たない。

 

後半は(余りの現状の酷さに)読むのがしんどかった。
ただおかげで下請けの末端の末端ながら、業界のイメージがぼんやり頭に浮かんできた。実際に施工や設計やってる人も身近に居るし、現実はどうなの?って処をちょっとずつ聞いていってみようと思う。

【カメラ】目黒川の桜から「夜景の撮り方」を振り返る

ブログを始めてみて、備忘録も兼ねてCG系の記事を3つほど書いたところで今回はカメラの記事をまとめてみようかなと。

 

特にオチはありませんが、あんまり「撮ったときに感じたこと」をまとめた記事って無かったんでその辺をつらつら。

 

 

◆愛用機スペック

機種:Nikon D7000

レンズ1:AF-S NIKKOR 18-35mm f/3.5-4.5G ED

レンズ2:AF-S DX NIKKOR 18-200mm f/3.5-5.6G ED VR II

三脚:SLIK F740

 

ボディに関してはあと半年もすれば発売7周年を迎えてしまうような古個体ですが、まだまだ使いこなせている自信もないので引き続き旅を共にしようと思っておりまする。

レンズ2に関しては大学時代の友人から安く譲ってもらいました…何時まで経っても値崩れせず、本当に良いものを譲ってもらったと未だに感謝。。

 

1.広角レンズで撮ってみる

2.望遠レンズで撮ってみる

3.番外編(魚眼レンズ)

 

1.広角レンズで撮ってみる

目黒川の桜は去年、一昨年と何回か撮ってきたんですが、ずっとこれでした。

んでそれも下記2通りのありきたりな感じで。

 (1)シャッタースピード1秒以下、ISO上げ、絞り開き

 (2)シャッタースピード10秒以上、ISO上げ、絞り閉じ

 

(2)は桜に限らず未だに採用している夜景の撮り方で、よくカッコイー夜景写真で見る放射状のアレ(画像真ん中右寄りのアレ)が実現可能。

f:id:shin_t_o:20170416194027j:plain

(SS:20sec,ISO:250,f:25,FL:26mm)

でもこの撮り方ってありきたり…というか。

去年も同じ感じで撮っていたなあと。

f:id:shin_t_o:20170416194244j:plain

因みに当然ながら彼らは編集済み。

Google Nik Collectionを用いて主に彩度を調整しています。Lightroomとかは持ってない・・・しNikで十分な感じがしてます。いまのところ。

 

 流石に今年は少しテイストを変えてみようかな、ということで望遠レンズを使って撮ってみた。という2に続く。

 

 

2.望遠レンズで撮ってみる

ここ数年、短焦点や広角レンズの距離が短いものに頼り過ぎていて望遠を殆ど使っていませんでした(画がざらつくわりに遠近感が出しにくい、と思い込んでいた)。が、結論から言ってしまえば結構良い感じのが撮れた。ちょっと侮ってました。

 

手前のオブジェクトにフォーカスしつつ、後ろのライトを「ぼんやり」にするにはどうしたらいいのかなあと思って短焦点35mmで焦点距離F値を弄っていたのですが、どうも後ろがボヤけない。

 

どうしたもんかと試しに18-200mmの望遠レンズを使ってみたら、これだ!って感じのが撮れた。

f:id:shin_t_o:20170416195012j:plain

(SS:1/25sec,ISO:1600,f:5.3,FL:105mm)

欲を言うなら、F値もっと小さい望遠があればISO削ってノイズ減らせたのになぁ…というところ。他にも色々と撮ったんですが、あんまりここに挙げても容量制限喰らうので後日ちゃんと編集してFlickrに挙げようと思います。

SHIN .T | Flickr

 

3.番外編(魚眼レンズ)

 魚眼レンズはなかなかクセが強くて、今のところ廃墟星空くらいでしか活かせておりません。。

 

今までの数少ない経験から言えば、魚眼が活きるのは

 -「出来る限り多くが映っている」ことで世界の大きさを表現する=星空

 -基本的にXYZ方向の辺のみで構成されているモノを敢えて歪めることで不安定化を促進する=廃墟

くらいしか思い浮かんでおらず、元々自然的に曲がっている枝を魚眼に収めたところであんまり違いが解らないよなあ…と思っていたんですね。

 

ただ、「XYZ方向の辺のみで構成されているモノ」をアタリとして置くならこれはこれでアリ…?という感じ。

f:id:shin_t_o:20170416200353j:plain

(SS:1/100sec,ISO:1600,f:2.8,FL:15mm)

 

桜 × 魚眼についてはもう少し色々試行錯誤してみたいところ。

カメラ関連の記事はどういうテイストで行くかちょいと試行錯誤が必要そうです。

【CG全般】第11回 3DCG Meetup

昨日4月9日に、表題の3DCG Meetupに初参加してきました。

connpass.com

何処まで書いてよいのか解らないのと、私自身そこまで知識がなく有益なことは書けなそうなのですが備忘として。

 

結論から言えば、とっても良かったです!!!!!!!

次回以降も是非参加したいなと。そしてもっと多くを吸収できるようにストックを増やして置かなければなあと、思った次第であります。

 

内容はTogetterを追えば出てくるので、ここでは感想のみ。

 1.MELのお話

 2.工数のお話

 3.WebGL2.0のお話

 4.Substanceのお話

 

*MELのお話

CG自習部屋 Mayaの時間の管理人、Ariさんのお話。

自身の経験で関連しそうなところ言えば、戸建・マンション等の建造物を3ds maxでモデリングするにあたって効率化出来そうな箇所をmaxscriptで書いたり、Excel VBAで業務効率化のツールを量産したり…というところ。

 

Twitterでも呟いていましたが、主な感想。

▷作業の記録や既存の書き換え、総当りで記述みたいな非効率作業で場当たり的なプログラミングをしていた自分には、基礎的な話&ライブコーディングがとても有り難かった

▷今回のように思考の足並みを揃えながら進んでいく感じのプログラミング勉強会、結構需要がありそう(少なくとも私は受けたい)

 ▷何より、スクリプトを閃くまでの思考過程を話して頂いたことに感動!

 

自分でもMEL書いてみたくなっちゃいました。。 

 

 

*工数のお話

モバイルゲーム・アプリの3D、UIデザイナー、イトウツナシ(いたう)さんによる工数計算のお話(資料URL)。

IT会社時代にRedmineでの営業案件管理、WBSでのスケジュール管理(忘年会企画まで、、)始めSalesforce、Cyboze(デジエ・メールワイズ等)も色々と経験はしていたのでとっかかりやすい内容でした。

 

ただエンジニア経験はゼロ、デザイナーは未だ数ヶ月という見習い状態なので工数計算や進捗管理のお話を現役の方から聞けたという事実がとても貴重。 

後日、自身のぷちコン作品を題材にWBS引いて整理し直してみようかなと。

 

 

*WebGL2.0のお話

WebGL大好きイケメン兄さん 、という感じのh_doxasさんによるWebGLのお話。

恥ずかしながら、WebGL全く知らなかった。存在すら知らなかったw

 

Web周りって自身の経験に照らし合わせると、Excel VBAでWebを絡めたマクロを組んだときにHTMLとかDOM周りを少し調べた/DreamWeaverで既存サイトの更新をしてみたくらいのもの。

元々、「出来ることが限られている」というよりか「平面に於いて出来うる表現を色々頑張っている」という印象だったのが、2.0の話を聞いて少し楽しそうに見えてきました。

 

現代に於いてもやっぱりWebって「圧倒的多数」を受け入れる窓口な訳で。

この界隈での表現というのも、追い追い学んでいきたいなと思うきっかけのお話でした。

 

*Substanceのお話

もんしょの巣穴blogの管理人、もんしょさんによるSubstanceのお話(資料URL)。

聞いてて穏やかになるようなトーンにユーモアを交える素敵なお方。

 

恥ずかしながら、Substanceシリーズ含めマテリアル作成というものを未だしっかりやったことがない。。

今回ぷちコンで作品を作ってみて、今後廃墟シーンだったり山岳シーンだったりとコンテンツを増やしていきたいと思っていました。そんな中でマテリアル作成は絶対必要になる知識だし、Substanceやりたいなぁ…と感じる講演でした。

 

と、いうか建築CGなんてゲームと比べ物にならないくらいアセットの種類も1枚に携わるステークホルダーも少ないし、マテリアルライブラリの共有やワークフローの確立ってメチャクチャ簡単なはずだよなあ。。と聞いていて感じてしまった。。

 

特にオチは無いのだけれど、この業界に飛び込んで半年。

最初は解らなくとも、こういうイベントに積極的に参加して知識を蓄積していくのは良い動きな気がする!と感じさせてくれるイベントでした。

 

主催者の方々、登壇者の方々、ありがとうございました。

 

【UE4】UE4ぷちコンデビュー奮闘記 振り返りPart2 ~OpenCVによる画像更新~

前回はぷちコンに際してどういう思考の順番を辿ったか、というところをざっくりとまとめてみましたが、今回はその中で(個人的に)最も苦戦したOpenCVの導入+記述についてまとめます。

※まだ試行錯誤中のため、内容に誤りがある可能性があります※

※知識がアップデートされ次第、更新していきたいと思います※

 

今回でいうところの下記のシーンに適用しています。

 

f:id:shin_t_o:20170409183732g:plain

カメラで撮った写真を、バックモニターを通して見返す※という実際に僕が(というかカメラ持ちさん皆かな?)やる動きを、今回の作品で再現しようと思いました。

 ※これ(愛用機:D7000)↓

f:id:shin_t_o:20170409202115j:plain

 

必要な機能をざっくりまとめると

 ・マップ移動中、ボタンひとつでバックモニターを呼び出したい

 ・バックモニターには、「それまで撮った写真を見返す」機能をつけたい

 ・新しい写真を撮るたび、モニターで見返せる写真が更新されていく

  └ 表示する1枚目は最新のスクリーンショットファイルを参照

  └ モニター内で画像をめくっていくと、過去の写真に遡れる

という感じ。普段自分が撮りたい場所にカメラを持って行って、写真を撮り、それを見返すという一連の動作を再現してみたかったんです。

 

しかしUE4の仕様上、スクリーンショットは連番式にローカルに保存され、都度更新されていくため事前に画像をEditor上にImportしていなければならないという前提のBlueprintでは対応できない…?

=HUD上にImageを配置し、DynamicMaterialを都度更新していくような関数を作成しなければならない・・・?

という壁にぶつかり、色々調べていたら下記に辿りつきました。

UE4でOpenCV使う - #memo

Integrating OpenCV Into Unreal Engine 4 - Epic Wiki

どうやら(現段階での私の知識量・スキル&残り作成時間を考えて、)C++は避けられないらしい…ということで期せずしてUnreal C++デビュー。

 

 導入に際してのだいたいの手順はIntegrating OpenCV Into Unreal Engine 4に記載されているので、今回辿った手順をざっくりとまとめる。

 

1.外部プラグインであるOpenCVの導入

2.Visual Studio側で実装

3.Blueprint側で実装

 

1.外部プラグインであるOpenCVの導入

そもそもUnreal C++環境の構築については公式(

Unreal Engine | UE4 に Visual Studio を設定する方法

)で丁寧な説明がなされているのでそちらを参照して頂ければと。

 

下記は「Integrating OpenCV Into Unreal Engine 4」にて記述されている目次を抜き出したものです。

 Using the Plugin

  -[プロジェクト名].Build.CS内のPublicDependencyModuleNamesを書き換え

 Copying the OpenCV Files

  -説明の通り、当該ファイルを指定のフォルダ内にコピーすればOK

 Adding OpenCV Dependencies

  -[プロジェクト名].Build.CSのinclude部にSystem.IOを追加

  -それ以降はpublic class [プロジェクト名]内部に記載

 Copying the DLL's to the Build

  -同上、ファイルのコピー

f:id:shin_t_o:20170409224841p:plain

余談ですが、上記URLで紹介されているWebcamReaderを最後まで実装するとPC内に搭載されている(ノートPCであれば恐らく内蔵カメラが検出優先度高?)Webカメラで撮りこんだ映像をUE4内で表示できるようになります。

Webカメラの映像をVideoTextureに変換し、毎Tick更新してDynamicMaterialに代入する仕組みのよう。

 

2.Visual Studio側で実装

ここはもうC++の記述経験もなく、UnrealC++も初だったので聞きまくることに。

やったこと一覧だけまとめてみる。

・ヘッダーファイルのincludeにopencv2シリーズ記載

・ヘッダーファイル内で関数宣言

C++ファイル側でusing namespace std/cvを記述

C++ファイル側で文字列を引数とし、特定のフォルダ(=スクリーンショットファイルがあるフォルダ)を参照し、WebcamReaderでも使われていたMat2TextureによってTextureを変換する関数を記述

⇒「文字列を引数とする、スクリーンショットファイル参照関数」が出来上がった

f:id:shin_t_o:20170409232912p:plain

 

 

3.Blueprint側で実装

2で作成した関数(LoadPic)を用いて、

 ・ボタンを押した際にHUDが表示され、

 ・HUD表示とともに、HUD上に配置してあるimageファイルのマテリアルを更新

 ・更新する際、「スクショ1枚撮影するたびに1増えるカウンター」を用意し、最新のスクショファイル名を指定するためのパラメータに用いる

 

f:id:shin_t_o:20170409232426p:plain

 

という感じ。

 

取り急ぎ今回はここまでに止め、最低限必要な機能のみ(見栄えも考えて)盛り込みました。ただOpenCVで呼び出されている画像の見え方がLocalのモノと異なるとか、バックモニター1ページに画像6~9枚くらい表示させたいよね、過去に遡りたいよね、アニメーションつけたいよね、…と今後盛り込みたい機能は沢山。