Creando videojuegos: normal maps +curiosidad +imagenes

darkytl
ForoCoches: Miembro
#1
Hola, soy Darkytl, estudiante de segundo de DAM (Desarrollo de Aplicaiones Multiplatforma) orientado a Videojuegos.

Actualmente, por mis estudios, estoy descubriendo un montón de entresijos, trucos y curiosidades a la hora de crear videojuegos y he decidido compartirlo con vosotros.

Este post tratará de los mapas de normales o normal maps. ¡Vamos a conocerlos!

-¿Qué es y para qué sirve un normal map?

¿Alguna vez os habéis fijado en las paredes, cajas, barandillas, etc. de un videojuego? Desde lejos suele parecer que puede tener gritas o agujeros, cierto relieve. Pero cuando nos acercamos a ella… TACHAAAANNN la pared parece convertirse en plana, ni rastro de las grietas.

Pues eso señores, es gracias a la magia de los normal map.

Técnicamente y sin entrar mucho en detalles, un mapa de normales es simplemente la representación plana de los rebotes de luz. Pero eso suena un poco a chino, diréis.

Profundicemos: Se llama “normal” a la dirección de un vector. En este caso hablamos de la dirección en la que rebota un punto de luz contra un objeto. Fijaos en la siguiente imagen:



Podéis observar los vectores normales en dos planos, el primero sería sin modificar los normales, el segundo con ellos modificados. Como hemos dicho, esto afecta directamente al rebote de la luz. Entonces podemos concluir que el “normal mapping” se refiere a la modificación de estos vectores.

-¿Cómo se ve un mapa de normales?

Los mapas están basados en componentes RGB (rojo, verde y azul) donde en lugar de darle color a estos componentes les daremos un valor direccional. RGB = XYZ (coordenadas de dirección). Así pues, más rojo significa más lejos en X.



Este es un normal map de una pared de ladrillo, roca o lo que sea con forma de piedras. (¡La texturización es independiente del normal map!)

-¿Cómo lo genero?

Generalmente para crear un normal map lo haremos desde un editor 3D, yo por ejemplo uso 3DS Max de Autodesk, aunque también hay otras opciones como Blender, Maya, etc. Estos programas suelen tener una opción para generar los mapas. Para ello necesitamos un modelo low poly y otro high poly, es decir, un modelo base sobre el que proyectaremos el mapa de normales y otro modelo muy detallado desde el que generaremos este mapa.
También se puede generar un normal map desde una textura plana desde algunos programas como Shader Map, aunque el resultado no es tan óptimo como si lo hiciéramos con el modelo entero.

Ejemplo creado a partir de textura plana:
Textura:



Cilindro con textura + normal map aplicado:



Ejemplo de normap a partir de diseño 3D:


*Notad que el normal map se aplica sobre el cubo low poly, que básicamente es un cubo de 6 caras.

-¿Por qué es importante un normal map?

Principalmente el uso de normal maps sirve para que tu tarjeta gráfica última generación no explote y te llene la casa de humo. En el ejemplo del cubo, la versión “high-poly” ocuparía más de 1000 polígonos, lo cual ralentizaría muchísimo la capacidad de procesado de la tarjeta gráfica, ahora imaginaos si en lugar de un cubo, tengo 20 cubos, 80 paredes y 40 cajas en pantalla. Exacto, un total despropósito. Con el uso de normal maps los desarrolladores de videojuegos “engañan” al usuario haciendo que algo parezca más realista ahorrándose un montón de polígonos.

-Para concluir:

Podría estar hablando mucho más tiempo sobre los normal map, pero me parece que ya ha quedado un post demasiado extenso. Por supuesto, si os parece interesante, tengo muchos más temas sobre los que hablar en cuanto a creación de videojuegos
Espero que os haya gustado y si habéis llegado hasta aquí, gracias



EDIT 1: más imágenes en el post número 15
Futanari
ForoCoches: Miembro
#2
Mis dies
Renomeh
*AutoBan Spam/Flood/Troll*
#3
normal pole whats going on
JaR_JaUs
Generacion Makina
#4
Mis onse
Futanari
ForoCoches: Miembro
#5
Y mis five stars
darkytl
ForoCoches: Miembro
#6
También respondo preguntas, en mis ratos libres xD
sanandreas
ForoCoches: Miembro
#7
Mmm interesante. Tiene que ser complicado optimizar los juegos para engañarnos y crear otra realidad. Gracias por una explicación tan amena. TE animo a poner mas de este tipo.
Terio
ForoCoches: Miembro
#8
Interesante shur
xtremebierzo
Respetado
#9
Interesante shuir, ya me había dado cuenta en muchos videojuegos
darkytl
ForoCoches: Miembro
#10
Cita de sanandreas
Mmm interesante. Tiene que ser complicado optimizar los juegos para engañarnos y crear otra realidad. Gracias por una explicación tan amena. TE animo a poner mas de este tipo.
Si, hoy en día tenemos muchas herramientas para crear "falsas realidades" en videojuegos, pero no fue así tiempo atras. Me flipa el hecho de que alguien pudiera crear dichas herramientas. Actualmente los usuarios exigen muchísimo realismo y optimización en los videojuegos así que los desarrolladores estan constantemente ingeniándoselas.

Cita de JaR_JaUs
Mis onse
Cita de Futanari
Y mis five stars
Cita de Terio
Interesante shur
Cita de xtremebierzo
Interesante shuir, ya me había dado cuenta en muchos videojuegos
Muchas gracias shures
styloso
*AutoBan Spam/Flood/Troll*
#11
Cita de darkytl
Hola, soy Darkytl, estudiante de segundo de DAM (Desarrollo de Aplicaiones Multiplatforma) orientado a Videojuegos.

Actualmente, por mis estudios, estoy descubriendo un montón de entresijos, trucos y curiosidades a la hora de crear videojuegos y he decidido compartirlo con vosotros.

Este post tratará de los mapas de normales o normal maps. ¡Vamos a conocerlos!

-¿Qué es y para qué sirve un normal map?

¿Alguna vez os habéis fijado en las paredes, cajas, barandillas, etc. de un videojuego? Desde lejos suele parecer que puede tener gritas o agujeros, cierto relieve. Pero cuando nos acercamos a ella… TACHAAAANNN la pared parece convertirse en plana, ni rastro de las grietas.

Pues eso señores, es gracias a la magia de los normal map.

Técnicamente y sin entrar mucho en detalles, un mapa de normales es simplemente la representación plana de los rebotes de luz. Pero eso suena un poco a chino, diréis.

Profundicemos: Se llama “normal” a la dirección de un vector. En este caso hablamos de la dirección en la que rebota un punto de luz contra un objeto. Fijaos en la siguiente imagen:



Podéis observar los vectores normales en dos planos, el primero sería sin modificar los normales, el segundo con ellos modificados. Como hemos dicho, esto afecta directamente al rebote de la luz. Entonces podemos concluir que el “normal mapping” se refiere a la modificación de estos vectores.

-¿Cómo se ve un mapa de normales?

Los mapas están basados en componentes RGB (rojo, verde y azul) donde en lugar de darle color a estos componentes les daremos un valor direccional. RGB = XYZ (coordenadas de dirección). Así pues, más rojo significa más lejos en X.



Este es un normal map de una pared de ladrillo, roca o lo que sea con forma de piedras. (¡La texturización es independiente del normal map!)

-¿Cómo lo genero?

Generalmente para crear un normal map lo haremos desde un editor 3D, yo por ejemplo uso 3DS Max de Autodesk, aunque también hay otras opciones como Blender, Maya, etc. Estos programas suelen tener una opción para generar los mapas. Para ello necesitamos un modelo low poly y otro high poly, es decir, un modelo base sobre el que proyectaremos el mapa de normales y otro modelo muy detallado desde el que generaremos este mapa.
También se puede generar un normal map desde una textura plana desde algunos programas como Shader Map, aunque el resultado no es tan óptimo como si lo hiciéramos con el modelo entero.

Ejemplo creado a partir de textura plana:
Textura:



Cilindro con textura + normal map aplicado:



Ejemplo de normap a partir de diseño 3D:


*Notad que el normal map se aplica sobre el cubo low poly, que básicamente es un cubo de 6 caras.

-¿Por qué es importante un normal map?

Principalmente el uso de normal maps sirve para que tu tarjeta gráfica última generación no explote y te llene la casa de humo. En el ejemplo del cubo, la versión “high-poly” ocuparía más de 1000 polígonos, lo cual ralentizaría muchísimo la capacidad de procesado de la tarjeta gráfica, ahora imaginaos si en lugar de un cubo, tengo 20 cubos, 80 paredes y 40 cajas en pantalla. Exacto, un total despropósito. Con el uso de normal maps los desarrolladores de videojuegos “engañan” al usuario haciendo que algo parezca más realista ahorrándose un montón de polígonos.

-Para concluir:

Podría estar hablando mucho más tiempo sobre los normal map, pero me parece que ya ha quedado un post demasiado extenso. Por supuesto, si os parece interesante, tengo muchos más temas sobre los que hablar en cuanto a creación de videojuegos
Espero que os haya gustado y si habéis llegado hasta aquí, gracias
Modelados tridimensionales realizados por Ing. Geomáticos podrían ser muy útiles para los videojuegos (incluidos realizados con drones).
Mi TFT fué sobre un modelado tridimensional sobre un Torreón.
darkytl
ForoCoches: Miembro
#12
Cita de styloso
Modelados tridimensionales realizados por Ing. Geomáticos podrían ser muy útiles para los videojuegos (incluidos realizados con drones).
Mi TFT fué sobre un modelado tridimensional sobre un Torreón.
Sin duda creo que podría ser algo muy muy válido. De hecho en mi trabajo de sintesis habiamos pensado en crear a nuestro protagonista en barro o plastelina y escanearlo después para sacar la malla. Aunque la verdad es que tengo muy poca información del proceso, cantidad de polígonos que se obtienen, si son de 4 vértices etc. Me parece algo realmente interesante y que vale la pena explorar.
styloso
*AutoBan Spam/Flood/Troll*
#13
Cita de darkytl
Sin duda creo que podría ser algo muy muy válido. De hecho en mi trabajo de sintesis habiamos pensado en crear a nuestro protagonista en barro o plastelina y escanearlo después para sacar la malla. Aunque la verdad es que tengo muy poca información del proceso, cantidad de polígonos que se obtienen, si son de 4 vértices etc. Me parece algo realmente interesante y que vale la pena explorar.
https://sketchfab.com/models/ce1fb3b...45ea28ffb4f3d5
styloso
*AutoBan Spam/Flood/Troll*
#14
pon trabajos reales tuyos shur!
darkytl
ForoCoches: Miembro
#15
Cita de styloso
pon trabajos reales tuyos shur!
Wow Shur. Lo del torreón me ha dejado sin palabras. Me gustaría conocer más acerca del proceso, como lo grabaste, generaste la malla y demás, me parece muy interesante!

Te dejo algunas fotillos de cosas que he hecho, aunque básicamente han sido para practicar ya que en el proyecto final de 3D todavía no hemos empezado a texturizar todo.

Todo lo de estas imágenes esta hecho sobre objetos base, cilindros y cajas planas.

Barril con textura plana + normal map




Pared base al lado de pared texturizada + normal map:




Paredes con diferentes texturas + normal maps:

spirograph
ForoCoches: Miembro
#16
Me ha costado un rato entenderlo pero te doy 5 estrellas, está muy interesante
darkytl
ForoCoches: Miembro
#17
Cita de spirograph
Me ha costado un rato entenderlo pero te doy 5 estrellas, está muy interesante
Gracias Shur, he intentado explicar las cosas muy muy a grosso modo para que no sea una lectura muy tosca, si tienes alguna duda sobre el funcionamiento de los mapas estaré encantado de responderla
styloso
*AutoBan Spam/Flood/Troll*
#18
Cita de darkytl
Wow Shur. Lo del torreón me ha dejado sin palabras. Me gustaría conocer más acerca del proceso, como lo grabaste, generaste la malla y demás, me parece muy interesante!

Te dejo algunas fotillos de cosas que he hecho, aunque básicamente han sido para practicar ya que en el proyecto final de 3D todavía no hemos empezado a texturizar todo.

Todo lo de estas imágenes esta hecho sobre objetos base, cilindros y cajas planas.

Barril con textura plana + normal map




Pared base al lado de pared texturizada + normal map:




Paredes con diferentes texturas + normal maps:

molan mucho tus imágenes shur!
Pues mira, Drone + 80 fotos a 3 alturas diferentes alrededor del torreón.
Con el programa agisoft Photoscan (se puede descargar 1 mes de prueba).
El proceso del programa es: Añadir las fotos, genera nube de puntos, crea malla, y texturiza a partir de las fotos.
La triangulación la hace a partir de la nube de puntos y dependiendo de la calidad que quieras hace más o menos.
En mi caso, al ser Geomático, el torreón está georeferenciado dandole coordenadas a diferentes puntos del torreón por topografía Clásica.

En este video se ve un mini resumen de cómo se haría.
← A General