rn.log

備忘録など

【ふりかえり】CyberAgent Graphics Academy に参加しました

はじめに

CyberAgentさんが主催する、Graphic Academy に参加させていただきました。

www.cyberagent.co.jp

今回は、ふりかえりの記事を書きたいと思います。

アカデミーの流れ

アカデミーの流れをざっくりまとめると、以下のような流れでした。

  • 書類選考
  • 面接
  • 講義 (2022/02/05 ~ 2022/04/09)
  • 制作物発表会 (2022/4/23)

アカデミー開始以前

書類選考 (2021年12月)

Googleフォーム上で質問に回答し、応募を行います。

質問の内容は以下のようなものでした

  • アカデミーを受講したいと思った理由
  • CyberAgentへの興味
  • 印象に残っている開発経験
  • 使用したことのあるフレームワークや開発言語
  • アピールポイント
  • 学歴

グラフィックスを学ぶ下地があるかどうかを判断されたのではないかと思います。

アカデミーのDay1では、カメラ変換周りの話や、行列演算まわりの講義があり、
多少の数学の知識が必要になりました。

面接 (1月)

  • 書類選考を通過すると、次は面接があります。
  • 面接の日程は希望を出すことができる形になっていました (Googleカレンダー上で選ぶ形でした)
  • 面接では、アカデミーの趣旨をCAの方が解説してくれました
  • 自分からは、グラフィックスを体系的に学びたいという意思や、グラフィックスエンジニアとしてのキャリアに興味がある、などといった話をしました。(プロセカを遊んでいるという話もしました)
  • ミスマッチを防ぐ場として、面接を行っているとの話でした

余談 : 面接の場にはCAの矢野 春樹さん(@harumak_11)がおられたので緊張しました。 LIGHT11にはいつもお世話になってます。

選考通過 (1月末)

  • 1月末あたりに、選考結果はメールで届き、Graphics AcademyのSlackに招待されました。
  • これ以降は、Slack上でCyberAgentの運営の方々や、ほかの受講生の方々とやり取りをしていくことになります。
  • 受講生は、私を含めて20名いました。（技術的につよつよな方々が集まっている印象でした）

グラフィックスに興味がある人が20人も集まるなんて、すごい！

教材が届く (2月)

  • グラフィックスアカデミーの講義資料(紙の冊子)
  • コンピューターグラフィックス (紙の書籍)
  • HLSLの魔導書

講義について

  • Zoom上で講義があり、グラフィックスに関わるあらゆることを叩き込まれます
  • 講師の方は、Unityの石井 勇一さん(@z_zabaglione)でした
  • 内容の一例
    • グラフィックスの理論寄りの話
      • 画像フォーマットの話
      • カメラ座標変換や、行列演算まわりの話
      • NPRやPBRの話
      • 影の描画の仕組み
      • ライティング など
    • NPRシェーダーやPBRシェーダーの作成
    • 複数Passによるシェーダー(.shader)の実装
    • ポストプロセスの話
      など

NRPシェーダーに関しては、記事にまとめてみました。
【Unity ShaderLab】NPRなライティングを実装してみる

講義の流れ

  • 毎週土曜日、朝の10:00から夜の19:00までZoom上で講義があります
    • 受講生20名がZoom上に集まり、講師(石井さん)の講義を受けます。
      　- 1時間ごとに10分くらいの休憩がありました。
    • 13:00から14:00までお昼休み
    • 石井さんの講義があるのは 10:00 ~ 16:00あたりで、残りの時間は課題のレポート作成に時間を使う感じでした。
  • 毎週課題があり、次の講義までに提出する必要があります
    • 課題の形式はレポート形式で、自由なフォーマットで書くことができました。

受講生の方々の熱意が高く、欠席者はいませんでした (体調不良で欠席する人が1, 2名いた程度でした)

最終課題デモ

アカデミーの最終日には、制作物を発表するという最終課題があります。
Day5 のタイミングで、CAの方々が最終課題の一例(デモ)を見せてくれました。
- 株式会社Colorful Palette の山口 智也さん ( @togucchi )
- 株式会社グレンジ の山上 翔さん

山口さんの作品はニーアっぽい雰囲気の作品で、山上さんの作品はトゥーン系の表現でした。

使われていたテクニックの一例
- Deferredレンダリング
- G-Buffer(深度や法線)を利用した、アウトライン抽出
- グラデーションフォグ
- 距離・高さに依存するカスタムフォグ
- Cook-Torranceのスペキュラモデルを利用した金属表現
- Jump Floodを利用したアウトライン
- 色と場所を指定できるBloom (スキンブルーム)
などなど

山口さんはプロセカに関わっているということもあり、アーティストでも使いやすいようなカスタムエフェクトを作っているのが印象的でした。
参考 : 『プロセカ』の世界観はUnityシェーダで表現 空気感、柔らかさ、奥行きを作る4つのポストエフェクト - ログミーTech

懇親会 (2回)

  • CAの方々とZoom上で情報交換する機会がありました
  • 懇親会では nonpi の食事をふるまってくれました (費用はCyberAgentさんが全部持ってくれるという事で、太っ腹です)
  • こちらの質問にはどんなことでも答えてくれる感じでした。
    • Cyber Agentという組織について
    • グラフィックスエンジニアの業務について
    • グラフィックスエンジニアのキャリアについて
  • Cyber Agentの方が場を取り仕切ってくれたので、気持ちよく時間をすごせました。

井戸端

  • 受講生(希望者)が毎週木曜日・日曜日の22:00～23:00にあつまり、課題のわからないところを教えあうという取り組み(井戸端)がありました。
  • 井戸端は受講生の一人(丸山 純さん) のアイデアから始まった取り組みになります。

制作物発表会 (最終課題)

受講生の方々が、絵作りをテーマにして作品発表を行いました。
テーマはさまざまでした。

  • キャラクター表現をテーマにした作品
  • SFをテーマにした作品
  • ブラウン管シェーダー
  • 水槽をテーマにした作品
  • ハッチングを利用した手描き調の表現
  • 草原をテーマにした作品
  • 雪原をテーマにした作品
  • 光の使い方にこだわったライブステージ
  • ニーアっぽい絵作り
  • 海をテーマにした作品
  • アメコミをテーマにした作品
    などなど

人によって目指す方向性が違うのが面白かったです。
- 汎用性を意識している方
- パフォーマンスを意識した方
- 技術的な興味関心が高い方
- ルックをリッチにすることを意識した方

作品

私は 「リアル調と手描き調の両立」をテーマにした作品を制作しました。


ポストエフェクトで手書きっぽい感じに加工しています。

アセットは、CyberAgentゲーム事業部から提供いただいた素材をお借りしています。
(BLADE XLORD のアセットになります)

制作の流れは以下のような感じです。
- 火山のアセットを並べて、URP PostProcessingで加工
- 陽炎エフェクトを作成し、高熱を表現
- 地面マテリアルを調整し、キャラクターを目立たせる
- 距離・高さに依存するフォグの作成
- 深度に応じて彩度を落とすエフェクトの作成
- 近景を赤・遠景を青に寄せる (色彩遠近法)
- 深度を利用したアウトライン描画キャラだけを専用テクスチャに描画した後、アウトライン抽出
- Sobelフィルタで水彩画調に加工

作品をOSSとして公開している方もいました。(yunodaさん)

アカデミーで得たもの

グラフィックスの根幹にあるものへの理解が深まった

  • カメラ変換周り・ノーマルマッピング・影の描画・ライティングあたりの話は理解が浅かったのでとても勉強になりました
  • グラフィックスに関する疑問をSlackで投げると、講師やCAの運営の方々がすぐに回答してくれたのも良かったです。
  • 課題の中には、カメラのビューボリュームの投影を可視化するという課題があり、カメラ変換のイメージがつかめるようになりました。

絵作りの楽しさを知ることができた

  • 絵が美しいゲームを観察し、どうすればそれに近づけるのかをひたすら思考し、実装するという経験ができました。
  • 絵がそこそこのクオリティになるまでに2、3週間かかりました。
  • 数週間かけて、自分の絵を目標とする絵に近づけていくというもので、ある意味デッサンに近い行為だと感じました。
  • グラフィックスが美しいゲームは「自分には作れないかも」と今まで感じていたが、「自分でも作れるかもしれない」という認識に変わった

最終課題で得られるものが多かった

  • ゲームを観察し、どういう技術が使われているかを観察するトレーニングになった
  • 絵の見た目をリッチにしていく過程で、実装やアイデアに行き詰まることがあった
    • その際に、技術カンファレンスの資料や、論文にヒントが書かれてないか読んでヒントを探すということを行った
    • カンファレンス資料や論文などは、自分の道具として考えられるようにもなりました
    • アカデミーを受ける以前より、CEDECの資料を読むことへの抵抗が薄くなったと感じます
  • ほかの方の発表を見ることで勉強になった
    • 技術的に工夫したポイント
    • 苦労したポイント
    • 他の方の発表スライドと最終課題のUnityプロジェクト一式を見ることができる

グラフィックス技術資料を読むことへの心理的な抵抗が減った

  • 実装が上手くいかないとき、CEDECの資料を読んでヒントが無いか探した
  • 論文を読むこともあった

グラフィックスの引き出しが増えた

  • Slack上で、グラフィックス関連の情報交換が盛んにおこなわれていました
  • グラフィックスに関する情報が集約される感じで、グラフィックスの引き出しが増えたと感じました。

受講生とのつながりができた

  • グラフィックスアカデミーが終わった後も、Slackは残したままにしていただけるとのことでした
  • アカデミーが終わった後も、交流は続けていきたいと思っています。
  • 最終課題をブラッシュアップしたものに上げる、みたいな使い方をするのも良さそうな気がします。
  • 作品の途中経過を上げると、他の受講生の方がリアクションしてくれたり、為になる情報を共有してくれたりなど、 いろいろと勉強になりました。
  • 逆に他の受講生が詰まっているところがあったとき、自分からアイデアを提案するといったことも行いました。
  • 互いに教えあうという良好な関係を築くことができたと感じました。

FrameDebuggerと仲良くなった

  • 思った通りの結果にならない、と思ったときはFrameDebuggerとにらめっこしていました。
  • シェーダーへの入力・シェーダーの出力・レンダーターゲットといった情報が見れるので、描画のデバッグには欠かせない機能です

Slack上で話題に上がったシェーダーやツール

NiloCatさんが出しているToonシェーダー
- https://github.com/ColinLeung-NiloCat/UnityURPToonLitShaderExample
Microsoft PowerToys : https://docs.microsoft.com/ja-jp/windows/powertoys/
- PowerToys に入っているカラーピッカーを使うと、画面の色を数値で見ることができ、シェーダーをデバッグする際に役に立ちます。

Color Picker で色を表示

アカデミーを終えてみて

  • グラフィックスを学ぶ仲間がいたので最後までモチベーションを保ったままグラフィックスを学ぶことができた
    • 独学でグラフィックスを学んでいた時は、一緒に学ぶ仲間がいなかったり、発表の機会が無かったので挫折しやすかった
  • 毎週課題を提出する必要もあったので、緊張感を持って取り組むことができた
  • 作品を発表するという場もあったので、そこを目標として絵作りに取り組むこともできた
  • 作品に納得がいっていない部分があるので、アカデミーが終わった後もクオリティアップを続けていきたい。

CyberAgentさんについて

  • 費用を投じて、他社のエンジニアにノウハウを教えるというのはすごいと思いました。
    • OSS活動も行っていたり、CA.unityを開催するなど、技術投資や業界貢献に力を入れている会社さんだと感じました
  • 優秀な方々が多く集まっているという印象を受けました