デプロイと最適化

デプロイとは?

デプロイとは、アプリケーションをウェブサイトで公開し、一般に利用可能にするプロセスです。Needle Engineは、KTX2DracoMeshoptなどの最新の圧縮技術を使用することで、プロジェクトを可能な限り小さく高速にします。

利用可能なデプロイターゲット

  • Needle Cloud 空間Webアプリやアセット共有に最適です。

  • Glitch サーバーサイドコードの実験やハッキングに最適です。

  • Netlify 独自のウェブサイトやカスタムドメイン名のホスティングに最適です。

  • itch.io ゲームによく使用されます。

  • GitHub Pages 無料の静的ページホスティングです。

  • Vercel フロントエンド開発者向けプラットフォーム

  • FTP Upload FTPサポートのある任意のサーバーに直接デプロイします。FTPとSFTPの両方がサポートされています。

  • Build to folder フォルダにビルドする場合、ファイルを任意のWebサーバーまたは他のホスティングサービスにアップロードできます。

  • Facebook Instant Games FacebookおよびFacebook Messenger上のゲームプラットフォームです。

::: tip 何か足りないと感じたら?フォーラムでお知らせください! :::

開発ビルド

エディター内(例:UnityまたはBlender)からオプションにアクセスする方法については、上記のガイドを参照してください。

製品ビルドとの主な違いは、ktx2およびdraco圧縮(ファイルサイズと読み込み速度の削減のため)を行わないこと、および高品質テクスチャのプログレッシブ読み込みオプションがないことです。

通常、ファイルサイズと読み込み速度を最適化するために、製品ビルドを作成することをお勧めします(詳細は以下を参照)。

製品ビルド

製品ビルドを作成するには、toktxがインストールされている必要があります。これは、KTX2スーパー圧縮フォーマットを使用したテクスチャ圧縮を提供します。toktxリリースページにアクセスし、最新バージョン(執筆時点ではv4.1.0)をダウンロードしてインストールしてください。インストール後にUnityを再起動する必要がある場合があります。toktxをインストールしており、それがPATHの一部であるにもかかわらず見つからない場合は、マシンを再起動してから再度ビルドを試みてください。

:::details 高度な設定: カスタムglTF拡張機能 独自のカスタムglTF拡張機能を追加する予定がある場合、製品ビルドにはgltf-transformでのそれらの処理が必要です。参考として@needle-tools/gltf-build-pipelineを参照してください。 :::

最適化と圧縮オプション

テクスチャ圧縮

製品ビルドでは、デフォルトでKTX2(プロジェクトでの使用方法に応じてETC1SまたはUASTC)を使用してテクスチャを圧縮しますが、WebP圧縮を選択し、品質レベルを選択することもできます。

ETC1S、UASTC、WebP圧縮のどれを選択すればよいですか?

フォーマット
ETC1S
UASTC
WebP

GPUメモリ使用量

高(非圧縮)

ファイルサイズ

非常に低い

品質

非常に高い

品質設定による

一般的な使用例

全てに機能しますが、カラーテクスチャに最適

高詳細データテクスチャ:ノーマルマップ、ラフネス、メタリックなど

ETC1Sの品質が不十分だがUASTCが大きすぎるファイル

UnityのNeedle Texture Importerを使用するか、BlenderのMaterialタブで、テクスチャごとにテクスチャ圧縮およびプログレッシブ読み込みオプションを選択できます。

:::details Unity: テクスチャごとの圧縮設定を行うには? :::

:::details Blender: テクスチャごとの圧縮設定を行うには? マテリアルタブを選択します。そのマテリアルで使用されているすべてのテクスチャの圧縮オプションが表示されます。 :::

:::details Toktxが見つかりません Windows: システム環境変数にtoktxを追加したことを確認してください。環境変数を更新するためにコンピューターを再起動する必要がある場合があります。デフォルトのインストール場所はC:\Program Files\KTX-Software\binです。 :::

メッシュ圧縮

デフォルトでは、製品ビルドはDraco圧縮を使用してメッシュを圧縮します。エクスポートされたglTFごとにdracoとmesh-optを選択するには、MeshCompressionコンポーネントを使用します。 さらに、メッシュインポート設定(Unity)で、製品ビルドのポリゴン数を減らすためのメッシュ単純化を設定できます。ブラウザでアプリケーションを表示するときは、URLに?wireframeを追加してメッシュをプレビューできます。

DracoとMeshoptのどちらを選択すればよいですか?

フォーマット
Draco
Meshopt

GPUメモリ使用量

ファイルサイズ

最低

アニメーション圧縮

いいえ

はい

:::details dracoおよびmeshopt圧縮設定を行うには? MeshCompressionコンポーネントを追加して、エクスポートされたglTFごとにどの圧縮を適用するかを選択します。

image
  • 現在のシーンの圧縮を変更するには、ルートシーンの任意の場所に追加します。

  • prefabまたはNestedGltfの圧縮を変更するには、GltfObjectまたは任意のコンポーネントが参照/エクスポートするprefabに追加します。

  • 参照されたシーンの圧縮を変更するには、エクスポートされる参照されたシーンに追加します。 :::

:::details 製品向けビルド時の頂点数削減のためのメッシュ単純化オプションを見つける場所は? メッシュを選択し、Needleインポーターオプションを開くと、選択したメッシュに使用可能なオプションが表示されます。 :::

プログレッシブテクスチャ

シーンの任意の場所にProgressive Texture Settingsコンポーネントを追加して、プロジェクト内のすべてのテクスチャをプログレッシブに読み込むこともできます。現時点では、ライトマップやスカイボックステクスチャにはプログレッシブ読み込みは適用されません。

プログレッシブ読み込みでは、テクスチャは最初に低解像度バージョンで読み込まれます。フル品質バージョンは、テクスチャが表示可能になったときに動的に読み込まれます。これにより、通常、シーンの最初の読み込みが大幅に削減されます。

:::details プログレッシブテクスチャ読み込みを有効にするには?

プログレッシブテクスチャはテクスチャごとに有効にできます

またはプロジェクト内のすべてのテクスチャに対して有効にできます:

image

他の特定の設定がないプロジェクト内のすべてのテクスチャに対して有効にする:

:::

自動メッシュLODs (Level of Detail)

Needle Engine 3.36以降、LODメッシュが自動的に生成され、ランタイムでそれらが切り替わります。LODはオンデマンドで、必要なときにのみ読み込まれるため、この機能は読み込み時間とパフォーマンスの両方を向上させます。

主な利点

  • 初回読み込み時間の短縮

  • 画面上の平均頂点数が少なくなるため、レンダリング時間の短縮

  • LODメッシュを使用するため、レイキャスティングの高速化

Progressive Loading Settingsコンポーネントでプロジェクト全体のLOD生成を無効にするか、Mesh Importer設定で無効にすることができます。

image
image

デプロイオプション

Glitchにデプロイ 🎏

Glitchは、誰でも小さくて大きなウェブサイトをホストするための高速で無料の方法を提供します。私たちのスターターをベースにした新しいGlitchページへのリミックスとデプロイ、および必要に応じて同じGlitchページでミニマルなネットワークサーバーを実行する簡単な方法を提供しています。

DeployToGlitchコンポーネントをシーンに追加し、手順に従うことでglitchにデプロイできます。

Glitchでホストされる無料プロジェクトは、約100MBを超えることはできません。より大きなプロジェクトをアップロードする必要がある場合は、別のデプロイターゲットの使用を検討してください。

:::details UnityからGlitchにデプロイするには?

  1. ExportInfoコンポーネントも持つGameObjectにDeployToGlitchコンポーネントを追加します。

  2. コンポーネントのCreate new Glitch Remixボタンをクリックします

  3. Glitchがテンプレートのリミックスを作成します。ブラウザからURLをコピーします

  4. Unityを再度開き、Deploy To GlitchコンポーネントのProject NameフィールドにURLを貼り付けます

  5. UnityがGlitchからデプロイキーを受け取るまで数秒待ちます(このキーはGlitchの.envファイルに安全に保存されています。他の人と共有しないでください。このキーを持つすべての人がGlitchウェブサイトにアップロードできるようになります)

  6. デプロイキーが受信されたら、Build & DeployボタンをクリックしてGlitchにアップロードできます。

:::

:::details BlenderからGlitchにデプロイするには?

Deploy To Glitch from Blender component
  1. SceneタブでDeploy To Glitchパネルを見つけます

  2. コンポーネントのRemix on glitchボタンをクリックします

  3. ブラウザがglitchプロジェクトテンプレートを開きます

  4. Glitchが新しいプロジェクトを生成するまで待ちます

  5. GlitchプロジェクトのURLをプロジェクト名としてBlenderのDeployToGlitchパネルにコピー&ペーストします(完全なURLをペーストしても、パネルが必要な情報を抽出します)

  6. Glitchで.envファイルを開き、DEPLOY_KEYの隣にあるVariable Valueフィールドにパスワードを入力します

  7. BlenderのKeyフィールドに同じパスワードを入力します

  8. DeployToGlitchボタンをクリックしてプロジェクトをビルドし、glitchにアップロードします。アップロードが完了するとブラウザが開きます。開いた後に画面が真っ暗な場合は、ページを更新してみてください。 :::

Glitchのトラブルシューティング

Create new Glitch Remixをクリックしてブラウザにthere was an error starting the editorのようなエラーが表示された場合は、OKをクリックしてください。その後、glitch.comに移動し、サインインしていることを確認してください。その後、UnityまたはBlenderで再度ボタンをクリックしてみてください。

Netlifyにデプロイ

:::details UnityからNetlifyにデプロイするには? シーンにDeployToNetlifyコンポーネントを追加し、手順に従うだけです。ボタンをクリックするか、既存のプロジェクトにデプロイすることで新しいプロジェクトを作成できます。

Deploy to netlify component

:::

Vercelにデプロイ

  1. vercelで新しいプロジェクトを作成します

  2. webプロジェクトをgithubリポジトリに追加します

  3. リポジトリをvercelのプロジェクトに追加します

プロジェクト設定については、サンプルプロジェクトを参照してください。

itch.ioにデプロイ

:::details Unityからitch.ioにデプロイするには?

  1. itch.ioで新しいプロジェクトを作成します

  2. Kind of projectHTMLに設定します

  3. シーンにDeployToItchコンポーネントを追加し、Buildボタンをクリックします

  4. ビルドが完了するまで待ちます。完了すると最終的なzipファイルが入ったフォルダが開きます。

  5. itch.ioに最終的なzipファイルをアップロードします

  6. This file will be played in the browserを選択します

  7. itchページを保存し、itchプロジェクトページを表示します。 Needle Engineプロジェクトが読み込まれるはずです😊

オプション設定

:::

:::details Itch.io: index.htmlが見つかりませんでした

index.htmlが見つかりませんでした

プロジェクトをアップロードした後にこのエラーが表示される場合は、gzippedされたindex.htmlをアップロードしていないことを確認してください。 Needle webプロジェクトフォルダのvite.config.jsでgzip圧縮を無効にできます。viteCompression({ deleteOriginFile: true })の行を削除するだけです。プロジェクトを再度ビルドし、itchにアップロードしてください。

:::

FTPにデプロイ

:::details UnityからFTPサーバーにデプロイするには?

  1. シーン内のGameObjectにDeployToFTPコンポーネント¹を追加します(ExportInfoと同じGameObjectに追加するのが良い習慣ですが、必須ではありません)

  2. まだ行っていない場合は、FTPサーバーアセットを割り当てて、サーバー、ユーザー名、パスワードを入力します ²このアセットには、FTPサーバーへのアクセス情報が含まれています。これらは、ホスティングプロバイダーで新しいFTPアカウントを作成するときに入手します。

  3. DeployToFTPコンポーネントのBuild & Deployボタンをクリックしてプロジェクトをビルドし、FTPアカウントにアップロードします

¹ Deploy to FTPコンポーネント

² FTPユーザーアカウントのアクセス情報を含むFTPサーバーアセット

サーバーアセットが割り当てられた後のDeploy To FTPコンポーネント。pathフィールドを使用して、サーバー上のサブフォルダに直接デプロイできます。 :::

:::details FTPサーバーに手動でデプロイするには?

  1. File > Build Settingsを開き、Needle Engineを選択してBuildをクリックします

  2. ビルドが完了するまで待ちます。ビルドと圧縮のすべてのステップが実行された後、結果のdistフォルダが自動的に開きます。

  3. distフォルダからFTPストレージにファイルをコピーします。

以上です! 😉

20220830-003602_explorer-needle

注意: アップロードしたときに結果が機能しない場合は、Webサーバーがgzippedファイルの提供をサポートしていない可能性があります。問題を修正するには2つのオプションがあります。 オプション1: htaccessファイルを使用してサーバーでgzip圧縮を有効にしてみてください! オプション2: ファイル/ビルドウィンドウでgzip圧縮を無効にし、Needle Engineプラットフォームを選択します。

注意: 圧縮中にエラーが発生する場合は、バグを報告してください!ローカルでプロジェクトは機能するが、製品ビルド時のみ失敗する場合は、開発ビルドを行うことで直ちに解決できます。そのためには、ビルド設定でDevelopment Buildをオンに切り替えるだけです。

Unity build window showing Needle Engine platform

:::

.htaccessファイルを使用したgzipの有効化

FTPサーバーでgzip圧縮を有効にするには、アップロードしたいディレクトリ(または親ディレクトリ)に.htaccessという名前のファイルを作成します。 以下のコードを.htaccessファイルに挿入し、保存/サーバーにアップロードします。

<IfModule mod_mime.c>
RemoveType .gz
AddEncoding gzip .gz
AddType application/javascript .js.gz

Github Pagesにデプロイ

:::details UnityからGithub Pagesにデプロイするには?

シーンにDeployToGithubPagesコンポーネントを追加し、デプロイしたいgithubリポジトリ(またはgithub pagesのURL)をコピー&ペーストします。

:::

github pagesのトラブルシューティング

  • github pagesにデプロイしましたが、アクションが実行されません / ウェブサイトがライブになりません

  • 初めてデプロイした場合、ウェブサイトが利用可能になるまで数分かかることがあります。githubのActionsタブ(/actions)でデプロイプロセスを確認できます。

  • 数分経ってもウェブサイトがライブにならない、またはgithubのActionsタブでワークフローの実行が見られない場合は、Github Pages設定ページ(/settings/pages)に移動し、Branchgh-pagesに設定されていることを確認してください。

Facebook Instant Gamesにデプロイ

Needle Engineを使用すると、Facebook Instant Gamesに自動的にビルドできます。 Webアプリやゲームを手動で調整する必要はありません。

:::details UnityからFacebook Instant Gamesにデプロイするには?

  • シーンにDeploy To Facebook Instant Gamesコンポーネントを追加します。

  • Build For Instant Gamesボタンをクリックします

  • ビルドが完了すると、facebookアプリにアップロードできるZIPファイルが生成されます。

  • FacebookでInstant Gamesモジュールを追加し、Instant Games/Web hostingに移動します

  • Upload versionボタン(1)を使用してzipをアップロードできます。アップロードが完了し、zipが処理されたら、Stage for testingボタン(2、ここでは青いボタン)をクリックしてアプリをテストするか、Push to production(星アイコンのボタン)をクリックします

  • これで完了です。各バージョンの横にあるPlayボタンをクリックして、facebookでゲームをテストできます。

:::

:::details FacebookにInstant Games機能を持つアプリを作成するには?

  1. 新しいアプリを作成し、Otherを選択します。その後、Nextをクリックします。

  2. タイプとしてInstant Gamesを選択します。

  3. アプリ作成後、Instant Games製品を追加します。

facebookの公式インスタントゲームドキュメントはこちらで見つけることができます。注意:必要なのは、インスタントゲーム機能を持つアプリを作成することだけです。 それ以外のすべては当社が対応し、Needle Engineウェブサイトの手動調整は必要ありません。 :::

フォルダへのビルド

UnityでFile/Build Settingsを開き、オプションとしてNeedle Engineを選択します。

image
image

任意のWebサーバーにアップロードするためのWebプロジェクトをビルドするには、Unity EditorのBuild SettingsウィンドウでBuildをクリックします。Development Buildチェックボックスを有効にすると、圧縮(以下を参照)を省略できます。圧縮には、toktxがマシンにインストールされている必要があります。

最終ビルドをローカルでプレビューするには、ウィンドウ下部にあるPreview Buildボタンを使用します。このボタンはまず通常のビルドを実行し、その後最終ファイルを含むディレクトリでローカルサーバーを開始するため、これらのファイルをWebサーバーにアップロードしたときに得られるものを確認できます。

Nodejsは開発中にのみ必要です。配布されるウェブサイト(デフォルトのviteテンプレートを使用)はNodejsに依存しない静的ページであり、任意の通常のWebサーバーに配置できます。同じWebサーバーでミニマルなネットワークサーバーを実行したい場合(Glitchデプロイプロセスに自動的に含まれています)は、Nodejsが必要です。


クロスプラットフォームデプロイワークフロー

通常のUnityプロジェクトを作成し、Needle Engineだけでなく、デスクトップやWebGLのような通常のUnityプラットフォームにもビルドすることが可能です。「コンポーネントマッピング」アプローチにより、Unity内のランタイムロジックは変更されません。必要であれば、定期的にPlay Modeを使用し、他のターゲットプラットフォームにビルドできます。場合によっては、これにより重複したコード(C#コードとそれに対応するTypeScriptロジック)が発生します。これによる余分な作業量は、プロジェクトによって異なります。

UnityでPlay Modeに入るProject Settings > Needle Engineで、Override Play ModeOverride Build settingsをオフにすることで、NeedleのビルドプロセスとUnityのビルドプロセスを切り替えることができます。

Unity用Needle Engineコマンドライン引数

Unity用Needle Engineは、単一のアセット(Prefabまたはシーン)をエクスポートするため、またはバッチモード(ウィンドウなし)でWebプロジェクト全体をビルドするための様々なコマンドライン引数をサポートしています。

以下に利用可能なオプションの表を示します。

-scene

エクスポートするシーンまたはアセットへのパス 例:Assets/path/to/myObject.prefab または Assets/path/to/myScene.unity

-outputPath <path/to/output.glb>

ビルドの出力パスを設定します(シーンをビルドする場合のみ有効)

-buildProduction

製品ビルドを実行します

-buildDevelopment

開発ビルドを実行します

-debug

デバッグ用のコンソールウィンドウを開きます

AIによって自動翻訳されたページ

Last updated