Gestiona tus configuraciones de cookies. Puedes habilitar o deshabilitar diferentes tipos de cookies abajo. Para más detalles, consulta nuestra Política de Privacidad.

Wonderbricks ahora es Open Source

Wonderbricks comenzó como un proyecto de producción: una experiencia completa de WebXR que podríamos lanzar y mostrar cuando la gente preguntaba “¿cómo se ve en la práctica un gran proyecto de Wonderland Engine?”.

Hoy estamos lanzando todo el código fuente y los recursos en GitHub junto con nuestros socios Novelab.

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

Lo que obtienes 

  • Código fuente completo del proyecto (MIT)
  • Recursos creativos (CC-BY)
  • Una referencia práctica para proyectos de VR y MR (incluyendo soporte de seguimiento de manos en los cascos compatibles)

El objetivo es facilitar a los desarrolladores la ingeniería inversa para comprender cómo estructurar un gran proyecto y cómo se integran las diversas funcionalidades de Wonderland Engine.

Estructura del repositorio 

Wonderbricks es un proyecto estándar de Wonderland Engine con algunas convenciones que escalan bien cuando un prototipo crece hasta convertirse en una aplicación lanzada.

  • js/ — código de la aplicación (jugabilidad, interfaz de usuario, audio, utilidades)
  • models/ — modelos 3D
  • textures/ — texturas y atlas
  • shaders/ — shaders personalizados
  • static/ — recursos servidos en tiempo de ejecución (fuentes, música, efectos de sonido)
  • raw/ — recursos de audio originales (antes del procesamiento)
  • WonderBricks.wlp — archivo de proyecto del Editor de Wonderland

Punto de entrada 

js/index.js es el punto de entrada generado usado por proyectos de Wonderland Engine. Vale la pena abrirlo primero porque hace obvia la composición de la aplicación:

  • importación y registro de componentes (generado a partir de lo que se usa en el editor)
  • opciones de tiempo de ejecución (generadas a partir de la configuración en el editor)
  • carga de la escena principal

Si estás tratando de entender “¿dónde comienza la aplicación?”, este es el archivo.

Jugabilidad, UI, audio 

El código bajo js/ se divide por responsabilidades:

  • js/gameplay/ contiene el bucle de construcción (colocación de bloques, cuadrícula / ajuste, interacciones, prefabs, partículas)
  • js/ui/ contiene la interfaz de usuario dentro del mundo (paneles montados en el brazo, selectores, botones)
  • js/sound/ contiene un pequeño sistema de sonido y emisores específicos para acciones
  • js/utils/ contiene pequeños ayudantes (tags, ayudas de material, etc.)

Esta separación no es una regla, pero mantiene el proyecto legible cuando múltiples sistemas evolucionan en paralelo.

Shaders 

shaders/ contiene fragmentos de shaders personalizados que demuestran algunas características orientadas al editor:

  • alternancia de características del shader
  • solicitar solo los inputs que necesitas
  • declarar una estructura Material para que el editor pueda generar una interfaz de usuario para las propiedades de material en shaders personalizados

Si estás construyendo renderizados personalizados sobre Wonderland Engine, esta es una referencia útil.

Compilando el proyecto 

Wonderbricks se construye completamente a través del editor. Comienza obteniendo el proyecto (o descargando el ZIP desde GitHub):

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

Y luego presiona el botón de flecha verde en la parte superior para lanzarlo en el navegador.

Para ejecutarlo en un Meta Quest:

  1. Habilita el modo desarrollador en tu Meta Quest
  2. Conéctalo mediante cable USB
  3. En Wonderland Editor selecciona el Meta Quest en el menú desplegable del dispositivo en la parte superior
  4. Presiona la flecha verde para abrir el navegador en el Quest (Ya está configurado el reenvío de puertos).

Por qué hacerlo open source 

Un proyecto de referencia pulido responde preguntas que la documentación no puede cubrir completamente:

  • cómo estructurar un proyecto más grande
  • cómo evitar que la lógica de juego, la UI y los recursos se conviertan en una sola masa
  • cómo se ve, de principio a fin, una configuración lista para lanzamiento de Wonderland Engine
  • cómo aprender el motor sin leer toda la documentación (al fin y al cabo, es la forma más divertida de aprender).

Si estás evaluando Wonderland Engine, esto te da algo concreto para inspeccionar. Si ya lo estás usando, es un conjunto de patrones que puedes copiar (o ignorar) según convenga a tu proyecto.

Notas 

Si construyes algo basado en este repositorio y quieres compartirlo, publícalo en nuestra comunidad de Discord:

https://discord.wonderlandengine.com

Last Update: February 7, 2026

Mantente al día.