Needle Engine ドキュメント
Downloads
  • What is Needle Engine?
  • お客様の声
  • Get an overview

    • Samples and Showcase
    • 私たちのビジョン 🔮
    • 機能概要
    • 技術概要
  • Resources

    • Pricing and Plans
    • Changelog
    • API Documentation
    • Support & Community
  • Integrations

    • Unity用Needle Engine
    • Blender 用 Needle Engine
    • Web ComponentとしてのNeedle Engine
    • ウェブサイトでのNeedle Engine
    • Needle Cloud
  • Topics

    • Webプロジェクトの構造
    • Everywhere Actions
    • glTFへのアセットのエクスポート
    • フレームワーク、バンドラー、HTML
    • ローカルデバイスでのテスト
    • デプロイと最適化
  • Advanced

    • ネットワーキング
    • VR & AR (WebXR)
    • HTMLからNeedle Engineを直接使用する
    • Editor Sync
  • Troubleshooting

    • デバッグの方法
    • よくある質問(FAQ)💡
    • Get Help
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Needle Engineでのスクリプティング
    • Unity開発者向けスクリプト入門
    • Needleコアコンポーネント
    • Everywhere Actions
  • Components and Lifecycle

    • Creating and using Components
    • @serializable およびその他のデコレーター
    • 自動コンポーネント生成
    • Scripting Examples
    • Community Contributions
    • 追加モジュール
  • Settings and APIs

    • <needle-engine> 設定
    • /lang/ja/reference/needle-config-json.html
    • Needle Engine API
    • three.js API
Help
Samples
Pricing
  • Needle Website
  • Needle Cloud
  • Support Community
  • Discord Server
  • X/Twitter
  • YouTube
  • Newsletter
  • Email
  • Feedback
  • Github
  • English
  • 简体中文
  • Español
  • Português
  • Français
  • हिन्दी
  • 日本語
  • Deutsch
  • Tiếng Việt
Downloads
  • What is Needle Engine?
  • お客様の声
  • Get an overview

    • Samples and Showcase
    • 私たちのビジョン 🔮
    • 機能概要
    • 技術概要
  • Resources

    • Pricing and Plans
    • Changelog
    • API Documentation
    • Support & Community
  • Integrations

    • Unity用Needle Engine
    • Blender 用 Needle Engine
    • Web ComponentとしてのNeedle Engine
    • ウェブサイトでのNeedle Engine
    • Needle Cloud
  • Topics

    • Webプロジェクトの構造
    • Everywhere Actions
    • glTFへのアセットのエクスポート
    • フレームワーク、バンドラー、HTML
    • ローカルデバイスでのテスト
    • デプロイと最適化
  • Advanced

    • ネットワーキング
    • VR & AR (WebXR)
    • HTMLからNeedle Engineを直接使用する
    • Editor Sync
  • Troubleshooting

    • デバッグの方法
    • よくある質問(FAQ)💡
    • Get Help
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Needle Engineでのスクリプティング
    • Unity開発者向けスクリプト入門
    • Needleコアコンポーネント
    • Everywhere Actions
  • Components and Lifecycle

    • Creating and using Components
    • @serializable およびその他のデコレーター
    • 自動コンポーネント生成
    • Scripting Examples
    • Community Contributions
    • 追加モジュール
  • Settings and APIs

    • <needle-engine> 設定
    • /lang/ja/reference/needle-config-json.html
    • Needle Engine API
    • three.js API
Help
Samples
Pricing
  • Needle Website
  • Needle Cloud
  • Support Community
  • Discord Server
  • X/Twitter
  • YouTube
  • Newsletter
  • Email
  • Feedback
  • Github
  • English
  • 简体中文
  • Español
  • Português
  • Français
  • हिन्दी
  • 日本語
  • Deutsch
  • Tiếng Việt
  • Getting Started

    • Downloads
    • Needle Engine for Unity
    • Needle Engine for Blender
    • Needle Engine as Web Component
    • Needle Engine on your Website
    • Needle Cloud
    • Custom integrations
    • Support and Community
  • Core Concepts

    • Webプロジェクトの構造
    • Everywhere Actions
    • glTFへのアセットのエクスポート
    • フレームワーク、バンドラー、HTML
    • ローカルデバイスでのテスト
    • デプロイと最適化
    • デバッグの方法
    • よくある質問(FAQ)💡
  • Scripting

    • Needle Engineでのスクリプティング
    • Unity開発者向けスクリプト入門
    • Creating and using Components
    • 自動コンポーネント生成
    • Scripting Examples
    • Community Contributions
  • Advanced

    • VR & AR (WebXR)
    • ネットワーキング
    • Editor Sync
  • Reference

    • 機能概要
    • 技術概要
    • Needleコアコンポーネント
    • /lang/ja/reference/needle-config-json.html
    • <needle-engine> 設定
    • @serializable およびその他のデコレーター

デプロイとは?

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

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

  • 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上のゲームプラットフォームです。

何か足りないと感じたら?

フォーラムでお知らせください!

開発ビルド

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

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

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

製品ビルド

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

高度な設定: カスタムglTF拡張機能

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

最適化と圧縮オプション

テクスチャ圧縮

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

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

フォーマットETC1SUASTCWebP
GPUメモリ使用量低低高(非圧縮)
ファイルサイズ低高非常に低い
品質中非常に高い品質設定による
一般的な使用例全てに機能しますが、カラーテクスチャに最適高詳細データテクスチャ:ノーマルマップ、ラフネス、メタリックなどETC1Sの品質が不十分だがUASTCが大きすぎるファイル

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

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

imageimage

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

マテリアルタブを選択します。そのマテリアルで使用されているすべてのテクスチャの圧縮オプションが表示されます。 Texture Compression options in Blender

Toktxが見つかりません

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

メッシュ圧縮

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

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

フォーマットDracoMeshopt
GPUメモリ使用量中低
ファイルサイズ最低低
アニメーション圧縮いいえはい
dracoおよびmeshopt圧縮設定を行うには?

MeshCompressionコンポーネントを追加して、エクスポートされたglTFごとにどの圧縮を適用するかを選択します。

image

  • 現在のシーンの圧縮を変更するには、ルートシーンの任意の場所に追加します。
  • prefabまたはNestedGltfの圧縮を変更するには、GltfObjectまたは任意のコンポーネントが参照/エクスポートするprefabに追加します。
  • 参照されたシーンの圧縮を変更するには、エクスポートされる参照されたシーンに追加します。
製品向けビルド時の頂点数削減のためのメッシュ単純化オプションを見つける場所は?

メッシュを選択し、Needleインポーターオプションを開くと、選択したメッシュに使用可能なオプションが表示されます。 image

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

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

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

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

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

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

image

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

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を超えることはできません。より大きなプロジェクトをアップロードする必要がある場合は、別のデプロイターゲットの使用を検討してください。

UnityからGlitchにデプロイするには?
  1. ExportInfoコンポーネントも持つGameObjectにDeployToGlitchコンポーネントを追加します。

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

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

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

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

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

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にデプロイ

UnityからNetlifyにデプロイするには?

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

Deploy to netlify component

Deploy to netlify component

Vercelにデプロイ

  1. vercelで新しいプロジェクトを作成します
  2. webプロジェクトをgithubリポジトリに追加します
  3. リポジトリをvercelのプロジェクトに追加します

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

itch.ioにデプロイ

Unityからitch.ioにデプロイするには?
  1. itch.ioで新しいプロジェクトを作成します

  2. Kind of projectをHTMLに設定します image

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

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

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

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

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

オプション設定

image

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

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

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

FTPにデプロイ

UnityからFTPサーバーにデプロイするには?
  1. シーン内のGameObjectにDeployToFTPコンポーネント¹を追加します(ExportInfoと同じGameObjectに追加するのが良い習慣ですが、必須ではありません)
  2. まだ行っていない場合は、FTPサーバーアセットを割り当てて、サーバー、ユーザー名、パスワードを入力します ² このアセットには、FTPサーバーへのアクセス情報が含まれています。これらは、ホスティングプロバイダーで新しいFTPアカウントを作成するときに入手します。
  3. DeployToFTPコンポーネントのBuild & Deployボタンをクリックしてプロジェクトをビルドし、FTPアカウントにアップロードします

Deploy to FTP component in Unity¹ Deploy to FTPコンポーネント

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

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

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にデプロイ

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

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

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

  • github pagesにデプロイしましたが、アクションが実行されません / ウェブサイトがライブになりません
  • 初めてデプロイした場合、ウェブサイトが利用可能になるまで数分かかることがあります。githubのActionsタブ(/actions)でデプロイプロセスを確認できます。
  • 数分経ってもウェブサイトがライブにならない、またはgithubのActionsタブでワークフローの実行が見られない場合は、Github Pages設定ページ(/settings/pages)に移動し、Branchがgh-pagesに設定されていることを確認してください。

Facebook Instant Gamesにデプロイ

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

UnityからFacebook Instant Gamesにデプロイするには?
  • シーンにDeploy To Facebook Instant Gamesコンポーネントを追加します。 Deploy to facebook instant games component
  • Build For Instant Gamesボタンをクリックします
  • ビルドが完了すると、facebookアプリにアップロードできるZIPファイルが生成されます。
  • FacebookでInstant Gamesモジュールを追加し、Instant Games/Web hostingに移動します Hosting a facebook instant games
  • Upload versionボタン(1)を使用してzipをアップロードできます。アップロードが完了し、zipが処理されたら、Stage for testingボタン(2、ここでは青いボタン)をクリックしてアプリをテストするか、Push to production(星アイコンのボタン)をクリックします Upload the zip to facebook instant games
  • これで完了です。各バージョンの横にあるPlayボタンをクリックして、facebookでゲームをテストできます。
FacebookにInstant Games機能を持つアプリを作成するには?
  1. 新しいアプリを作成し、Otherを選択します。その後、Nextをクリックします。 Create facebook instant games app

  2. タイプとしてInstant Gamesを選択します。 Create facebook instant games app

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

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 ModeとOverride Build settingsをオフにすることで、NeedleのビルドプロセスとUnityのビルドプロセスを切り替えることができます。 image

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によって自動翻訳されたページ

Suggest changes
最終更新:: 2025/06/11 12:25
Prev
ローカルデバイスでのテスト
Next
デバッグの方法