--- title: [Tokyo DevDays 26'] UE5.8 最新プロシージャル技術解体新書 tags: #ue5 #pcg #devdays author: [エピック ゲームズ ジャパン](https://www.docswell.com/user/EpicGamesJapan) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/4EQYKG4WJP.jpg?width=480 description: 2026年8月26日に開催されました「Unreal Engine Tokyo Dev Days 26'」イベントの「UE5.8 最新プロシージャル技術解体新書」講演のスライドです。 サブ資料（チートシート）はこちら https://www.docswell.com/s/EpicGamesJapan/ZE1W6D-DevDays26-PCG-Primitives-CheatSheet published: August 27, 26 canonical: https://www.docswell.com/s/EpicGamesJapan/ZX23YP-DevDays26-PCG-Primitives --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/4EQYKG4WJP.jpg) UE5.8最新プロシージャル技 術 解体新書 Epic Games Japan Developer Relations, Software Engineer 湊 和久 チートシート公開中! https://www.docswell.com/s/EpicGamesJapan/ZE1W6D-DevDays26-PCG-Primitives-CheatSheet # Page. 2 ![Page Image](https://bcdn.docswell.com/page/KJ4WP5Q171.jpg) アジェンダ ● ● ● ● ● PCG Primitives 概要 Primitive 理解の5つのコツ 覚えておきたいPrimitive シンプルな都市の生成 まとめ # Page. 3 ![Page Image](https://bcdn.docswell.com/page/LE1Y9WP57G.jpg) PCG Primitives 概 要 ● ● ● ● ● PCG Primitives 概要 Primitive 理解の5つのコツ 覚えておきたいPrimitive シンプルな都市の生成 まとめ # Page. 4 ![Page Image](https://bcdn.docswell.com/page/GEWGQ62WJ2.jpg) PCG Primitives 高度な PCGグラフのライブラリとサンプル群 グラフの作り方が Primitiveの組み合わせに劇的進化！ ● PCGの複雑で高度な定型処理をモジュー ル化し、サブグラフとして提供する「ラ イブラリ」プラグイン ● グラフ制作のスタイルが高性能サブグラ フの組み合わせに変化 ● 80以上の Primitive ● 森・街・建物・道路など多彩な環境の実 践サンプル わずか15ノードで... # Page. 5 ![Page Image](https://bcdn.docswell.com/page/47ZLWYD2J3.jpg) PCG Toolset とInstant ● MCPとPCG Toolsetを有効化すると、 LLMはプラグイン内のライブラリとサン プルの使い方を読み取り、グラフ制作に 活用します ● PCGロジックを一発実行のツールとして 使う、13種類のグラフ（Instant）が LLMの編集能力を拡張します # Page. 6 ![Page Image](https://bcdn.docswell.com/page/YJ6WGD36JV.jpg) 【開発中】PCG版City Sample ● PrimitivesとMCPを利用して開発されたCity SampleのPCG実装版 ● あくまでMCPで開発を短期化しただけでであり、人の手でもPrimitiveは活用可能 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/GJ5MV3L5J4.jpg) PCG Primitivesの導入 ● PCG Primitives 系のプラグインを 有効化するだけ ● PCGグラフでPrimitivesに分類され たノードを配置できるようになる # Page. 8 ![Page Image](https://bcdn.docswell.com/page/LE3WD6L5E5.jpg) Primitivesプラグインのフォルダ構造 Primitives ：ライブラリ本体 Examples ：グラフサンプル集 Levels ：デモレベル Grammer ：グラマー拡張 後述 Instants ：即時コマンド群 # Page. 9 ![Page Image](https://bcdn.docswell.com/page/8EDKPVNY7G.jpg) デモレベルには基本なにもない # Page. 10 ![Page Image](https://bcdn.docswell.com/page/V7PKNV52J8.jpg) Examplesのグラフ等を展開して見るのに使う で、ここを見てみると... # Page. 11 ![Page Image](https://bcdn.docswell.com/page/2JVVKZPXJQ.jpg) 例の15ノードが広がっている # Page. 12 ![Page Image](https://bcdn.docswell.com/page/5EGLQ4PRJL.jpg) Examplesはただのサンプルではなく… Primitives ：ライブラリ本体 Examples ：グラフサンプル集 Levels ：デモレベル Grammer ：グラマー拡張 Instants ：即時コマンド群 # Page. 13 ![Page Image](https://bcdn.docswell.com/page/4JQYKG2Y7P.jpg) LLMの参照対象である ・PCGグラフ作成スキル（Skill_PCGGraphGeneration）にサンプルを徹底利用する 指示が仕込まれている ・「サンプルを読め」・・・これは人間の利用者にも当てはまる サンプルグラフではプリミティブなノードを使用しており、正しく構成しやすくなっています。 ## サンプルグラフ / 以下のサンプル PCG を利用できます。 - PCG グラフを構築する際の正しいパターンとベストプラクティスについては、これらのサ ンプルグラフを大いに参考にしてください。 - ユーザーのリクエストに取り組む前に、役立ちそうなサンプルグラフの構造をすべて取得し てください。 - グラフをゼロから構築する前に、既存のグラフ(サンプルまたは過去に作成したもの)がユー ザーのニーズにすでに合致していないか確認してください。 - GetGraphStructure を使って、関連するサンプルグラフをすべてロードしてください。 - サンプルグラフは多めに取得する方針とし、「Basics」のサンプルグラフは必ず複数取得し てください。 “THE 関数”というグラフ群で、いき なり読むのはなかなか辛いが… # Page. 14 ![Page Image](https://bcdn.docswell.com/page/K74WP5LZE1.jpg) Primitives時代もグラフの全体像は変わらない が スポーン 位置加工 ランダム フィルタ 閉スプライン 生成 ランダム 点散布 # Page. 15 ![Page Image](https://bcdn.docswell.com/page/LJ1Y9WLDEG.jpg) リッチ ちょいちょい高度な処理が入っていたりもする … 領域縮小 再帰分割 領域拡張 セグメント 抽出 形状による セグメント 形状切り抜き 抽出 # Page. 16 ![Page Image](https://bcdn.docswell.com/page/GJWGQ6V872.jpg) Primitive 理解の5つのコツ ● ● ● ● ● PCG Primitives 概要 Primitive 理解の5つのコツ 覚えておきたいPrimitive シンプルな都市の生成 まとめ # Page. 17 ![Page Image](https://bcdn.docswell.com/page/4EZLWY4973.jpg) ● グラフを読むにはPrimitvesノードへの 理解が必要 ● ネイティブノードと別体系のこれらの ノードを読む5つコツを伝授！ # Page. 18 ![Page Image](https://bcdn.docswell.com/page/Y76WGD3D7V.jpg) 理解のコツ① Primitiveは「動詞」で分けられてる ● 「Create」「Subdivide」「Align」など 動詞でカテゴライズされたフォルダ群 ● 下に Create_Spline_Shape などの 「V+O」的な命名のグラフが続く、 ● のだが・・・ # Page. 19 ![Page Image](https://bcdn.docswell.com/page/G75MV3L874.jpg) 理解のコツ① Primitiveは「動詞」で分けられてる メッシュ生成 （下流） スプライン生成 （上流） # Page. 20 ![Page Image](https://bcdn.docswell.com/page/9J293ZLVER.jpg) 理解のコツ① Primitiveは「動詞」で分けられてる ● あくまで「動詞」単位 ● ゆえに、人間視点では別物と思われる機 能が同じカテゴリに入っている ● LLMが「作業の段取りを言語化」した際 に、自然と適切なグラフが見つかるフォ ルダ構成といえる ● 我々人類も発想の転換が必要！ LLMのためかぁ～！ 日本人にはつらい！ # Page. 21 ![Page Image](https://bcdn.docswell.com/page/DEY41RQQJM.jpg) 参考 ● Shared：汎用のコールバック用グラフ ● _Template_：自作用のひな形グラフ群 ○ 一部のデフォルト処理にも使われる # Page. 22 ![Page Image](https://bcdn.docswell.com/page/VJNY2DK278.jpg) 理解のコツ② グラフの中身を読むな、Descriptionを読め ● Graph Settings > Description に グラフの説明が書かれている ● LLMはこのDescriptionからグラフ の入出力と処理内容を掴む ● グラフ実装を読む必要性は薄い ● Descriptionが未記入のグラフは、 さして注目しなくて問題ない シーン内に、指定した辺の数を持つ独立したク ローズドスプラインの多角形（n-gon）シェイプ を作成します。辺の数は最小で 3 です。プライマ リ入力としてポイント、スプライン、クローズド スプライン、または Polygon2D が指定されてい る場合、シェイプは各入力ポイントにコピーされ ます。PrimaryInputReferences_Types: {None, Type:Point, Type:Spline, Type:ClosedSpline, Type:Polygon2D} OutputTypes: {Type:ClosedSpline} # Page. 23 ![Page Image](https://bcdn.docswell.com/page/YE9P1GVDJ3.jpg) 【人類用】Primitives一覧用データテーブル ● 各 Primitives の位置づけ、Description、入出 力を集約したデータテーブル ● 全76種のPrimitivesをまとめてキャッチアップ 和訳版を作っておくのを お勧め！ # Page. 24 ![Page Image](https://bcdn.docswell.com/page/GE8D4VP5ED.jpg) 【人類用】Primitivesチートシート 和訳版＋α 作っておきました https://www.docswell.com/s/EpicGamesJapan/ZE1W6D-DevDays26-PCG-Primitives-CheatSheet # Page. 25 ![Page Image](https://bcdn.docswell.com/page/LELM65137R.jpg) 理解のコツ③ Primitiveは Generic化 されている ● ● ● 入力は「Primary Input」という Any型ピンにまとめて流し込む 受け入れ可能な型の範囲なら処理 が進み、 そうでなければ、定められた フォールバック処理が走る “閉スプライン、多角形、サーフェイ スを受け取って、点群を返す”ノード Primary Input ClosedSpline, Polygon2D, Surface Output Point # Page. 26 ![Page Image](https://bcdn.docswell.com/page/4JMY53WMJW.jpg) 理解のコツ③ Primitiveは Generic化 されている ● 入力は多くて2つ ● 異なる型の2つの入力を組み合わせ られる場合に、Secondary Inputが 登場 “Primary Inputの形状をSecandary Inputの形状で切り抜く”ノード Primary Input Spline, ClosedSpline, Polygon2D Secondary Input ClosedSpline, Polygon2D # Page. 27 ![Page Image](https://bcdn.docswell.com/page/PJR93QYL79.jpg) 理解のコツ④ サンプルのノード名はコメントである ● ノード名は処理コメントでリネーム済み LLMのためか～！ # Page. 28 ![Page Image](https://bcdn.docswell.com/page/PEXQ4546JX.jpg) 理解のコツ④ サンプルのノード名はコメントである ● ノード名は処理コメントでリネーム済み ● Primitivesとしてのアセット名はSubgraph欄で確認 # Page. 29 ![Page Image](https://bcdn.docswell.com/page/3EK9Z6ZGED.jpg) 理解のコツ⑤ Primitiveのグラフ仕込みは無視でよい Primitiveノードをクリックすると、詳細パネルに4つの差し替え可能なPCGグラフが現 れ、ギョッとさせられるが・・・ Input Processing Graph （入力の型を揃える前処理） Input Fallback Graph （適合しない入力だった場合のふるまい） Core Processing Graph （Primitivesの本体処理） Prepare Outputs Graph （定められた出力に準じるための後処理） # Page. 30 ![Page Image](https://bcdn.docswell.com/page/L73WD6D575.jpg) 理解のコツ⑤ Primitiveのグラフ仕込みは無視でよい Primitiveノードをクリックすると、詳細パネルに4つの差し替え可能なPCGグラフが現 れ、ギョッとさせられるが・・・ Input Processing Graph （入力の型を揃える前処理） Input Fallback Graph （適合しない入力だった場合のふるまい） Core Processing Graph （Primitivesの本体処理） Prepare Outputs Graph （定められた出力に準じるための後処理） 無視でOK! # Page. 31 ![Page Image](https://bcdn.docswell.com/page/87DKPVPYJG.jpg) 理解のコツ⑤ Primitiveのグラフ仕込みは無視でよい ● コールバック用グラフの存在は基 本無視でOK ● よってSharedフォルダ内のグラ フも当面読まなくてよい ● Primitivesにプリセットされたも のをそのまま使用する精神で ● コールバックグラフに付随する オーバーライドパラメータに意識 を集中 # Page. 32 ![Page Image](https://bcdn.docswell.com/page/VJPKNVN2E8.jpg) 覚えておきたい Primitive ● ● ● ● ● PCG Primitives 概要 Primitive 理解の5つのコツ 覚えておきたいPrimitive シンプルな都市の生成 まとめ # Page. 33 ![Page Image](https://bcdn.docswell.com/page/2EVVKZKXEQ.jpg) グラフの起点となる基本的なPrimitives スプライン生成 Get系 コンポーネントで置いたスプライ ンを読むより、Primitiveでスプ ラインを置きにいくケースが多 他のアクタのPCG出力を読むため にアクタを参照する 閉スプラインを作る Create_Spline_Shapeと、開放型 のCreate_Spline_lineがある タグで参照するGet_ActorData とアクタピッカーのある Get_ActorDataByRefの2種 # Page. 34 ![Page Image](https://bcdn.docswell.com/page/57GLQ4QREL.jpg) Subdivideで大きく領域をとって小さく分割～ Subdivide_Areas_withGrid エリアを最長辺に揃えた格子で細分割する 初期状態 Subdivide_Areas_WithRecursiveSplit 最長辺に直交する方向で再帰的に分割する 初期状態 Subdivide_Areas_withSpline 分割後 反復1 反復2 反復3 セカンダリのスプラインでエリアを切り分ける 初期状態 分割後 # Page. 35 ![Page Image](https://bcdn.docswell.com/page/4EQYKGKYJP.jpg) 応用系 基本系 主なフィルタ用Primitives Filter_RandomChoice シードと目標比率でランダムに選ぶ Filter_Points_Overlapping Extent 属性が重なり合う点を取り除く Filter_Tags タグでデータを Selected / Unselected に振り分ける Filter_AttributeValue 属性値の比較条件を満たす要素だけを通す Filter_Areas_BySize 面積（平方メートル）でエリアを選ぶ Filter_Areas_Largest 最大面積のエリアだけを選ぶ Filter_Areas_Smallest 最小面積のエリアだけを選ぶ やたら充実してますなあ 全12種類！ # Page. 36 ![Page Image](https://bcdn.docswell.com/page/KJ4WP5PZ71.jpg) Spawnはどうなってる？ 割り当て スポーン ポリゴン生成 点化したうえでメッシュを割り当 て、それをAsset属性に書き込む ので「Assign」系とされる Spawn_Assetsで入力された点群 上に分かりやすくアセットをス ポーン！ 入力された領域にポリゴンを張る 実はオプションでそのままスポー ンさせることもできる PCGアセンブリも使用できる その後の領域計算に使うこともあ れば、そのまま最終出力として使 うこともある # Page. 37 ![Page Image](https://bcdn.docswell.com/page/LE1Y9W9D7G.jpg) グラマーを用いたビルの構築 L2 L0,L1*,L2 壁* L1 柱, 窓, 壁* ,窓 ,柱 L0 柱, 窓, 壁* ,玄 ,壁 *,窓 ,柱 ● 【水平方向】建物のフットプリントのアウト ラインをセグメント化し、グラマーを適用 ● このとき、１階、中間階、最上階で異なるグ ラマーを適用したい ● 【垂直方向】「1階, 中間階*, 最上階」のよう に階の割り当てをグラマーで記述 ● 本来はかなり複雑で高度な手法だが、 Primitiveの Shape Grammar Definition を 利用すれば容易に実現可能 # Page. 38 ![Page Image](https://bcdn.docswell.com/page/GEWGQ6Q8J2.jpg) SGD (ShapeGrammarDefinition) やたら使われてるぜ！ # Page. 39 ![Page Image](https://bcdn.docswell.com/page/47ZLWYW9J3.jpg) 従来の単発のグラマーはShape Grammar Ruleとしてデータセットを作る SGDはそのRuleを複数設定可能なデー タセットである そのうえで、Ruleにシ ンボルを割り当て グラマーを適用可能！ （不使用もOK） # Page. 40 ![Page Image](https://bcdn.docswell.com/page/YJ6WGDGDJV.jpg) なお個々のビルの高さは… サンプルではノイズから 高さを割り当て # Page. 41 ![Page Image](https://bcdn.docswell.com/page/GJ5MV3V8J4.jpg) 屋上の処理 ● フットプリントを屋上の位置までオフセット し、ポリゴンを貼る ● 屋上に装飾のメッシュを置く ● アセット次第でちゃんと絵になる 屋上のヘリが立ってるのは、 最上階のアセットと 屋根オフセットの位置関係ね # Page. 42 ![Page Image](https://bcdn.docswell.com/page/9E293Z3V7R.jpg) シンプルな 都市の生成 ● ● ● ● ● PCG Primitives 概要 Primitive 理解の5つのコツ 覚えておきたいPrimitive シンプルな都市の生成 まとめ # Page. 43 ![Page Image](https://bcdn.docswell.com/page/D7Y41R1QEM.jpg) ステップ別の都市構築サンプル ● Examplesのひとつ 「City_Generator_steps」 ● 解説のために7つのステップに分か れており、 ● それぞれにアクタとPCGグラフが 存在 # Page. 44 ![Page Image](https://bcdn.docswell.com/page/VENY2D22J8.jpg) Base スプライン準備 Districts 区分け Lots 地区の生成 Ground 地面タイルと歩道 Buildings 建物のスポーンと屋上 Left_over_lots 広場と樹木の配置 city_Contour 都市外縁の歩道 # Page. 45 ![Page Image](https://bcdn.docswell.com/page/Y79P1G1DE3.jpg) ステップ１：区分け（道路を引く） Artery_1 （幹線道路1） Artery_2 （幹線道路2） City_Shape ※Description これは、直径約1kmのほぼ円形の小都市(曲がりくねった2本の幹線道路が横断する) を作成する第1ステップです。都市の形状と、それを横切って蛇行する2本の主要幹 線道路を描画します。このグラフはレベル内にスプラインアクタをスポーンするた め、ユーザーはそれらを操作できます。 # Page. 46 ![Page Image](https://bcdn.docswell.com/page/G78D4V457D.jpg) 閉スプラインデータ作成 編集できるように スプラインデータをアクタ化 （同時にタグ付けも） スプラインデータ作成 # Page. 47 ![Page Image](https://bcdn.docswell.com/page/L7LM6563JR.jpg) ステップ２：区分け 前ステップで作った スプラインには タグでアクセス 第2ステップ: 次にそれらを使って、地区(District)、サブ地区(Subdistrict)、グ リッドブロック(Grid Block)を作成します。分割用のスプラインは道路のスポーン に使用されます。生成されたすべてのデータには、後で他のグラフから利用できる ようにタグが付けられます。 # Page. 48 ![Page Image](https://bcdn.docswell.com/page/4EMY535MEW.jpg) ステップ2-1 ● City_Shape閉スプラインをArtery スプラインで分割 ● 細分割スプラインに幅を持たせて 「幹線道路」を敷設 初期状態 分割後 # Page. 49 ![Page Image](https://bcdn.docswell.com/page/PER93Q3LJ9.jpg) ステップ2-2 ● 細分割化された各領域を「再帰分 割」で1回だけ分割 ● 細分割に使われたスプラインに幅 を持たせて「集散道路」扱いに 初期状態 反復1 # Page. 50 ![Page Image](https://bcdn.docswell.com/page/P7XQ4596EX.jpg) ステップ2-3 ● 前回細分化された領域を今度はグ リッドで細分化 ● 細分化に使われたスプラインに幅 を持たせて「区画道路」扱いに 初期状態 分割後 # Page. 51 ![Page Image](https://bcdn.docswell.com/page/37K9Z6PG7D.jpg) ステップ2-4 ● これらの3種類の道路にFootprints タグをつけ、ステップ2を終了 ● 道路以外のデータは次ステップに ほとんど持ち越していない 「区分け」というより 道路敷設という印象ですな # Page. 52 ![Page Image](https://bcdn.docswell.com/page/LJ3WD6X5J5.jpg) 注：実際のサンプルの見た目 ● 重なる道路を断ち切っておらず、 方向性をもった見た目のメッシュ が折り重なって汚い ● 見た目にかなり問題はあるが、 PCGロジック自体の完成度は高い 高いんだよ！ # Page. 53 ![Page Image](https://bcdn.docswell.com/page/8JDKPV2YEG.jpg) ● 舗装マテリアルをワールドポジ ションで処理し、 ● 非交差のセグメントに中央線でも 引けば・・・ ● 見た目の完成度も爆上がり！ 海外の道路っぽい がんばって日本版も 作っていこう # Page. 54 ![Page Image](https://bcdn.docswell.com/page/VEPKNV1278.jpg) ステップ３：区画の生成 第3ステップ: 都市形状と幹線道路から地区(District)を分割するために使用された 別のPCGグラフを参照します。このグラフでは区画(Lot)の生成とフィルタリングを 行い、グラフの後段で建物や広場(Plaza)を建設できるようにします。 # Page. 55 ![Page Image](https://bcdn.docswell.com/page/27VVKZYX7Q.jpg) ステップ3-1 ● City_Area閉スプラインから前ス テップの出力の差を取る ● これにより、区画（Lots）が得ら れる # Page. 56 ![Page Image](https://bcdn.docswell.com/page/5JGLQ49R7L.jpg) ステップ3-2 ● ランダムチョイスでLotsの10%を 広場用に予約 ● 2000平米未満の区画を落とし、 ● 2000平米以上、8000平米以下の 区画を建築予定地として予約 # Page. 57 ![Page Image](https://bcdn.docswell.com/page/47QYKGWYEP.jpg) 再帰分割 2反復 ステップ3-3 ● 各建築予定地に対して再帰分割を2 反復で実行 ● 500平米以上を建築可範囲、 500平米未満を建築不可（空地）と して予約 ● これで建築物のフットプリント （すなわち主形状）を決める 500平米～ フィルタ # Page. 58 ![Page Image](https://bcdn.docswell.com/page/KE4WP5KZJ1.jpg) ● 大事なところは突破した！ もうわかるはず！ ● 以降はサクッといきます！ # Page. 59 ![Page Image](https://bcdn.docswell.com/page/L71Y9WXDJG.jpg) ステップ4：地面タイルと歩道 第4ステップ: 区画(Lot)を生成する別のPCGグラフを参照します。区画を地面タイル (Ground Tile)で敷き詰め、歩道(Sidewalk)をスポーンします。 # Page. 60 ![Page Image](https://bcdn.docswell.com/page/G7WGQ6N8E2.jpg) ステップ5：建物のスポーンと屋上 さっき 説明した技術のやつね 第5ステップ: 区画(Lot)を生成するPCGグラフを参照し、屋上(Rooftop)付きのさま ざまな建物をスポーンします。 # Page. 61 ![Page Image](https://bcdn.docswell.com/page/4JZLWY39E3.jpg) ステップ6：広場と樹木の配置 第6ステップ: 区画(Lot)を生成するPCGグラフを参照し、予約済みの区画を選んで広 場(Plaza)を建設し、建築不可のフットプリントにツリー(Tree)をスポーンさせま す。 # Page. 62 ![Page Image](https://bcdn.docswell.com/page/YE6WGDXDEV.jpg) ステップ7：都市外縁の歩道 第7ステップ: 都市の外縁部を作成します。都市形状は、外周道路(Peripheral Road) の幅の半分だけ拡張され、その分が考慮されます。 # Page. 63 ![Page Image](https://bcdn.docswell.com/page/GE5MV3X8E4.jpg) まとめ ● ● ● ● ● PCG Primitives 概要 Primitive 理解の5つのコツ 覚えておきたいPrimitive シンプルな都市の生成 まとめ # Page. 64 ![Page Image](https://bcdn.docswell.com/page/97293ZXVJR.jpg) 今日お話したこと ● PCG Primitivesは高度な処理を1ノードで行い、その組み合わせでプロシー ジャルコンテンツを作成できるライブラリプラグインです ● LLM/MCPのご加護があるが、人間でも使えます ● LLMのためにやたら説明書きが充実しているので、人間もそれを読めばよい ● 高機能なぶんネイティブノードより読みやすく、いくつかサンプルをあたれ ば、おおむね使い方が分かります ● チートシートを用意したので使ってください ● PCG版CitySampleを座して待ちましょう！ # Page. 65 ![Page Image](https://bcdn.docswell.com/page/DJY41R8Q7M.jpg) Thank ご清聴ありがとうございました