Diferencia entre revisiones de «Unity SkyBox»

De MediaWiki
Ir a la navegación Ir a la búsqueda
 
(No se muestran 8 ediciones intermedias del mismo usuario)
Línea 3: Línea 3:
 
* Un SkyBox es una textura panorámica que se dibuja detrás de todos los objetos de la escena y representa el cielo que rodea al juego.
 
* Un SkyBox es una textura panorámica que se dibuja detrás de todos los objetos de la escena y representa el cielo que rodea al juego.
 
: Internamente está implementado haciendo uso de un Cubo <u>formado por 6 texturas</u> las cuales se encuentran 'conectadas' unas con otras formando el 'cielo' y el 'suelo'.
 
: Internamente está implementado haciendo uso de un Cubo <u>formado por 6 texturas</u> las cuales se encuentran 'conectadas' unas con otras formando el 'cielo' y el 'suelo'.
 +
: Representan el horizonte en 6 direcciones visibles (arriba, abajo, derecha, izquierda, adelante y atrás)
  
  
Línea 9: Línea 10:
  
  
−
* En cualquier momento podemos 'eliminar' el skybox si accedemos a las propiedades de la cámara y cambiamos su propiedad '''Clear Flags''':
+
* Para cambiar un SkyBox por otro descargado o hecho por nosotros podemos hacerlo de dos formas:
 +
<gallery caption="Cambiando el SkyBox" widths="350" heights="300px" perrow="2">
 +
Image:Unity3d_luces_9.jpg| '''Opción a)''' Seleccionamos uno de los SkyBoxes descargados. Arrastramos dicho SkyBox a una zona de la 'View Scene' donde se vea el SkyBox por defecto.
 +
Image:Unity3d_luces_11.jpg| '''Opción b)''' Escogemos la opción de menú '''Window => Rendering => Lighting Settings''' y aparece una ventana en la que podemos cambiar la opción Source por el SkyBox que queramos. El SkyBox por defecto se llama 'Default-SkyBox'.
 +
</gallery>
 +
 
 +
 
 +
 
 +
 
 +
* Relacionado con el SkyBox se encuentra la cámara que es la que lo va a visualizar.
 +
: En cualquier momento podemos 'eliminar' el skybox si accedemos a las propiedades de la cámara y cambiamos su propiedad '''Clear Flags''':
 
: Este parámetro indica qué queremos que dibuje la cámara cuando limpie toda la pantalla.
 
: Este parámetro indica qué queremos que dibuje la cámara cuando limpie toda la pantalla.
 
: Recordar que lo que se hace para realizar una animación es borrar continuamente (en cada frame) la pantalla y se vuelve a dibujar toda las escena.  
 
: Recordar que lo que se hace para realizar una animación es borrar continuamente (en cada frame) la pantalla y se vuelve a dibujar toda las escena.  
Línea 31: Línea 42:
 
<br />
 
<br />
  
 +
=Creando nuestro SkyBox=
 +
 +
* La forma más sencilla es descargar desde el propio Asset Store de Unity ejemplos de SkyBox ya realizados.
 +
 +
: Si no encontramos ninguno que nos interese, podemos buscar por Google '''textures sky 360 download''', por ejemplo.
 +
: Entre los resultados, aparece este: https://www.sketchuptexture.com/2013/02/panoramic-ski-360.html (por ejemplo)
 +
: Si descargamos el rar y lo descomprimimos tendremos imágenes jpg con fondos de 360º.
 +
 +
[[Imagen:Unity3d_skybox_6.jpg|500px|center]]
 +
 +
 +
* El proceso sería el siguiente:
 +
<gallery caption="Creando un SkyBox con una textura 360 grados descargada de Internet" widths="350" heights="300px" perrow="2">
 +
Image:Unity3d_skybox_7.jpg| Arrastramos la imagen que queremos que conforme el cielo.
 +
Image:Unity3d_skybox_8.jpg| En las propiedades de la textura escogemos Texture Shape: Cube.
 +
Image:Unity3d_skybox_9.jpg| En el Mapping debería valer dejar Auto. Si no funcionara correctamente escogeríamos la opción indicada.
 +
Image:Unity3d_skybox_10.jpg| Creamos un nuevo material.
 +
Image:Unity3d_skybox_11.jpg| En las propiedades del material elegimos '''CubeMap'''. Fijarse que si disponemos de las 6 texturas que conforman el cielo debemos elegir la primera opción (6 sides). También podríamos elegir en este ejemplo, la opción Panoramic, pero en este caso, tendríamos que poner como Texture Shape de la textura, '2D'.
 +
Image:Unity3d_skybox_12.jpg| Seleccionado el material creado, arrastramos la textura a su CubeMap HDR.
 +
Image:Unity3d_skybox_13.jpg| Solo queda cambiar el skymap por defecto por el nuevo (el material creado). Para ello escogemos la opción de menú Window => Lighting => Settings.
 +
Image:Unity3d_skybox_14.jpg| Arrastramos el material creado a la propiedad SkyBox Material o lo seleccionamos presionando la rueda dentada.
 +
Image:Unity3d_skybox_15.jpg| Podemos ver el efecto del nuevo cielo.
 +
</gallery>
 +
 +
 +
 +
 +
<br />
 +
 +
=Descargando SkyBox desde el Asset Store=
 +
 +
* Si buscamos en el asset store por '''Sky Textures''' encontraremos múltiples texturas para ser empleadas como skybox.
 +
 +
<gallery caption="Descargando skybox desde el Asset Store" widths="350" heights="300px" perrow="2">
 +
Image:Unity3d_skybox_16.jpg| Vamos al Asset Store y buscamos por 'sky textures'. Los resultados los filtramos por free.
 +
Image:Unity3d_skybox_17.jpg| Escogemos uno de los resultados y procedemos a descargarlo e importarlo. En la importación podemos desmarcar las escenas de ejemplo.
 +
Image:Unity3d_skybox_18.jpg| Para cambiar el SkyBox por defecto podemos arrastrar el material a la escena o bien a través del menú Window => Lighting => Settings.
 +
Image:Unity3d_skybox_19.jpg| En la pestaña '''Scene''' podemos seleccionar el material que va a conformar el SkyBox o arrastrarlo directamente desde la ventana Project Window.
 +
Image:Unity3d_skybox_20.jpg| En el ejemplo se ha colocado un plano de color azul. Si movemos la cámara podemos observar como la imagen del cielo es de 360º
 +
Image:Unity3d_skybox_21.jpg| Fijarse que para que un material pueda ser utilizado como skybox debe de ser de tipo '''SkyBox'''.. Dentro de este podremos escoger varios formatos. El del ejemplo es de tipo '''6 sides''' y tiene asociada 6 texturas como explicamos al principio de esta sección.
 +
Image:Unity3d_skybox_22.jpg| Las texturas que conforman las 6 caras deben de tener su propiedad '''Wrap Mode''' a '''Clamp''' para que la textura ocupe todo el espacio y no se repita.
 +
</gallery>
  
  
Línea 44: Línea 97:
  
  
−
* Cuando importamos del Assets Store las texturas/materiales que conformaban el cielo también pudimos seleccionar los archivos HDR.
+
* Cuando importamos del Assets Store las texturas/materiales que conformaban el cielo también seleccionamos los archivos HDR:
 +
[[Imagen:Unity3d_skybox_23.jpg|500px|center]]
  
 +
: Dichos archivos son utilizados por el material que va a conformar el skybox:
 +
[[Imagen:Unity3d_skybox_24.jpg|500px|center]]
  
  
 +
* Fijarse que podríamos crear nuestro propio SkyBox a partir de los que tenemos.
 +
: Creamos  un nuevo material de tipo '''Skybox/6 sides''' y arrastramos a cada cuadro la imagen correspondiente (Up = top y Down = Bottom)
  
 +
[[Imagen:Unity3d_skybox_25.jpg|500px|center]]
  
 +
: Podemos ver en la imagen como hemos creado un nuevo material de nombre SkyBoxPropio y del tipo '''Skybox/6 sides'''.
 +
: Para arrastrar las imágenes hdr a cada uno de los lados, he puesto el candado a las propiedades del material. De esta forma puedo ir a la carpeta de las imágenes HDR y seleccionar cualquiera de ellas para arrastrarlas sin que me cambie las propiedades de la ventana Inspector.
 +
: El efecto es el que se ve en la ventana Scene.
  
  
  
 +
 +
 +
 +
 +
 +
 +
 +
<br />
 +
'''[https://wiki.cifprodolfoucha.es/index.php?title=Programacion_de_videojuegos_con_UNITY3D#UNIDAD_3:_Creando_videojuego_3D Enlace a la página principal del curso]'''
 +
<br />
  
  

Revisión actual del 15:17 19 abr 2020

Introducción

  • Un SkyBox es una textura panorámica que se dibuja detrás de todos los objetos de la escena y representa el cielo que rodea al juego.
Internamente está implementado haciendo uso de un Cubo formado por 6 texturas las cuales se encuentran 'conectadas' unas con otras formando el 'cielo' y el 'suelo'.
Representan el horizonte en 6 direcciones visibles (arriba, abajo, derecha, izquierda, adelante y atrás)


  • Unity incorpora un SkyBox por defecto que es el que aparece cuando ejecutamos un juego por defecto:
Unity3d skybox 3.jpg


  • Para cambiar un SkyBox por otro descargado o hecho por nosotros podemos hacerlo de dos formas:
  • Cambiando el SkyBox

  • Opción a) Seleccionamos uno de los SkyBoxes descargados. Arrastramos dicho SkyBox a una zona de la 'View Scene' donde se vea el SkyBox por defecto.

  • Opción b) Escogemos la opción de menú Window => Rendering => Lighting Settings y aparece una ventana en la que podemos cambiar la opción Source por el SkyBox que queramos. El SkyBox por defecto se llama 'Default-SkyBox'.



  • Relacionado con el SkyBox se encuentra la cámara que es la que lo va a visualizar.
En cualquier momento podemos 'eliminar' el skybox si accedemos a las propiedades de la cámara y cambiamos su propiedad Clear Flags:
Este parámetro indica qué queremos que dibuje la cámara cuando limpie toda la pantalla.
Recordar que lo que se hace para realizar una animación es borrar continuamente (en cada frame) la pantalla y se vuelve a dibujar toda las escena.
Unity3d skybox 4.jpg
Los valores que normalmente se utilizan son:
  • SkyBox: Para dibujar una textura que tenga el efecto de un cielo.
  • Solid Color: Se dibujo un único color de fondo. En el caso de escoger esta opción tendremos que elegir el color que queremos que se dibuje.
  • Depth Only: Deje dibujado lo que se haya dibujado en el frame anterior.
  • Don´t Clear: No borra el contenido de la pantalla.


En la siguiente imagen se puede comprobar como al mover el cubo desde la ventana de Game, este deja un rastro ya que la cámara no está limpiando el buffer donde dibuja la escena (tiene puesta la opción Depth Only):
Unity3d skybox 5.jpg





Creando nuestro SkyBox

  • La forma más sencilla es descargar desde el propio Asset Store de Unity ejemplos de SkyBox ya realizados.
Si no encontramos ninguno que nos interese, podemos buscar por Google textures sky 360 download, por ejemplo.
Entre los resultados, aparece este: https://www.sketchuptexture.com/2013/02/panoramic-ski-360.html (por ejemplo)
Si descargamos el rar y lo descomprimimos tendremos imágenes jpg con fondos de 360º.
Unity3d skybox 6.jpg


  • El proceso sería el siguiente:
  • Creando un SkyBox con una textura 360 grados descargada de Internet

  • Arrastramos la imagen que queremos que conforme el cielo.

  • En las propiedades de la textura escogemos Texture Shape: Cube.

  • En el Mapping debería valer dejar Auto. Si no funcionara correctamente escogeríamos la opción indicada.

  • Creamos un nuevo material.

  • En las propiedades del material elegimos CubeMap. Fijarse que si disponemos de las 6 texturas que conforman el cielo debemos elegir la primera opción (6 sides). También podríamos elegir en este ejemplo, la opción Panoramic, pero en este caso, tendríamos que poner como Texture Shape de la textura, '2D'.

  • Seleccionado el material creado, arrastramos la textura a su CubeMap HDR.

  • Solo queda cambiar el skymap por defecto por el nuevo (el material creado). Para ello escogemos la opción de menú Window => Lighting => Settings.

  • Arrastramos el material creado a la propiedad SkyBox Material o lo seleccionamos presionando la rueda dentada.

  • Podemos ver el efecto del nuevo cielo.




Descargando SkyBox desde el Asset Store

  • Si buscamos en el asset store por Sky Textures encontraremos múltiples texturas para ser empleadas como skybox.
  • Descargando skybox desde el Asset Store

  • Vamos al Asset Store y buscamos por 'sky textures'. Los resultados los filtramos por free.

  • Escogemos uno de los resultados y procedemos a descargarlo e importarlo. En la importación podemos desmarcar las escenas de ejemplo.

  • Para cambiar el SkyBox por defecto podemos arrastrar el material a la escena o bien a través del menú Window => Lighting => Settings.

  • En la pestaña Scene podemos seleccionar el material que va a conformar el SkyBox o arrastrarlo directamente desde la ventana Project Window.

  • En el ejemplo se ha colocado un plano de color azul. Si movemos la cámara podemos observar como la imagen del cielo es de 360º

  • Fijarse que para que un material pueda ser utilizado como skybox debe de ser de tipo SkyBox.. Dentro de este podremos escoger varios formatos. El del ejemplo es de tipo 6 sides y tiene asociada 6 texturas como explicamos al principio de esta sección.

  • Las texturas que conforman las 6 caras deben de tener su propiedad Wrap Mode a Clamp para que la textura ocupe todo el espacio y no se repita.



Trabajando con imágenes HDR

De forma simplificado podemos indicar que este tipo de imágenes dan un mayor realismo a la escena.
En un renderizado 'normal', Unity asocia a cada pixel un valor entre 0..1 indicando el grado de intensidad del pixel, siendo 0 sin intensidad y 1 intensidad máxima.
Con las imágenes HDR, el grado de intensidad no está limitado a este rango, permitiendo renderizar de forma más realista como el ojo humano interpreta las condiciones de luz sobre los objetos en situaciones de oscuridad


  • Cuando importamos del Assets Store las texturas/materiales que conformaban el cielo también seleccionamos los archivos HDR:
Unity3d skybox 23.jpg
Dichos archivos son utilizados por el material que va a conformar el skybox:
Unity3d skybox 24.jpg


  • Fijarse que podríamos crear nuestro propio SkyBox a partir de los que tenemos.
Creamos un nuevo material de tipo Skybox/6 sides y arrastramos a cada cuadro la imagen correspondiente (Up = top y Down = Bottom)
Unity3d skybox 25.jpg
Podemos ver en la imagen como hemos creado un nuevo material de nombre SkyBoxPropio y del tipo Skybox/6 sides.
Para arrastrar las imágenes hdr a cada uno de los lados, he puesto el candado a las propiedades del material. De esta forma puedo ir a la carpeta de las imágenes HDR y seleccionar cualquiera de ellas para arrastrarlas sin que me cambie las propiedades de la ventana Inspector.
El efecto es el que se ve en la ventana Scene.







Enlace a la página principal del curso





-- Ángel D. Fernández González -- (2018).

Obtenido de «https://wiki.cifprodolfoucha.es/index.php?title=Unity_SkyBox&oldid=10224»