龍が如くこんにちは、セガゲームス龍が如くスタジオの伊地知です。Blogで掲載しており、これで二回目となります。Houdiniというセッションがありまして(セッションのスライドはこちらからダウンロード出来ます。)そのスライドの後半に「実際にすぐにゲームに出して使えるエフェクトのテクニック」=「トリック」を3つご紹介させて頂きました。Blogで詳細に解説させて頂きます。今回は1つ目である「加工して戻す」というトリックだけを扱うことにします。シーンファイルもご利用頂けますしHoudiniの体験版(Apprentice版)でも開けますので実際にご自身のPC(Windows)、Mac、Linuxで確認しながらご覧になるとご理解いただきやすいでしょう。(HoudiniはいろんなOSに対応しています!)今回は初心者の方でも安心の詳細解説となっております。wrangleの行数も最低限に抑えてあります。操作方法や基礎知識に関しては1年前の前回のHoudiniの回でもtechblog.sega.jp御紹介させおりますのでその辺が分からない方はそちらも合わせてご覧下さい。1.加工して戻す(RestSOP)では1つ目のトリックの内容から説明させて頂きます。Houdiniの新規シーンを開いた想定でお話をさせて頂きます。ダウンロードして頂いた方はシーンを上から順にデータを見ていって下さい。Optionsを開きます。FPSを30、Endを256にしてSaveAsDefaultボタンを押します。ネットワークエディタのオブジェクトレベルでTabキーを押しTabメニューでgeと押すと候補が出ますのでGeometryを選び作ります。できたgeo1にダブルクリックやiキーなどでジオメトリレベルに潜ります。作業はこのジオメトリレベルで行う事になります。TabメニューからSphereを選択してPrimitiveTypeをPolygonFrequencyを50にします。次にTabメニューからUVTextureを出してつなげます。Seamsにチェックします。この状態でビュー上でSpace+5を押すとUVの状態が確認出来ます。これはUV値のUの最大値で全体を割るという意味でこうする事によって01の範囲内に収めます。上でSpace+1を押してPerspectiveに戻します。Transformの出力につなげます。ポイントアトリビュートの@rest,@Cd,@Alphaを設定します。VEXpressionの欄に下記のコードを記述します。{1,1,1};@はアトリビュートという意味でジオメトリのクラス(Point,Vertex,Primitive,Detail)自体に持たせる変数です。@の前のvやfは型を指定しておりvならベクター、fならフロートを定義します。ここではRunOverがPointになっているのでPointのクラスのアトリビュートを制御するという事になります。@restはポジション(@P)を保持しておく為のアトリビュート。頂点α(@Alpha)は0で初期化、頂点カラー(@Cd)は白で初期化という意味になります。TabメニューからPointWrangleを出して先程のPointWrangleにつなげます。1.0;VEXpressionの欄にはこの様に記述します。再度Alphaを1にするのには訳がありますがそれはあとで解説します。Bend)を出して先程のPointWrangleにつなげます。Lengthを2にします。する事で球がZ軸に沿って360度ねじれます。TabメニューからMountaionを出して先程のBendにつなげます。Sizeを2.18、Scaleを0.06,0.16,0.06、OffsetのX値を-14に設定しY値は20に設定し1フレーム目でAltキーを押しながらクリック、256フレーム目で18と設定しAltキーを押しながらクリック。これでパラメータの欄が緑色になったのが分かります。これはアニメーションが設定されていますという事を現しています。ちなみにShiftを押しながらクリックでアニメーションエディタが開きます。Octavesを9、Lacunarityを2.19、Roughnessを0.407とします。この状態で再生ボタン(画面左下にあります)を押すか、カーソルキーの↑を押してみて下さい。球のトゲトゲが蠢きながら下に流れていくアニメーションが確認出来ます。確認出来たら停止ボタン(画面左下にあります)を押すか、Ctrl+↑を押して止めて下さい。TabメニューからTransformを出して先程のMountainにつなげます。RotateのX値を31、Y値を5、Z値を5とし少し回転させますTabメニューからClipを出して先程のTransformにつなげます。先程と同じ要領でDistanceの1フレーム目に-1.25、256フレーム目に1.36とキーを打ちます。この状態で再生させると下半分が削れた状態が段々と上に上がっていってトゲトゲの球が消えていくのが分かります。TabメニューからPointWrangleを出して先程のClipにつなげます。@rest;VEXPressionの欄にこの1行を入力すると歪められていたポイントのポジションが元に戻ります。この挙動を不思議に思う方もいらっしゃるかもしれませんがこれは単純に@restに保持していた座標で元の位置に戻っただけなのです。消されたポイントは戻りません。歪んだ状態で水平に切るという事は座標を戻すと水平では無く歪んだ状態で削れていくのです。↑キーで再生させるとこの様に動作しているのが確認出来るでしょう。映像の表現ならここまでで良いですがゲームの場合ゲーム中で表現する為に工夫が必要です。CEDEC+KYUSHU2018では私はテクスチャパターンアニメーションでやりましょうと言ってしまいましたが実はもっと良いαカットオフを用いた手法があります。シェーダ側でαしきい値を用いて透明にするのですがそのαをどう出すのかがこのトリックの鍵になります。2つ目のトリックで紹介するSolverというノードをもうここで使います。毎フレーム値を加工して蓄積させていく事が出来るノードで評価した結果をキャッシュしておくことが出来ます。TabメニューからSolverを出して上から4つ目のpointwrangle1から左から1番目のところにつなげて左から二番目の入力にpointwrangle3をつなげます。ダブルクリックしてsolver1の中に潜ります。TabメニューからAttributeTransferを出してPrev_Frameを第一入力にInput_2を第二入力につなげPointsにチェックを付けAlphaを指定します。AttributeTransferは第一入力に対し第二入力のアトリビュートを近いものから転写していくノードです。MayaであればTransferAttribute、Softimageをお使いだった方ならGATORを御存知だと思いますがその万能版だと思って頂ければ理解が早いかと思います。(Softimageユーザーの方ならMayaのTransferAttributeなんかと比べられるのは屈辱だと思いますがHoudiniのAttributeTransferからすればどちらも五十歩百歩です。)SolverSOPの中でこの様なつなぎ方をすると前のフレームの結果に対し現在のフレームの第二入力のアトリビュートを転写するという意味を持ちます。@opinput1_Alpha/256;と記述します。このコードと接続の意味は前のフレームの結果のアルファに対し第二入力のアルファを256で割った数値を加算するという意味になります。この2つのノードの意味は毎フレーム現在のアルファ値の1/256を加算し続けるということになります。uキーで1つ上の階層に戻って256フレーム目まで進めます。すると球がこの様に見えているはずです。毎フレームアルファ値を累積して256フレーム分貯めた結果がこれです。これをUV座標に基づいてテクスチャに書き出してやります。GameDevelopmentToolsetのSimpleBakerを使うやり方が最も簡単でしょう。GameDevelopmentToolsetのインストールの最も簡単な方法は左上のGameDevelopmentToolsetタブのUpdateToolsetボタンを押すことです。ゲーム会社や映像スタジオ、CGスクールなどでプロキシ環境下であればこの機能がうまくいかない場合があります。その際は公式のgithubからダウンロードして手動でインストールして下さい。Bakerを出して下さい。ここで普通に考えればアルファにチェックを入れれば出力出来るはずなんですが何故か真っ白になってしまうので一旦@Cdに@Alphaを移してbasecolorとして出力する事になります。テクスチャを焼きます。するとこの様なテクスチャが焼き上がりますのでPhotoshop上でレベル補正かけたりトーンカーブで補正かけたりして1~254くらいの値の範囲にしておくとシェーダに食わせた時の見た目が良い様です。モデルの方も同時に出力しておきます。UVを設定したuvtransform1から出すと良いのですがそのままだと25,000頂点もありかなりメモリを食ってしまいます。uvtransform1の下にPolyReduceを作ってつなげます。Seamsを0.4にして頂点数を252にまで落とします。Keepをいろいろ試してみても良いでしょう。Outputを出してつなげます。Diskボタンを押します。これでモデルファイルも出力出来ました。Unity上で確認してみましょう。Shaderで作ったものにちょい足ししたシェーダで表示してみましょう。}このシェーダをアサインしたマテリアルを用意して適当なテクスチャを貼ってあげます。その際テクスチャのアルファに先程生成したテクスチャを入れ込んでおきます。するとこの様に表示されます。youtu.be@restに座標を保持して戻す時に削れたpointが戻らないのは当然としても生成されたpointがちゃんと良い感じの場所に戻ってくれるのは凄いと思います。中で一体どういう処理が走ってるんでしょうか?気になります。累積アルファのカットオフはテクスチャパターンアニメーションでやるより遥かに質も向上しメモリも削減出来る賢いやり方なので覚えておいて損は無いでしょう。今回はここまでです、いかがでしたでしょうか?ゲームに出力する部分は様々な手法を考慮し工夫する必要があります。現状ビルボードが主流のゲームエフェクトですがこんなトリックを用いる事で思いがけない表現をプレイヤーの方々にお見せし感動体験を演出する事も可能になるのです。ゲームエンジン側の知識もフル動員すればもっと凄いものが表現出来るでしょう。勉強する事は山程ありますし考えなければいけない事もいっぱいあります。やりたい表現が達成出来た時の喜びもまたひとしおです。次回のHoudiniの記事もお楽しみに。この記事に興味を持って頂けた方は弊社で私達と一緒に働いてみませんか?弊社ではHoudiniに興味を持って取り組めるような人を募集しています!我こそはという方、興味のある方は以下のリンクを是非クリックしてみてください。2019年が始まって早1カ月がたとうとしてますが、あなたにとって2018年はどんな年でしたか?(少々時期外れな質問なのですが...)Readyyy!私は2019年2月1日にリリースされたスマホタイトル「Readyyy!」に携わっており、とても忙しい1年でした。このタイトルは、プレイヤーが新人プロデューサー兼寮長として、男子高校生アイドル18人を育成するスマホゲームで、ゲームエンジンUnity*2を使って開発しています。キービジュアルTAとして、3Dによるチビメンや「Live2D*3」の立ち絵をはじめとする「Readyyy!」の技術的なグラフィック表現の根幹を担っています。環境によるライティングを実現するための仕組みの設計と、それに関連するシェーダーやコンポーネント*4を作りました。そのデータを「Photoshop」や「Live2D」から出力するためのツール整備もしています。夕焼け逆光の表現ご興味あれば、ぜひ遊んでみてください!ready.sega.jpCEDEC+KYUSHU2018実はこのセガテックブログのおかげで、昨年12月に「CEDEC+KYUSHU2018」での講演という、貴重な体験をさせていただきました。おかげというのは、「CEDEC+KYUSHU2018」の関係者の方が、2017年に私の書いた記事、techblog.sega.jpをご覧になって、講演を依頼してくださったのです。今回は、そのとき講演した5つの自動化効率化のお話*5の中から、ディープラーニングをテーマにしたものにプラスアルファしてお届けします。「CEDEC+KYUSHU2018」での講演をお聞きになった方も復習を兼ねてご覧いただければと思います。説明も、より丁寧になっていますので!ディープラーニングで自動的にサムネイルを作れないか!?前置きが大変長くなりました。―Pythonで学ぶディープラーニングの理論と実装」という本を使っています!難しいですがとてもいい本です。アニメ顔検出2016年ごろ、とあるデザイナーさんからこのような相談を受けました。「サムネイルを自動的に作れませんか?」サムネイルとは縮小した画像のことですが、このように顔など特徴的な箇所をクローズアップしてトリミングするケースもあります。ちなみに彼らは、「Readyyy!」の「SP!CA」というユニットのアイドルたちです。そのデザイナーさんが所属しているプロジェクトのプラットフォームはスマホでした。スマホタイトルは運営を長く続けていくため、新規要素をどんどん追加していきます。その要素を一覧で表示させたりするために、サムネイルが必要となるのです。ご存知とは思いますがゲーム開発ではアニメ顔が使われることが多く、そのプロジェクトでもアニメ顔が採用されていました。これを自動的に作成...何か良い方法はないものか...。検索すると...出てきました!「OpenCV」を使ったものです。ultraist.hatenablog.com多くの人がこれを使ってアニメ顔検出しているようですね。勉強も兼ねて「Photoshop」のプラグインという形で実装してみました。一から実装すると大変なので、サンプルのプラグインに間借りする感じで作りました。余談ですが、「Photoshop」プラグインのAPIって独特というか、なんとも難しいですよね...。下のgif動画は、プラグインを動作させたときのものです。Photoshopプラグインどうですか!?素晴らしい性能ですね!ただ、おしいのが誤検出(下の半透明で赤く塗り潰した部分)です。このOpenCV(lbpcascade_animeface)を使った手法は検出精度の調整ができるのですが、精度を上げすぎると、顔ではない部分も検出してしまい、精度を下げると、顔を検出しづらくなってしまうという現象が発生します。そのちょうどよいバランスを見つければいいのかもしれませんが、その設定で絶対大丈夫と言い切る自信がありません。残念ながら、これでは自動生成するツールとして、信頼性が足りませんよね...。顔なのか?顔ではないのか?しばらくして、1つのアイデアが閃きました。OpenCV(lbpcascade_animeface)が検出した画像の、「顔」「顔ではない」をディープラーニングで学習させて、判断させるようにすればいいのではないか...と。Network、以下CNNと呼びます)を用います。本来なら切り出した顔などの特徴量から誰なのかを判定できる素晴らしい手法なのですが、今回は贅沢(?)に、「顔」「顔ではない」の2種類の判定のためだけに使います。後で知ったのですが、この物体検出後にCNNで分類する手法は「R-CNN」という立派な名前がついていました。Kerasディープラーニングのフレームワークには、簡単で分かりやすいという評判のKeras*6を使いました。KerasはPythonによるフレームワークで、TensorFlowやTheanoなどのディープラーニングライブラリをバックエンドとして選択できます。今回バックエンドには、CPU版TensorFlowを使いました。KerasやCNNについては、こちらの記事を参考にしています。qiita.com教師データディープラーニングを始めるにあたって、まず教師データというものを大量に用意します。ここでは「顔」と「顔ではない」画像ファイル群ですね。実は、この教師データを用意するところに1つのハードルがあります。個人で用意する場合「大量に」という点が大変だと思うのですが、セガでは複数のタイトルを開発していますので、他のプロジェクトから画像を提供してもらいました。これに先ほどのOpenCV(lbpcascade_animeface)を使ったアニメ顔検出をさせて、「顔」と「顔ではない」画像群を、比較的簡単に用意できました。1000枚これで準備が整いました。100回学習させてみると、7時間ほどかかりました。学習させた成果のことをモデルと呼びます。モデルは基本的に学習回数が多いほど、性能が良くなります。特定の教師データにだけ過度に対応した状態、過学習(overfitting)になってしまうことがあります。未知のデータに対応できない状態ですね。下の図は今回学習させたモデルの性能を表しています。「acc」は正答率、「loss」は性能の悪さを示す指標で、教師データに対してどれだけ一致していないかを表しています。横軸は学習回数で、多いほど性能が良くなる傾向を示しているのがお分りいただけると思います。実は教師データの全てを学習に使っているわけではなく、教師データの一部は未知のデータに対応できるかどうかのテストに使っており、そのテスト結果が、「val_acc」と「val_loss」です。緑のグラフ「val_loss」は、学習を繰り返すたびに上昇していく傾向にありますが、これは過学習状態であることを示しています。100回ではなく、30回ぐらいで止めておいたほうが良いモデルと言えそうですが、今回はこのまま100回学習したモデルで話を進めます。このモデルを切り出した画像に適用してみましょう。学習の成果は!?「Readyyy!」のキービジュアルでの判定の成果はこのようになりました。7番だけ99%顔と判断して失敗してしまいましたが、この手法は有効そうです。デザイナーが使えるようPhotoshopで動作させてみるでは、この顔検出+顔判定のシステムを、「Photoshop」から使えるようにしてみましょう。システムはPythonで動作しているので、「Falcon*7」というフレームワークを使って、WebAPIとしてアクセスするようにしてみます。手順としては、Photoshop上でドキュメントを一時的にファイル(JPEG等)保存する。Photoshop上でそのファイルを読み込んで、WebAPIを使ってアップロードし、応答を待つ。画像を受け取ったWebサーバー側で、アニメ顔を検出する。引き続きWebサーバー側で、「顔」か「顔ではない」かを判定し、「顔」の矩形の座標を返す。Photoshop上でその結果を受け取り、選択範囲として反映する。今回は「Photoshop」上での動作には、プラグインではなくスクリプト(JavaScript)を使います。青い文字が「Photoshop」スクリプトでの処理。赤い文字がWebサーバーでの処理となります。「Photoshop」スクリプトでバイナリデータをアップロードする方法は、ここに良いコードがありますので、参考にしてみてください。forums.adobe.com「Falcon」を使ったWebAPIも簡単に実装できます。今回はこちらを参考しました。qiita.comWebAPI+Photoshopスクリプトによる実装サンプル対象の画像内に複数人いる場合は最初に見つかった人の顔の矩形を返します。上の動画では、左から2番めの茶色の髪の比呂君が選択されてますね。これで、「Photoshop」スクリプトを使って、画像から自動的にサムネイルを作りだせるようになりました。ここまでが、「CEDEC+KYUSHU2018」でディープラーニングについて講演した内容です。ツールと連携させる(プラスアルファ)ここから先が今回追加する内容で、「Readyyy!」で試みた★1と★2フォトの自動生成をご紹介します。人間並みの高い精度でアニメ顔を矩形選択できるのであれば、いろいろ応用できそうですよね。ちなみにフォトというのは、「Readyyy!」内で手に入るアイドルの写真のことです。★5フォトは、このような豪華なフォトです。★5フォト★1と★2のフォトは、アイドル画像と汎用的な背景画像を組み合わせたシンプルなフォトです。★1フォトなお、連携させるツールのフローは以下のようなもので、全て「Photoshop」上での操作です。アイドル画像を読み込み、あとでデザイナーが位置調整しやすいように、スマートオブジェクト化しておく。アイドル画像の顔の部分を選択範囲として囲む。その背景画像にあらかじめ指定してある基準位置と、先ほどのアイドル画像の選択範囲の大きさが一致するように調整して、アイドル画像をコピー&ペーストする。完成した画像を書き出す。2番(赤い文字の部分)にアニメ顔検出判定システムを組み込んで、自動化を試みます。動画の左側が「Photoshop」、右側が出力フォルダの様子です。20倍速で再生しており、本来はもっとゆっくりとした動作となります。ツールへの組み込みよし!どんどん生成されている!結構いい感じです!顔の大きさが違う...ただ極端な例なのですが、このあたりを比較してみるとアイドルの顔の大きさがそろっていません。このあたりの微調整は、デザイナーさんにがんばってもらいました...。さらなる自動化を目指すには、工夫が必要そうです。R-CNN)もあるので、次はこちらも試したいと思っています。検出されたアニメ顔のトリミングに課題あり最後に...ここまで読んでくださり、ありがとうございました。課題も見つかり今回は道半ばという結果になってしましたが、いかがだったでしょうか?今後も継続的に改良を積み重ねて、またここでお伝えできればなぁと思っています。TAセクションではこのようにデザイナーの制作に役立つ環境を提供できるよう力を注いでおります。Unityの登場でTAの活躍できるフィールドは格段に広がり、シェーダーやポストエフェクトなど面白い表現を生み出せないかと日々格闘中です。そんな中でお仕事したい方は、ぜひ下記の弊社グループ採用サイトをご確認ください。いっしょに働いてみませんか?sega-games.co.jpそして、「Readyyy!」、よろしくお願いします!*1:1月に組織改編がありまして部署名が変わりました。2Dイラストに擬似3D的な滑らかなアニメーションを追加することのできるソフト。Spineという海外の競合ソフトがある。最近はVTuberにも良く使われている。https://www.live2d.com/ja/products/cubism3*4:Unityにおいてオブジェクトの振る舞いを記述するためのスクリプトのこと。龍が如くスタジオ初めまして。第1CSスタジオの有賀千陽です。キャラクターデザインの業務に10年以上携わったのち、現在は新設されたデザインサポートチームでデザイナーの作業を支援するツールを制作しています。「龍が如くスタジオ」で制作されているタイトルにはたくさんの実在の人物が登場します。顔のしわキャラ作成をサポートするツール群WrapXLODの作成そのほかのツールまずは「龍が如く」シリーズのキャラクターの特徴から説明しましょう。芸能人とタイアップし、ご本人がゲーム中でキャラクターを演じている沢山のユニークなキャラクターが登場するなどが挙げられます。そのリアルなキャラクターたちを短い期間にどれくらいのクオリティで、どれくらいの顔の数を作らないといけなかったのか?クオリティはもちろん写真のようなクオリティです。タイアップキャストになると誰が見てもそっくりに作らなくてはなりません。』の男性NPC*1の顔だけで上記の画像ぐらいです。女性の顔:約70種あいかわらずたくさん作ってますね...。短時間でリアルなキャラを沢山作らないといけない!リアルなキャラを大量に作成するに当たり活躍してくれたのが、これから説明するフォトグラメトリーを活用した制作フローでした。フォトグラメトリーの説明と、フォトグラメトリーによる3Dの自動生成、Maya等のDCCツールに持っていくまでのフローの説明をします。視差情報を解析して寸法・形状を求める写真測量のこと。小難しくてよくわかりませんね...要は撮った写真から自動で3Dデータを生成してくれる技法のことです。