渋谷ほととぎす通信

エンジニア社長によるUnityとAIのブログ & エンジニアの生存戦略

レンダラーを通してUnityオブジェクト同士の描画順を理解する

レンダラーを通してUnityオブジェクト同士の描画順を理解する

こんにちは、エンジニアのオオバです。

お悩みさん
お悩みさん
  • Unityの描画順がよくわからない
  • 描画順のルールってある?
  • レンダラーって何種類あるの?
  • オオバ
    オオバ
    本記事ではこれらの悩みを解決します。

    Unityの描画周りで困るのは オブジェクト同士の描画順 です。

    • レンダラー
    • カメラ
    • マテリアル
    • シェーダー

    など。

    描画順はさまざまな要素が絡まって決定します。

    ぶっちゃけ何をどう設定するのが正しいのかわからなくなりますよね。

    そこで本記事では 思った通りの描画順を実現するための基礎 を解説しています。

    Unityの描画順に困っている方はぜひ最後まで読んでみてください。

    👉DOTweenの教科書を読んでUnityアニメーションをプログラミングしてみよう!

    レンダラーって何?

    ところでUnityによく登場する「レンダラー」って何なのでしょうか?

    名前の通り描画に関連してそうですが、どんな役割を果たしているのでしょうか。

    • Renderer
    • MeshRenderer
    • SkinnedMeshRenderer
    • SpriteRenderer
    • CanvasRenderer
    • ParticleSystemRenderer

    など。

    上記のようにさまざまなレンダラーが存在します。

    これらのレンダラーはその名の通り、レンダリングを管理するコンポーネントです。つまり 「描画」担当 です。

    MeshRendererは 「メッシュ」 を、SpriteRendererは 「2D」 を。それぞれオブジェクトごとにレンダラーは決まっています。

    オブジェクトはレンダラーを通して画面に表示されます。逆に言うとレンダラーコンポーネントがないとオブジェクトは正常に描画されません。

    レンダラーが画面に表示されるまでの仕組み

    レンダラーを通して画面にオブジェクトが表示されることは分かりましたが、レンダラー以外にも描画にはさまざまな要素が登場します。

    • マテリアル
    • シェーダー
    • カメラ
    • GPU

    これらとレンダラーがどのように噛み合ってオブジェクトが描画されるのか解説していきます。

    レンダラーとマテリアル

    まずはレンダラーとマテリアルの関係性について。

    レンダラーはマテリアルと密接です。レンダラーはオブジェクトに対してマテリアルを適用します。

    レンダラーを通してUnityオブジェクト同士の描画順を理解する_0
    例えばSkinned MeshRendererの例で説明すると、Materialsプロパティからマテリアルを指定することができるのです。

    レンダラーを通してUnityオブジェクト同士の描画順を理解する_1
    他にもSprite Rendererは「Material」からマテリアルを設定できます。

    レンダラーを通してUnityオブジェクト同士の描画順を理解する_2
    ParticleSystemRendererも「Material」から設定可能です。

    このようにレンダラーはマテリアルをオブジェクトに適用する役割を果たします。

    レンダラーとシェーダー

    次にレンダラーとシェーダーの関係性を確認していきます。実は先のレンダラーとマテリアルの関係性で答えは出ているのです。

    結論からお話すると レンダラーはシェーダーをオブジェクトに適用する役割 を果たします。

    なぜならマテリアルとシェーダーは1対1の関係であるからです。

    マテリアルはオブジェクトの見た目を決める設定をしますが、シェーダーはその見た目を作るための 「計算」 をします。

    つまり マテリアルとシェーダーはセット です。レンダラーのMaterialプロパティにセットしたマテリアルには必ず何かの シェーダーが設定されている ということ。

    だから レンダラーはシェーダーをオブジェクトに適用する役割を持っている のです。

    レンダラーとカメラ & GPUの関係性

    次にレンダラーとカメラ、GPUとの関係性を確認していきます。

    結論、 撮影範囲内のレンダラーを収集してGPUに描画命令を送るのがカメラの役割 です。

    カメラには撮影範囲が決まっています。

    レンダラーを通してUnityオブジェクト同士の描画順を理解する_3

    • Projection
    • Field of View
    • Clipping Planes

    上記のパラメータから撮影範囲を決定します。

    レンダラーを通してUnityオブジェクト同士の描画順を理解する_4

    上の動画のようにカメラには撮影範囲(視錐台:しすいだい)が存在します。

    この撮影範囲内に含まれるレンダラーをカメラはGPUに対して描画命令(コマンドバッファ)を送信します。

    描画命令を受けたGPUが画面にオブジェクトを表示するという流れになります。

    つまりレンダラーは 各オブジェクトを表示可能にするための重要なコンポーネント ということです。

    思った通りの描画順を実現したい

    ゲームを作っているといろんな種類のオブジェクトを 仕様通り順 に表示する必要があります。

    • 3D背景
    • 3Dキャラクター
    • ダメージUI
    • ゲームエフェクト
    • システムUI
    • UI上のエフェクト
    • タップしたときのエフェクト

    などなど。

    これらを汎用性を考慮した上で描画順を制御するのは一苦労です。

    描画順の仕組みを実装する上で絶対に必要なものは 描画における基礎知識

    基礎を持たずになんとなくパラメーターを変更して作ったシステムほど 怖い ものはありません。

    あとから修正や追加開発をしたくても影響範囲がわからなくて 「誰も触れないブラックボックス」 になってしまいます。

    その結果、思ったような見た目を作れずクオリティを上げられない状況が発生してしまうのです。

    本記事を読んでいるみなさんには、そんな悲惨な状況になってほしくありません。

    そこでUnity歴12年のオオバが 描画順を体系的に学べる入門コンテンツ を作成しました。

    その名も「Unity描画順の教科書」です。

    Unity描画順の教科書

    Unity描画順の教科書はゲーム開発中に登場するさまざまなオブジェクトの描画順を思ったとおりに成業するための基礎を学べる入門書になっています。

    描画には ルール があります。このルールをしっかり体に染み込ませることで開発中のトラブルを最短で解決することができるようになるのです。

    レンダラーを通してUnityオブジェクト同士の描画順を理解する_5
    例えば上の動画のようにカメラからの距離によって描画順が決定することもあれば。

    レンダラーを通してUnityオブジェクト同士の描画順を理解する_6
    カメラからの距離を無視して描画順が決定することもあります。

    レンダラーを通してUnityオブジェクト同士の描画順を理解する_7
    また上記のように、2Dと3Dの組み合わせで思った通りの描画結果にならなかったら、、、焦ってしまいますよね。

    Unity描画順の教科書を読むことで「なぜ」この結果になってしまったのかという理由が説明できるようになります。

    また、描画はエンジニアだけの領域と思われがちですが デザイナー、プランナー関係なく知っておくべき知識 です。

    なぜならUnityで「実現できること」と「できないこと」を知っておくことで、貴重な開発時間の無駄を 抑えることができるから です。

    しかもUnity描画順の教科書にはプログラミングはほぼ登場しません。エンジニア以外の方でも理解できるように執筆しました。

    • Unityの描画順のルールを知りたい
    • 今描画順でトラブってる
    • これから描画順で困ったことになりそう

    こんな方にはピッタリのコンテンツになっています。

    Unity描画順の教科書は2025年3月3日ひな祭り19:00リリース予定。

    【注意】3月3日19:00以前ではアクセスできません

    ぜひ本コンテンツを手にとってあなたのゲーム開発の効率アップに繋げていただければと思います。

    Unity描画順の教科書
    Unityの描画順を体系的に学べる入門書。ゲーム開発中に登場するさまざまなオブジェクトの描画順を思ったとおりに制御してみませんか?そのための基礎をお伝えする教科書的コンテンツです。
    詳しくはこちら
    Unity描画順の教科書
    オススメ記事
    検証環境
    • Unity6000.0.32f1