Wonderbricks ist jetzt Open Source

Wonderbricks begann als Produktionsprojekt: eine vollständige WebXR-Erfahrung, die wir bereitstellen und auf die verweisen konnten, wenn die Frage aufkam: “Wie sieht ein großes Wonderland Engine-Projekt in der Praxis aus?”.

Heute veröffentlichen wir den vollständigen Quellcode und die Assets auf GitHub zusammen mit unseren Partnern Novelab.

Repository: https://github.com/WonderlandEngine/wonderbricks

Was du bekommst

Vollständiger Projekt-Quellcode (MIT)
Kreative Assets (CC-BY)
Eine funktionierende Referenz für VR- und MR-Projekte (inklusive Hand-Tracking-Unterstützung auf unterstützten Headsets)

Das Ziel ist es, Entwicklern zu erleichtern, zu verstehen, wie ein großes Projekt strukturiert werden kann und wie die verschiedenen Funktionen der Wonderland Engine zusammenpassen.

Repository-Struktur

Wonderbricks ist ein standardmäßiges Wonderland Engine-Projekt mit einigen Konventionen, die gut skalieren, wenn sich ein Prototyp zu einer veröffentlichten App entwickelt.

js/ — Anwendungs-Code (Gameplay, UI, Audio, Hilfsprogramme)
models/ — 3D-Modelle
textures/ — Texturen und Atlassen
shaders/ — maßgeschneiderte Shader
static/ — zur Laufzeit bereitgestellte Assets (Schriften, Musik, Soundeffekte)
raw/ — Audioquellenmaterial (vor der Verarbeitung)
WonderBricks.wlp — die Projektdatei des Wonderland Editors

Einstiegspunkt

js/index.js ist der generierte Einstiegspunkt, der von Wonderland Engine-Projekten verwendet wird. Es lohnt sich, diesen zuerst zu öffnen, da er die Zusammensetzung der App klar macht:

Import und Registrierung von Komponenten (generiert aus dem, was im Editor verwendet wird)
Laufzeitoptionen (generiert aus den Einstellungen im Editor)
Laden der Hauptszene

Wenn du verstehen möchtest, “wo beginnt die App?”, ist dies die Datei.

Gameplay, UI, Audio

Der Code unter js/ ist nach Verantwortlichkeiten aufgeteilt:

js/gameplay/ enthält die Aufbau-Schleife (Blockplatzierung, Raster/Einrasten, Interaktionen, Vorlagen, Partikel)
js/ui/ enthält die In-World-UI (armmontierte Panels, Selektoren, Knöpfe)
js/sound/ enthält ein kleines Soundsystem und aktionsspezifische Emitter
js/utils/ enthält kleine Helfer (Tags, Material-Helfer, etc.)

Diese Trennung ist keine Regel, hilft aber, das Projekt lesbar zu halten, wenn mehrere Systeme parallel weiterentwickelt werden.

Shader

shaders/ enthält angepasste Fragment-Shader, die einige editorbezogene Funktionen demonstrieren:

Shader-Feature-Umschalter
Anfordern nur der benötigten Eingaben
Deklarieren einer Material-Struktur, damit der Editor eine Benutzeroberfläche für Materialeigenschaften in benutzerdefinierten Shadern generieren kann

Wenn du ein benutzerdefiniertes Rendering auf Wonderland Engine aufbaust, ist dies eine nützliche Referenz.

Projekt bauen

Wonderbricks wird vollständig über den Editor gebaut. Beginne damit, das Projekt auszuchecken (oder das ZIP von GitHub herunterzuladen):

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

Und klicke dann oben auf den grünen Pfeil, um es im Browser zu starten.

Um es auf einem Meta Quest auszuführen:

Entwickler-Modus auf deinem Meta Quest aktivieren
Über ein USB-Kabel anschließen
Im Wonderland Editor das Meta Quest im Geräte-Dropdown oben auswählen
Klicke auf den grünen Pfeil, um den Browser auf der Quest zu starten (Portweiterleitung ist für dich eingerichtet.)

Warum Open Source?

Ein verfeinertes Referenzprojekt beantwortet Fragen, die Dokumentation nicht vollständig abdecken kann:

wie ein größeres Projekt strukturiert werden kann
wie man Spiel-Logik, UI und Assets davon abhält, zu einem einzigen Block zu werden
wie ein “versandbereites” Wonderland Engine-Setup von Anfang bis Ende aussieht
wie man die Engine lernen kann, ohne die Dokumentation zu lesen (schließlich ist das der unterhaltsamste Weg zu lernen).

Wenn du die Wonderland Engine bewertest, bietet dir dies etwas Konkretes zur Inspektion. Wenn du sie bereits benutzt, ist es ein Muster, das du kopieren (oder ignorieren) kannst, je nachdem, was zu deinem Projekt passt.

Hinweise

Wenn du etwas basierend auf diesem Repository erstellst und es teilen möchtest, poste es in unserer Discord-Community:

https://discord.wonderlandengine.com

Last Update: February 7, 2026