Go our for Creation

UE4始め3DCGとか、カメラとか読書録、ポエムとか。

第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ぷちコンデビュー奮闘記 振り返り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枚くらい表示させたいよね、過去に遡りたいよね、アニメーションつけたいよね、…と今後盛り込みたい機能は沢山。

UE4ぷちコンデビュー奮闘記 振り返りPart1 ~制作手順~

初めまして、シントと申します。

細かい自己紹介はプロフ欄に任せるとして、

タイトルに有る通り今回は「UE4を知る」べく第7回ぷちコンに参加してみることにしました!

 

極め本はパラパラ眺めていたものの、実際に自分で何か作ってみたことがない!

・・・ということで、1つ作品を提出することを目標にして、

その”試行錯誤の過程”を記事でまとめてみることにしました。

 

historia.co.jp

  

なお、この記事を書いている時点で既に投稿は完了しているので、オチに使わずもうここで出す。

www.youtube.com

 技術的に難しいことはほとんどしていないのですが、OpenCVの導入のみ別途記事でまとめようと思います。

 

以下、備忘録的にざっくりと項目に分けて記述。

1.どんな作品を作ろうか

2.何をどんな順番で作ればいいんだ

3.やるか〜

 

1.どんな作品を作ろうか  

第7回ぷちコンのテーマはサプライズ。

元々写真を撮るのが好きなこともあって、美しいシーンの中をカメラを持って歩いてみたいなぁとUE4を見た当初から思っていました。

 

↓こんな感じでちょくちょく写真をアップしています。

廃墟巡りとか、星空撮りにニュージーランドいったりとか。

SHIN .T | Flickr

 

美しい景色を求めて電車に揺られたりレンタカー走らせたり、飛行機で飛んで行くのもそれはそれで良いのですが。仮想世界にそういうものを生成させて、同一シーン内でも少しずつ顔色を変化させるようなステージがあったら楽しいだろうなと思っていました。

 

ということで、ささやかながら「自然の様相の変化」をサプライズとする散歩型カメラ作品を作ろうと言う結論に至りました。

 

 

2.何をどんな順番で作ればいいんだ

今でこそ連番を振っていますが、最初はイベントの定義の仕方すら解らないところからのスタート。。

何がカンタン/複雑なのか、どの動作・処理が「ひとかたまり」なのか、どの構成要素を作れば目的のものが仕上がるのか。

 

(1)新規プロジェクト作成

(2)FPS/TPS視点を切り替えてみる

UIを作ってみる

(4)UI用のテクスチャを作ってみる

(5)UIとカメラのパラメータを紐づける設定パネルを作ってみる

(6)マップを作成してみる

(7)タイトル画面を作ってみる

(8)ステージ選択画面を作ってみる

(9)タイトル→ステージ選択→ステージと遷移させてみる

(10)シャッターを実装してみる

(11)ローカルの画像を動的に参照する関数をC++で書いてみる

(12)スクリーンショットを動的に見返せる仕組みを作る

 

Shutter Travelを作成するにあたって作成した機能をざっくりと分けると、上記12項目になるのかな、と。

 

自分がどの程度作りこめるかも解らなかったので、初期段階では7,8,9,11,12は「可能であれば作りたい機能」のカテゴリでした。

 

3.やるか~

具体的に何をやったか書いても需要はないと思う(非常に基本的な内容ばかり)ので、躓いたポイントを箇条書きに。

 

(1)新規プロジェクト作成

 -FirstPerson?ThirdPerson?UnrealC++???

  ⇒ThirdPersonTemplateを選定

 -Marketplaceのアセットを使いたいが作成の順番は?

  ⇒作成後に「プロジェクトに追加」

 

(2)FPS/TPS視点を切り替えてみる

 -カメラの切り替えってどうやるんだろう

 -GameMode?PlayerCharacter?何処を弄ればよいのか

  ⇒3rdPCに2個のカメラを置き、ボタン入力で切り替え式に

 -どのノードで切り替える?

  ⇒【Set Active】を利用

 -切り替わったけど戻らない…

  ⇒【Set Hidden in Game】+【Deactivate】を利用

f:id:shin_t_o:20170403223635p:plain

 

(3)UIを作ってみる

 -FPS視点に設定パネルを表示したい

  ⇒【Event Begin Play】後に【Create Widget】+【Set Parameter】+呼び出しイベント

  ⇒合わせて、ウィジェット側に呼び出しイベント詳細:【Add to Viewport】

 

(4)UI用のテクスチャを作ってみる

 -FPS視点にファインダーのグリッドを表示したい

  ⇒PNGファイルで作成したものをUE4で読み込み

f:id:shin_t_o:20170403231207p:plain

 

(5)UIとカメラのパラメータを紐づける設定パネルを作ってみる

 -何処をどう弄るんだ…?

 -動かすのはスライダーだが変わる値はどう取得するか

 -変わった値を3rdPCのカメラ値に紐づけ…られるのか?

 -変化したスライダー値は「テキストボックス」にも代入したい…

  ⇒スライダー値のBind

  ⇒スライダーからOnValueChangedにてイベント作成

   +取得値を変数に格納

    +格納した変数を戻り値にして、再度スライダーに代入(更新)

   +取得値を【Map Range Clamped】を用いて値幅調整

    +幅調整後の値を引数として、イベント呼び出し

  ⇒3rdPCにてカメラを【Activate】したのち、【Set Field Of View】に値を渡してみる

f:id:shin_t_o:20170403233641p:plain

f:id:shin_t_o:20170403233644p:plain

 

(6)マップを作成してみる

 -そういえば Procedural Nature Pack Vol.1 を持っていた

 -Youtubeの 解説動画 を見ながら作ってみる(今度もっとじっくりやってみようかなと)

f:id:shin_t_o:20170403234509j:plain

 

(7)タイトル画面を作ってみる

 -Levelを分けるのが良いらしい

 (参考:UE4:タイトル画面でのボタンの設置について - 僕の私のUnrealな日々

 

(8)ステージ選択画面を作ってみる

 -7と同一レベルにし、Widgetの表示のみ切り替えることに

 -ステージをクリックしたときにレベルを切り替えたい

 -レベル切り替え時に良い感じに画面をフェードアウトさせたい

  ⇒【OpenLevel】+UMG Animationで定義

 

(9)タイトル→ステージ選択→ステージと遷移させてみる

 -複数のウィジェットを呼び出したいときって、【Begin Event】→【Create Widget】で延々ノードをつないでいけばいいの…?

  ⇒解らなかったから今回はそうしてしまった(書く場所だけ分散)

f:id:shin_t_o:20170404000333p:plain

 

(10)シャッターを実装してみる

 -FPS視点に表示させた設定パネルのスライダーをカメラパラメータと連動させたい

FPS視点でのシャッター=カメラ撮影=スクショという構造を作りたい

  ⇒シャッターアニメーションをUMGで作成(黒いImageが下りてきて戻るだけ)

  ⇒キー入力でコマンド実行(HighResShot)しアニメーション再生

 

(11)ローカルの画像を動的に参照する関数をC++で書いてみる

(12)スクリーンショットを動的に見返せる仕組みを作る

 ⇒この辺だけ次のPart2で別にまとめてみます

 

 

・・・と、ざっくりと今回辿った道をなぞりなおしてみました。

全然書ききれていないので、

 ・LvBPとCLBPの違いってなんだ・・・

 ・画像の表示ってどうするんだろう(Blueprintじゃダメなの!?)

 ・Unreal C++ってどうやれば弄れるようになるの

 ・マイルストーンの引き直し(3,4回)だらけ…

  →段々とマイルストーンの置き方も精度上がっていったり

とかとか…本当に色々と勉強になった機会でした。