Wonderbricksは、生産プロジェクトとして始まりました。それは、もし「大規模なWonderland Engineプロジェクトが実際にどのように見えるか」と尋ねられたときに指し示すことができる完全なWebXRの体験です。

今日、パートナーの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/ には、エディターフェイシング機能をいくつか示すカスタムフラグメントシェーダーが含まれています。

  • シェーダー機能の切り替え
  • 必要な入力のみを要求する
  • Material構造体を宣言して、エディターがカスタムシェーダー内のマテリアルプロパティに対するUIを生成できるようにする

Wonderland Engineをベースにカスタムレンダリングを構築する場合、これが役立つリファレンスです。

プロジェクトのビルド 

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

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

その後、上部の緑色の矢印ボタンを押してブラウザで起動します。

Meta Questで実行するには:

  1. Meta Questで開発者モードを有効にする
  2. USBケーブルで接続する
  3. Wonderland EditorでデバイスドロップダウンからMeta Questを選択する
  4. 緑色の矢印を押してQuest上でブラウザを起動する(ポートフォワーディングは設定済みです。)

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

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

  • より大きなプロジェクトをどのように構築するか
  • ゲームプレイロジック、UI、およびアセットを1つの塊にすることを避けるには
  • 「出荷可能」なWonderland Engineセットアップが端から端までどのように見えるか
  • ドキュメントを読まずにエンジンを学ぶ方法(結局、それが最も楽しい学び方です。)

Wonderland Engineを評価している途中なら、具体的に調査できるものを提供します。既に使用している場合、それに基づいてプロジェクトに適したパターンをコピーする(または無視する)ことができます。

注意事項 

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

https://discord.wonderlandengine.com

Last Update: February 9, 2026

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