R&D 祭 2024 パイプラインツール紹介＋Adobe CEP開発

Transcript

1. パイプラインツール紹介＋Adobe CEP開発 古賀亮 木下美紀 © OLM Digital, Inc. 1
2. 目次 • パイプライン概要 • Asset Managementツール紹介 – AM Tool for Maya – AM Tool for AE • Adobe CEP開発 – CEP概要 – 環境構築 – 開発注意事項 2 © OLM Digital, Inc.
3. 目次 • パイプライン概要 • Asset Managementツール紹介 – AM Tool for Maya – AM Tool for AE • Adobe CEP開発 – CEP概要 – 環境構築 – 開発注意事項 3 © OLM Digital, Inc.
4. パイプラインとは • 制作の効率化を図るための仕組み – 各行程ごとのデータの受け渡し方法 – バージョン管理のためのディレクトリ構造 – データ受け渡しにミスが発生しないようツール制作 ※CGWORLDのCG用語辞典より © OLM Digital, Inc. 4 モデリング レイアウト アニメーション エフェクト ライティング データ 出荷 ここでミスが 起きないように 自動・効率化する
5. OLMのパイプライン • アニメ、フルCG、実写といった様々な作品に対応 5 © OLM Digital, Inc. • 1カットを1人で担当 • Maya, AEを使用 アニメ フルCG 実写 • 1カットを複数人で担当 • Maya, Nukeを使用
6. OLMのパイプライン - ディレクトリ構造 6 プロジェクト名 © OLM Digital, Inc. lib seq 話数 カット LOscenes ANscenes FXscenes LTscenes カテゴリ エレメント Maya comp 話数 カット comp layers Maya aep modelScene s scenes scenes textures nk 以下同じ ・ ・ textures renderImage s ・ ・ ・ ・ images
7. OLMのパイプライン - ファイルの命名規則 • モデルデータ – プロジェクト名_カテゴリ_エレメント名.バージョン.拡張子 – 例）ZTMP_CH_charaA.v01.ma • カットデータ – プロジェクト名_話数_カット_行程.バージョン.拡張子 – 例）ZTMP_001_0002_AN.v01.ma 7 © OLM Digital, Inc. カットデータの実際のファイル
8. OLMのパイプライン - 作業～出荷 • 作業エリア (Home) – 作業者が作業を行う場所 – プロジェクトのバックアップ対象にはならない • 共有エリア (Share) – プロジェクトの納品に使われるデータを置く場所 – 最終的にはここがバックアップされる 8 © OLM Digital, Inc. Home Share 作業エリア 共有エリア Up 出荷
9. AM Toolとは • OLMで用いられるAsset Managementツール • 主な役割 – フォルダ階層の表示 – 命名規則に則ったファイル名やバージョンの作成・管理 – Pipeline各種機能 • 現在使われているAM Tool – AM Tool for Maya – AM Tool for AE (After Effects) – AM Tool for PS (Photoshop) – など © OLM Digital, Inc. 9
10. 目次 • パイプライン概要 • Asset Managementツール紹介 – AM Tool for Maya – AM Tool for AE • Adobe CEP開発 – CEP概要 – 環境構築 – 開発注意事項 10 © OLM Digital, Inc.
11. AM Tool for Maya • Pythonを用いて実装したMaya用AM Tool – 10年以上前に最初のバージョンをリリース – 現在に至るまで更新し続けている © OLM Digital, Inc. 11 初期のUI 現在のUI
12. 階層表示 © OLM Digital, Inc. 12 ③ 選択したファイルまでのパスが表示される またパスを直接入力することで該当ファイルまで表示できる © OLM Digital, Inc. ② 各フォルダやファイルが まとめて表示＆選択できる ① プロジェクト・ユーザ名を指定
13. フォルダにアクセス © OLM Digital, Inc. 13 Dirボタンから該当フォルダのエクスプローラを起動する ダブルクリックからも起動できる
14. OLMのディレクトリ構造 14 プロジェクト名 © OLM Digital, Inc. lib seq 話数 カット LOscenes ANscenes LTscenes FXscenes カテゴリ エレメント Maya comp 話数 カット comp layers Maya aep modelScene s scenes scenes textures nk 以下同じ ・ ・ textures renderImage s ・ ・ ・ ・ images
15. ディレクトリ構造の作成 (make directory) 15 © OLM Digital, Inc. make directory 実行前 make directory 実行後 必要なフォルダも自動作成 Shareにあるフォルダを選択し [make directory]を実行
16. OLMのファイルの命名規則 • モデルデータ – プロジェクト名_カテゴリ_エレメント名.バージョン.拡張子 – 例）ZTMP_CH_charaA.v01.ma • カットデータ – プロジェクト名_話数_カット_行程.バージョン.拡張子 – 例）ZTMP_001_0002_AN.v01.ma 16 © OLM Digital, Inc. カットデータの実際のファイル
17. 新規保存 (Save as) • OLMの命名規則に則ったファイル名で新規保存することができる 17 © OLM Digital, Inc. ・現在の階層情報からファイル名 を自動生成する ・「option」欄にあるテキストは 末尾に付与される ・「DirectInput」にチェックする と直接ファイル名を入力できる 保存するファイル名
18. ファイル入力 (Open/Import/Reference) © OLM Digital, Inc. 18 ・右クリックでポップアップメニューが表 示される ・MayaのOpen/Import/Referenceと同じ 機能 ・ファイルをダブルクリックすることで も、Maya上で開く(Openする)ことができる
19. バージョンアップ (Save) • 社内の命名規則に則り、バージョンアップして保存できる © OLM Digital, Inc. 19 バージョンアップして保存 XXXX.v01-01→XXXX.v01-02
20. レンダリングジョブを投げる (Submitter) • 作成したシーンのレンダリングジョブをDeadlineに投げる 20 © OLM Digital, Inc. レンダリングするフレームを任意に指定できる 画像では1,2,4,6,8フレーム目をレンダリングする シーンファイルを開かずにジョブを投げること ができる
21. 作業エリア (Home) ファイルの出荷 (Share up) • 完成したシーンファイルを共有エリアに出荷 © OLM Digital, Inc. 21 出荷前のエリアと対応した場所に アップロードされる 共有エリア (Share)
22. FlowPT(旧ShotGrid) への登録 • ファイルを出荷後、NoteをAM Toolから作成できる 22 © OLM Digital, Inc. Noteの内容を記入 Noteが作成される
23. メモ、サムネイル登録 • 各ファイルやフォルダに対して登録できる © OLM Digital, Inc. 23 画像をドラッグ＆ドロップで サムネイル登録ができる メモは直接入力でき 自動保存される 右クリックメニューからも登録可能
24. フィルター機能 • 下のボックスに入力した文字で表示するファイルを制限できる © OLM Digital, Inc. 24 「１」を含むフォルダ しか表示されない 「01-」を含むファイル しか表示されない
25. 表示するフォルダを制限 © OLM Digital, Inc. 25 ② 表示するフォルダのみドラッグ ① 表示制限したい階層を 右クリック ③ 指定したフォルダのみ表示される • 表示するフォルダを自分好みにカスタマイズできる – 各自の担当作業毎に最適な表示が可能に © OLM Digital, Inc.
26. ファイルのブックマーク • 任意のファイルをブックマークすることができる – 作業ファイルへの即アクセスなどが可能になる 26 ②登録したい名前を入力 ①登録したいファイルを選択 ③登録したリストのダブルクリックで 対応ファイルまで移動できる © OLM Digital, Inc.
27. その他の機能 • Render Layer / Render Setupのインポートおよびエクスポート • ユーザのブックマーク • Mayaプロジェクトの設定 など 27 © OLM Digital, Inc. RenderSetupのインポート RenderSetupのエクスポート Mayaプロジェクト設定
28. 目次 • パイプライン概要 • Pipelineツール – AM Tool for Maya – AM Tool for AE • Adobe CEP開発 – CEP概要 – 環境構築 – 開発注意事項 28 © OLM Digital, Inc.
29. AM Tool for AE • Adobe CEPを用いて新たに実装されたAMツール © OLM Digital, Inc. 29
30. AM Tool for AEの主な機能 • 基本的機能はAM Tool for Mayaと同じ – 階層表示・新規保存・ファイルのオープン・バージョンアップ・出荷など 30 Dirボタンから該当フォルダのエクスプローラを起動 パスも直接入力・移動できる Save ⇨ バージョンアップして保存 (vXX-01⇨vXX-02) Save As ⇨ 名前をつけて保存 ファイルにメモを残すことができ る © OLM Digital, Inc.
31. 目次 • パイプライン概要 • Asset Managementツール紹介 – AM Tool for Maya – AM Tool for AE • Adobe CEP開発 – CEP概要 – 環境構築 – 開発注意事項 31 © OLM Digital, Inc.
32. Adobe CEPとは 32 ・ファイルを開く ・ファイルを保存 ・レイヤー情報を取得 ・新規UI作成 等々 取得データの 送信 ・HTML/cssベースの UI AEサイドに命令 UIサイド (JavaScript/HTML) AEサイド (ExtendScript) © OLM Digital, Inc.
33. Adobe CEPの利点 • AM Tool for AEに使用 – 以前はPythonで作成 • AEが落ちると起動しなくなる • PCを再起動する必要あり – Adobe CEPにより安定性の向上 • パネルのドッキングなどの効果 © OLM Digital, Inc. 33
34. ExtendScript • ECMAScript 3rd Edition(ES3)をベース – 1998〜2009年までのJavaScript – 現在はES2015(ES6)以降が主流 • ES3でできないこと – let, const変数が存在しない • ブロックスコープの変数が使えない • var変数を使う ‐ 関数スコープ – Node.jsなどが利用できない • ファイルやフォルダ情報の取得などができない – for … of … やforEach文が存在しない • for … in … 構文は存在するが、列挙配列のkeyを取得 ‐ 通常配列に用いるとindex(0, 1, …)を取得 © OLM Digital, Inc. 34
35. 目次 • パイプライン概要 • Asset Managementツール紹介 – AM Tool for Maya – AM Tool for AE • Adobe CEP開発 – CEP概要 – 環境構築 – 開発注意事項 35 © OLM Digital, Inc.
36. 環境構築 • Windows 11 を使用 • Visual Studio Code (VSC) + CC Extension Builder + ExtendScript Debugger – Visual Studio Code (v1.92.1): テキストエディタ – CC Extension Builder (v1.1.2): Visual Studio Codeの拡張機能、 Adobe CEPのフレームワークを自動生成 – ExtendScript Debugger (v2.0.3): Visual Studio Codeの拡張機能、デバッガー © OLM Digital, Inc. 36
37. CC Extension Builder • CEP開発のフレームワークを自動生成してくれるVSC拡張機能 37 © OLM Digital, Inc. ① コマンドパレットでExtension Creator: Create a New CC Extensionを実行 > cc extension などで補完される ② UIテンプレートやツール名を入力 ③ 必要なファイルが自動生成される
38. CC Extension Builder(v1.1.2)の不具合 • CC Extension Builderを実行してもファイルが生成されない – Visual Studio Code v1.92以降 • VSCで使われるNode.jsのバージョンが変更 – バッチファイルの処理に関する仕様が変更 ※今後のバージョンアップで修正される可能性がございます 38 © OLM Digital, Inc. 解決方法：以下を修正 C:\Users\[user名]\.vscode\extensions\hennamann.cc-extension-builder-1.1.2\extension.js
39. デバッグ - Launch • LaunchとAttachの２種類 – Launchはその場でファイルを実行 © OLM Digital, Inc. 39 Launchを選択 ブレークポイントで 止めて変数の確認も可能
40. デバッグ - Attach • 任意のタイミングでスクリプトを実行できる © OLM Digital, Inc. 40 コードを右クリック Launchと同様 ブレークポイントの設定が可能
41. 目次 • パイプライン概要 • Asset Managementツール紹介 – AM Tool for Maya – AM Tool for AE • Adobe CEP開発 – CEP概要 – 環境構築 – 開発注意事項 41 © OLM Digital, Inc.
42. ExtendScript - ファイル分割 ※通常はmanifest.xmlに登録した1つのjsxファイルしか読み込まれない ① (jsx側) #include “jsxファイルへの相対パス” ② (js側) CSInterface().evalScript($.evalFile("jsxファイルへの相対パス")) 42 function hoge() { alert("hoge"); } #include "hoge.jsx" function fuga() { hoge(); } let csInterface = new CSInterface(); csInterface.evalScript("$.evalFile(‘hoge.jsx’);"); csInterface.evalScript("hoge();"); hoge.jsx ① main.jsx ② main.js © OLM Digital, Inc.
43. デバッグモード • 通常、デジタル署名なしのエクステンションは実行できない • レジストリエディタを使用して実行可能 – 「コンピューター\HKEY_CURRENT_USER\SOFTWARE\Adobe\CSXS.11」に 「PlayerDebugMode」というレジストリを追加 – 「１」に設定　⇨　デジタル署名なしでも実行可能 – 「０」に設定　⇨　デジタル署名ないと実行不可能 43 © OLM Digital, Inc.
44. リリースビルド① • デバッグモードなしでCEPをリリースするためにはデジタル署名が必要 – AdobeにあるZXPSignCmd.exeを使用(Windows) • 以下のコマンドで証明書を発行 44 © OLM Digital, Inc. > ZXPSignCmd.exe -selfSignedCert 国コード 地域 組織 名前 パスワード 証明書名.p12
45. リリースビルド② • 発行した証明書(.p12)ファイルをZXPSignCmd.exeで.zxp化 • 7-ZIPを用いて.zxpファイルを解凍 – 解凍したフォルダを配布 45 © OLM Digital, Inc. > ZXPSignCmd.exe -sign CEPのフォルダ 出力先 証明書名 証明書のパスワード > 7z.exe x -o CEPのフォルダ .zxp名
46. 配布・起動方法 • エクステンションは以下のフォルダのいずれかに配置する – 上から順番に読み込まれる • C:\Program Files\Adobe\XXXX(対応Adobe製品)\Support Files\ • C:\Program Files\Common Files\Adobe\CEP\extensions\ • %APPDATA%\Adobe\CEP\extensions\ • ウィンドウ > エクステンションから起動（AEの場合） © OLM Digital, Inc. 46 (例)%APPDATA%\Adobe\CEP\extensions に配置 ウィンドウメニューから起動できる
47. 開発注意事項 - データの受け取り① • ① コールバックを用いる • 問題点: – CSInterface().evalScriptは非同期実行 – コールバックの外で結果を使えない – 複数使用で入れ子構造になる (右図) 47 let csInterface = new CSInterface(); csInterface.evalScript("hoge();", result => { console.log(result); }); csInterface.evalScript(script0, result0 => { csInterface.evalScript(script1, result1 => { csInterface.evalScript(script2, result2 => { … }); }); }); © OLM Digital, Inc.
48. 開発注意事項 - データの受け取り② • ②Promise + await を用いる ※ resultはString型で返ってくる • 例：ExtendScriptで戻り値(result)にfalseを返した場合・・・ ‐ if(result) ⇨ if("false")⇨trueに分岐 ※ JSON.parseで型を自動的に変換 48 let result_value = await new Promise (resolve => { let csInterface = new CSInterface(); csInterface.evalScript("hoge();", result => {resolve(JSON.parse(result));}); }); fuga(result_value); //入れ子構造から脱却！ © OLM Digital, Inc.
49. 開発注意事項 - 非同期処理① • CSInterface().evalScriptは非同期実行 – evalScriptに依存する関数をコールバック外で呼び出すと動作不良になる • 非同期実行は「処理を後回しにしている」だけ 49 let csInterface = new CSInterface(); csInterface.evalScript("shareUp();"); //ここでファイルを出荷 check(); //出荷したファイルをチェックしたいが、出荷が完了していない状態でチェックする shareUp check check shareUp shareUp © OLM Digital, Inc.
50. 開発注意事項 - 非同期処理② • 非同期実行は並列処理ではない – 非同期実行は「処理を後回しにしている」だけ – 「別のスレッドを作成して実行」していない • JavaScriptは仕様上シングルスレッド – 非同期処理に時間のかかる処理をいれると「最終的に重くなる」 • 解決策 – 時間のかかる処理はPythonで作成 – exe化してNode.jsのchild_process.execなどを用いる 50 出荷(重い) ユーザの操作 他の処理 他の処理 ユーザの操作 出荷(重い) 出荷 © OLM Digital, Inc.
51. ダイアログがUIの後ろ側に隠れる不具合 51 © OLM Digital, Inc. • AfterEffects2023より確認 • 画面配置を「デフォルト」の状態で「標準」に設定されているaepファイル を開こうとすると起きる
52. 今後の展望 • デザイナーからの要望に沿って機能をアップデート • AM Tool for Maya – USD (Universal Scene Description) の対応 • AM Tool for AE – サムネイル登録機能、FlowPT(旧ShotGrid)との連携 – AEでUXPが対応されたらUXPに移行予定 52 © OLM Digital, Inc.