クッキー設定を管理します。以下で異なるタイプのクッキーを有効または無効にできます。詳細については、プライバシーポリシーをご覧ください。

Wonderbricksは、実際に出荷可能なWebXRエクスペリエンスとして開発が始まりました。これにより、「大規模なWonderland Engineプロジェクトはどのようなものか?」という問いに実例を示すことができます。

本日、Novelabとのパートナーシップを通じて、GitHubでプロジェクトのコードとアセットを公開しました。

リポジトリ: https://github.com/WonderlandEngine/wonderbricks

手に入るもの 

  • 完全なプロジェクトのソースコード(MITライセンス)
  • クリエイティブアセット(CC-BY)
  • VRとMRプロジェクトのための実用的な参考資料(対応ヘッドセットでの手トラッキングを含む)

この目的は、開発者が大規模プロジェクトの構造を逆向きに解析し、Wonderland Engineの多様な機能の統合方法を理解する手助けをすることです。

リポジトリのレイアウト 

Wonderbricksは、プロトタイプが出荷可能なアプリに成長した際もスケーラブルな少数の慣習に基づく標準的なWonderland Engineプロジェクトです。

  • js/ — アプリケーションコード(ゲームプレイ、UI、音声、ユーティリティ)
  • models/ — 3Dモデル
  • textures/ — テクスチャおよびアトラス
  • shaders/ — カスタムシェーダー
  • static/ — ランタイムで提供されるアセット(フォント、音楽、効果音)
  • raw/ — ソース音声アセット(処理前)
  • WonderBricks.wlp — Wonderlandエディタプロジェクトファイル

エントリーポイント 

js/index.jsは、Wonderland Engineプロジェクトが生成するエントリーポイントです。アプリの構成を明確にするため、最初に開く価値があります:

  • コンポーネントのインポートと登録(エディタで使用されているものから生成)
  • ランタイムオプション(エディタの設定から生成)
  • メインシーンの読み込み

「アプリはどこから始まるのか?」を理解したい場合、このファイルを見てください。

ゲームプレイ、UI、音声 

js/以下のコードは、責任に応じて分割されています:

  • js/gameplay/はビルドループを含みます(ブロック配置、グリッド/スナップ、インタラクション、プレハブ、パーティクル)
  • js/ui/は、インワールドUIを含みます(腕に装着されたパネル、セレクター、ボタン)
  • js/sound/は小規模なサウンドシステムとアクション特有のエミッタを含みます
  • js/utils/は小さなヘルパーを含みます(タグ、マテリアルヘルパーなど)

この分離はルールではありませんが、複数のシステムが並行して進化する際にプロジェクトの視認性を保ちます。

シェーダー 

shaders/は、いくつかのエディタ向け機能を示すカスタムフラグメントシェーダーを含んでいます:

  • シェーダーフィーチャートグル
  • 必要な入力のみを要求
  • カスタムシェーダーでのマテリアルプロパティ用UI生成を可能にするMaterial構造体の宣言

Wonderland Engineを基にカスタムレンダリングを構築している場合、これは有用な参考資料です。

プロジェクトの構築 

Wonderbricksはエディタを通じて完全に構築されます。最初にプロジェクトをチェックアウトする(またはGitHubからZIPをダウンロードする)ことから始めます:

1git clone https://github.com/WonderlandEngine/wonderbricks.git

その後、ブラウザで起動するために上部の緑色の矢印ボタンをクリックします。

Meta Questで実行するには:

  1. Meta Questでデベロッパーモードを有効化
  2. USBケーブルで接続
  3. WonderlandエディタでデバイスドロップダウンからMeta Questを選択
  4. 緑色の矢印をクリックしてブラウザをクエストで起動(ポートフォワーディングは自動設定されています。)

なぜオープンソースにするのか 

洗練されたリファレンスプロジェクトは、ドキュメントが完全にカバーできない質問に答えます:

  • より大きなプロジェクトをどのように構造化するか
  • ゲームプレイロジック、UI、およびアセットを一つの塊にしない方法
  • 最終的に出荷可能なWonderland Engineセットアップはどのように見えるか
  • ドキュメントを読み込むことなくエンジンを学ぶ方法(やはり、それが最も楽しい学び方です。)

Wonderland Engineを評価しているなら、具体的に調査できるものがあります。すでに使用しているなら、プロジェクトに適したパターンを採用できるセットとして利用できます。

注意事項 

このリポジトリを基に何かを構築し、それを共有したい場合、私たちのDiscordコミュニティに投稿してください:

https://discord.wonderlandengine.com

Last Update: February 7, 2026

最新情報をお届けします。