【第 3 回 cocone tech talk・後編】(Unity) 3D表現を豊かに Shader Graphの実践事例【イベントレポート】
-
2021年8月24日
こんにちは！cocone tech blog編集長のYです！
今回は2021年7月28日に行われた「cocone TECH TALK VOL.3」でお話した内容をまとめたものを前編・後編に分けてご紹介します！
本記事は後編として「(Unity) 3D表現を豊かに」というテーマについてお話ししていただいた内容をまとめたものとなります。
前編をまだ読んでない方はこちらからぜひ読んでみてください！
【第 3 回 cocone tech talk・前編】AWSでのGitLab Runner オートスケーリング化の取り組み【イベントレポート】
登壇者紹介
目次
新規3Dプロジェクト
みなさんココネと言えば何を思い浮かべるでしょうか？
それは間違いなく『ポケコロ』をはじめとした可愛い着せ替えアプリだと思います。
ココネはいかにかわいく見せることができるか、ということを追求してきました。
『ポケコロ』の他にも『ポケコロツイン』や『リヴリーアイランド』など様々な着せ替えアプリに挑戦してきました。
そんなココネが今回初の3D着せ替えアプリに挑戦することになりました。
これまでココネが積み上げてきたかわいく見せるノウハウを3Dプロジェクトでも発揮できるよう開発をしています。
今回は現在開発中の3Dアプリでも使用されている”ShaderGraph”という技術について、ご紹介したいと思います。
Shaderとは
リアルタイムで3Dを計算をするために、このようなプロセスがあります。
このプロセスは、”VertexBufferStream”というポリゴンデータにライト情報やテクスチャの色情報、マテリアル情報などを加えて”ScreenPixels”へと変換するものです。
このようなプロセスを”RenderPipeline”といいます。
しかし、このプロセスはGPU側に組み込まれているため、開発側で調整できない部分が存在します。そのため、開発する私たちは調整できるライトなどで求める表現を模索するしかありませんでした。
そのため、かつての3Dグラフィックは雰囲気が似たようなものが多数存在しました。
その後ハードウェアの進化に伴ってRender Pipelineの変更不可だった部分を開発側から変更することができるようになりました。
このようなRender Pipelineを定義するプログラムを”Shader”といいます。
このShaderの登場は3D業界に大きな影響を与えました。
例えば今までと全く違った影の表現やリアルな表現が可能になったりしました。
Shaderには様々な言語で作成されます。
Unityの場合は”Shader Lab”という言語を使用しています。
つまりShader作成にはコーディングが必要となってきます。しかしShaderは3Dの風景をどのように表現するかを設定するものなので、プログラマーよりもデザイナーよりの分野と言えるでしょう。
したがってShaderを作成するにはデザインセンスとプログラミング能力の両方が求められます。
その2つを兼ね備えたShaderを作成する人を”Technical Artist”と呼ぶのですが、このような能力を持った人を確保するのは難しいといった現状があります。
そんな状況を打破するのが”ShaderGraph”です。
ShaderGraph
ShaderGraphはコードを記述し作成していたShaderをノード、グラフ形式で制作することができるものです。
では実際にShaderGraphを使ってみましょう。
ShaderGraph使用準備
まずは球体を用意します。
次にCreate→Shader→PBR Graphをクリックし、Shaderを生成します。
同様にCreate→Materialをクリックしマテリアルを生成します。
MaterialとShaderを用意したら、MaterialにShaderを、球にMaterialをそれぞれアタッチします。
これで準備が完了しました。
ShaderGraph基本操作
次に基本操作の説明をします。
先ほど作成したShaderをダブルクリックしてみましょう。
するとこのような画面が開きます。
この画面から様々なノードを追加することができます。
試しに右クリック→Create Nodeから”Color”を作成します。
Colorノードの色をお好きな色に変更し、”PBR Master”の”Albedo”につなげてみましょう。
球の色が変化しましたね。
ちなみに”Emission”の部分にColorノードから繋げると、影の色がColorノードの色になります。
では次にこれを応用して球の色にグラデーションをかけてみましょう。
まずは”Position”ノードを作成し”Space”より”Object”を選択します。
このノードはオブジェクトの座標を取得することができます。
今回は縦にグラデーションをかけるためにY座標だけを抜き出したいので、次に”Split”ノードを作成します。
SplitノードのRGBはそれぞれXYZ軸に対応しています。
したがって今回はY軸に対応したGから次のノードにつなげていきます。
次は上頂点から下頂点のY座標を0~1にリスケールするためのノードを追加します。
追加するのは”Inverse Lerp”ノードです。
SplitノードのGとInverse LerpのTをつなげ、AとBにはそれぞれ-0.5と0.5を入力しましょう。
すると一番上が白く、一番下が黒くなるグラデーションができました。
グラデーションのもとが出来たので、色を加えれば完成ですね。
なのでもう1つColorノードを作成し、好きな色に設定しておきましょう。
2つのColorノードとグラデーションのもとを合わせるために”Lerp”ノードを作成します。
LerpノードのAとBに2つのColorノードを繋げ、Tには先ほど作ったInverse Lerpを繋げます。
すると色のついたグラデーションができました。
最後にこのLerpノードとMasterノードの”Albedo”、”Emission”を繋げて完成です。
このように綺麗にグラデーションを作ることができました。
最後にSave Assetを実行するとSceneビュー内の球に対してこのグラデーションが適用されます。
ShaderGraphの良いところ
ShaderGraphの良いところは3つあります。
- 直感的で分かりやすい
- コーディング無しでShader作成が可能
- デバッグしやすい
直感的に分かりやすいため触れやすく、何よりコーディングが必要ないためデザイナーさんの手でShaderを作成することができます。
またノード毎にプレビューが付いているため、どの段階で問題が起きたのかが分かりやすくデバッグが簡単になります。
新規プロジェクトの実践事例
最後にココネで現在開発中の新規プロジェクトでの実践事例をご紹介します。
こちらは3Dの水を使ったアイテムになります。
左側ののっぺりとした青い水を、右側のような透明感のあるリアルな水のように見せるためのShaderを作成しました。
今回は特別にこのShaderを作る過程を簡単にご説明します。
水面の動き
まず初めに水面の動きを表現するためのShaderGraphです。
水面の動きを表現するために”Simple Noise”ノードを利用します。
このSimple Noiseノードを”Time”ノードによって動かします。
そうして動かしたSimple Noiseノードの凹凸の情報を調整し、Positionノードに加えることで水面が揺れているように見えます。
実際に見てみましょう。
どうでしょうか？自然な水の揺らぎを表現できたと思います。
透明・屈折
続いて透明度と光の屈折を加えていきます。
こちらが作成したShaderGraphです。
水の透明度、屈折を表現するには”CustomFunction”を追加し、独自のコードを書きました。
今回はスクリーンの後ろ側を歪ませる表現をコードを書くことで表現しました。
これにより水を透明にすることができます。
最後に屈折率を調整し、歪みを強くすることで水の後ろ側を歪ませて完成です。
実際に動画で確認してみましょう。
水が透明になって後ろのオブジェクトが屈折して見えることでリアリティが出ましたね。
水の流れ
最後に水に流れをつけましょう。
こちらが作成したShaderGraphです。
水の流れを表現するには”NormalMap”を使用します。
また、”Sample Texture 2D”ノードについてUV座標のV軸にそって動かすために”Time”ノードを繋げましょう。
実際に適用して確かめてみましょう。
どうでしょう？水の流れができたことでより自然に見えるようになりましたね。
まとめ
話をまとめると、ShaderGraphの登場でShader制作のハードルが下がり、デザイナーさんがShaderを制作することがとても簡単になりました。
ShaderGraphのたくさんの機能を活用し、今まで以上に豊かな表現の実装に挑戦していきたいと思います。
最後にココネの新規3Dアプリのリリースもぜひ楽しみにしていてください！
スライド
以上で「cocone TECH TALK VOL.3」後半の振り返りを終わりたいと思います。
前編をまだ読んでいない方はぜひこちらから読んでみてください！
【第 3 回 cocone tech talk・前編】AWSでのGitLab Runner オートスケーリング化の取り組み【イベントレポート】
「cocone TECH TALK Vol.4」の開催も予定しております。開催日時、内容が決まり次第テックブログ、Twitterなどで告知いたしますので、お楽しみに！
また、ココネでは一緒に働く仲間を募集中です。
ご興味のある方は、以下のリンクからぜひご応募ください。
