Efecto de Fondo

Este tutorial muestra múltiples formas de mostrar un fondo en Wonderland Engine:

• Texturas equirectangulares 3D para el cielo
• Gradientes 3D
• Texturas 2D
• Gradientes 2D

Fondo 3D 

Cielo 

La renderización del cielo ha sido utilizada desde los primeros videojuegos. Proporciona una sensación de profundidad y aumenta virtualmente el tamaño del mundo a los ojos del jugador.

Existen muchas técnicas para renderizar el cielo:

• Renderizado de atmósfera
• Imagen de cubemap (también llamada “Skybox”)
• Imagen equirectangular

Actualmente, Wonderland Engine solo admite la última.

Imagen equirectangular 

Se obtiene una imagen equirectangular proyectando una imagen de 360 grados sobre una superficie plana. Tiene una relación de aspecto de 2:1, por lo que el ancho es el doble del alto.

A continuación, un ejemplo de cómo se ve una imagen equirectangular:

¡Veamos cómo podemos crear un cielo en Wonderland Engine!

Importar 

Primero, importa tu imagen equirectangular: arrastra y suelta el archivo desde una carpeta en el navegador de activos del editor, luego arrastra y suelta la imagen desde allí hasta la vista de Escena para crear una textura.

Si no tienes una imagen equirectangular, encuentra algunas opciones gratuitas en la lista de recursos a continuación.

Material 

Crea un material para renderizar la textura del cielo:

• Ve a Vistas > Recursos
• Selecciona la pestaña Materiales
• En la esquina superior derecha, haz clic en Crear
• Haz doble clic en el nombre para renombrarlo (opcional)
• Selecciona Sky en el menú desplegable de la columna pipeline

Terminarás con una lista de recursos que se ve así:

Configuración de Renderizado 

Ahora podemos vincular el material del cielo al renderizador de cielo:

• Ve a Vistas > Configuración del Proyecto
• Desplázate hasta Renderizado y abre la sección
• Desplázate hasta Cielo y haz clic en habilitado
• Asigna el material del cielo al menú desplegable material
• Establece la propiedad texture en la textura del cielo

Gradiente 

Además de usar una textura, también puedes utilizar gradientes de dos y cuatro paradas de color.

Actualiza el pipeline Sky y activa las características GRADIENT o GRADIENT_4_STOPS.

Una vez actualizado el pipeline, edita las propiedades colorStop del material del cielo:

Fondo 2D 

Wonderland Engine también admite imágenes de fondo y gradientes bidimensionales.

Para usarlo, cambia la propiedad shader del pipeline del cielo a Background para renderizar en 2D.

En 2D, las texturas / gradientes se mostrarán de manera idéntica sin importar hacia dónde esté mirando la cámara:

Recursos 

Aquí tienes una lista no exhaustiva de sitios web con imágenes equirectangulares gratuitas:

• Poly Haven
• Ambient CG