Unlimited AE and Premiere Pro templates, videos & more! Unlimited asset downloads! From $16.50/m
Advertisement
  1. 3D & Motion Graphics
  2. UDK

Creación de un material holográfico avanzado en UDK

by
Read Time:12 minsLanguages:

Spanish (Español) translation by Kelly Gianella (you can also view the original English article)

En este tutorial crearemos un Material Holográfico Avanzado en UDK, que se anima de un lado a otro con la ayuda del mapeo Parallax (Bump mapping) en Unreal Development Kit. También aprenderemos a utilizar los canales RGB en Photoshop para crear una sola textura a partir de tres texturas separadas. Para entender este tutorial a fondo, es necesario conocer al menos los fundamentos de la creación de sombreado y materiales en UDK.


1. Prepara

Primero tendremos que crear una textura para el holograma en Photoshop.

rgb_mergergb_mergergb_merge

Antes de proceder a la texturización, me gustaría explicar lo que vamos a hacer exactamente en este tutorial. Como se muestra en la imagen anterior, en el lado izquierdo del signo de igualdad tenemos tres texturas que son R, G y B. Si fusionamos (o añadimos) todas estas texturas juntas, obtendremos una nueva textura que es RGB, que es el resultado que se muestra en el lado derecho del signo de igualdad anterior. El objetivo aquí es crear una textura de estas tres texturas mediante la fusión de los canales. Así que vamos a proceder a la creación de la textura.

R

rrr
Haz clic para ampliar

G

ggg
Haz clic para ampliar

B

bbb
Haz clic para ampliar

Utilizaremos las tres texturas anteriores denominadas R, G y B.

Como dije, en lugar de guardarlas como tres texturas separadas, las fusionaremos en el canal RGB. Editar y crear canales RGB en Photoshop es un procedimiento bastante complejo, pero aun así, te mostraré cómo añadir información como texturas en canales RGB en Photoshop.


2. Crea texturas

Para empezar, crea un nuevo archivo 1024x1024 en Photoshop y carga las tres texturas anteriores en el mismo archivo 1024x1024.  

rgb_layersrgb_layersrgb_layers
Haz clic para ampliar

Después de crear el nuevo archivo de 1024x1024 como se muestra en la imagen anterior, sólo asegúrate de cargar cada textura en una capa separada y nombrarlas R, G y B respectivamente, para evitar cualquier confusión. También crea una nueva capa rellena de negro para el fondo. Establece el modo de fusión de todas las capas en Pantalla.


3. Copia la primera capa R

Lo importante aquí es que todas las texturas deben estar centradas como en la imagen de abajo. Si el eje central de las texturas no es el mismo, habrá un problema.

Ahora la capa R pertenece al canal Rojo, la capa G pertenece al canal Verde, y la capa B pertenece al canal Azul. Vamos primero con la Capa R para el Canal Rojo. Manten pulsada la tecla CTRL y haz clic en la capa R y copia la selección pulsando CTRL+C. Después de copiar la capa, apague todas las capas, pero habilite sólo la capa rellena de negro. Selecciónalo y luego vaya a la pestaña CANALES. Si no ves la pestaña CANALES, entonces habilítala desde la opción del menú archivo, Windows > Canales.

copying_layerscopying_layerscopying_layers
Haz clic para ampliar

4. Pega la capa R al canal rojo

Una vez que hayas copiado la capa R, ve a la pestaña CANALES y haz clic en el canal Rojo, de manera que sólo se habilite el canal Rojo y se deshabilite el resto. Selecciona el canal Rojo y pégalo pulsando CTRL+V. Ahora deberías tener la textura justo en el centro del canal rojo (como en la imagen de abajo.) Una vez que tengas la textura en el centro del canal rojo, es bueno para ir.

Repite este procedimiento para las capas G y B. Recuerda que G es para el verde y B para el canal azul.

rgb_channelsrgb_channelsrgb_channels
Haz clic para ampliar

Después de copiar las tres capas en sus canales correspondientes, deberías tener algo parecido a la imagen de abajo. Lo que tenemos es, Rojo para el círculo interior más pequeño, Verde para el círculo del medio, y Azul para el círculo exterior más grande.

mergemergemerge
Haz clic para ampliar

El paso final es crear otra nueva capa rellena de Negro. Y para establecer el modo de fusión de nuestra textura recién creada, al modo de pantalla (se muestra a continuación.) Ahora sólo guardar la textura en formato .TGA.

final_texturefinal_texturefinal_texture
Haz clic para ampliar

También necesitaremos una textura de escáner, así que crea una nueva textura de 128x128 de resolución, con una bonita línea blanca delgada y extendida (como en la imagen de abajo.) O simplemente puedes descargar la imagen, y guardarla en formato .TGA.

scanner_texture
texturetexturetexture
Haz clic para ampliar

5. Crear material en UDK

Ahora que tenemos las dos texturas anteriores listas, es el momento de cargar UDK. Una vez cargado, crear un nuevo paquete llamado Holograma. Después de crear un nuevo paquete Holograma, e importar las texturas en UDK.

udk_importudk_importudk_import
Haz clic para ampliar

Crea un nuevo material para el Holograma.

new_materialnew_materialnew_material
Haz clic para ampliar

Haz doble clic en el material del holograma recién creado para abrir tu ventana del editor de materiales.

Para este material de hologramas y para entender mejor el montaje, he dividido el montaje en 4 partes y son las siguientes;

  • 1. Medidor central - Esto hace que la textura del círculo central se anime en el eje Z, hacia adelante y hacia atrás.
  • 2. Rotador de engranajes - Para aleatorizar el giro con el resto del círculo.
  • 3. Efecto de parpadeo - Para un efecto de proyección dañado.
  • 4. Efecto de línea de escaneo - Efecto de escaneo electrónico para que parezca más realista.

Y luego vamos a fusionar todas las configuraciones anteriores en dos expresiones Add.


6. Configuración del medidor central

En la ventana del Editor de Materiales, simplemente arrastra y suelta la Textura del Holograma y obtén dos expresiones, un Rotador y un BumpOffset. Como se muestra en la imagen de abajo, un valor de Vector Constante de 1,5 se conecta a la Altura del BumpOffset, que luego se conecta a la Coordenada del Rotador, y luego se conecta a los UVs de la Textura Holograma.

El canal rojo de la textura del holograma se multiplica con un valor de una expresión Constant3Vector, R=0.5, G=1.6 y B=1.5. Una vez que tengas todo bien configurado (como en la imagen de abajo.) Selecciona toda esta configuración manteniendo pulsado CTRL+ALT, y luego arrastrando el botón izquierdo del ratón y Duplica la selección pulsando CTRL+W.

center_gauge1center_gauge1center_gauge1
Haz clic para ampliar

Después de duplicar la configuración, sólo hay que añadirlos (Add) utilizando una expresión de Add. Como puedes ver en la imagen de abajo, los únicos cambios que tenemos que hacer aquí son a los valores de la expresión Vector Constante, que es 1. La Velocidad del Rotador que es 0.125 y los valores RGB del Constant3Vector para la mezcla de color amarillo claro agradable, que son 1.5, 1.6 y 0.5 de R, G y B respectivamente.

La Constant3Vector se multiplica por el canal azul de la textura del holograma. Nombrémoslo (o comentémoslo) como "Medidor central", manteniendo pulsado CTRL+ALT y arrastrando el botón izquierdo del ratón alrededor de la configuración, luego haz clic con el botón derecho del ratón y selecciona Nuevo comentario. Escriba "Medidor central" y pulse Enter.

center_gauge2center_gauge2center_gauge2
Haz clic para ampliar 

7. Configuración del rotador de engranajes

Crea una nueva configuración de nuevo, pero esta vez en lugar de usar un valor constante para la altura del Bumpoffset, usaremos las expresiones Seno y Tiempo. Solo tienes que conectar el Tiempo al Seno y luego darle al Seno un Periodo de 2.0, en las propiedades. Y luego Conecta ese Seno a la Altura del Bumpoffset. Lo que hacen estas expresiones de Seno y Tiempo, es oscilar de un lado a otro en el eje Z con un período de tiempo de 2, por lo que nos da una animación agradable y suave en el eje Z.

Como se muestra en la imagen de abajo, conecta el Bumpoffset en la Coordenada del Rotador, y luego conéctalo a los UVs de la Textura del Holograma. Para darle un bonito efecto de color verde, obtenga una expresión Constant3Vector e introduzca los siguientes valores R=1, G=2 y B=1 en las propiedades. Luego multiplícalo con el canal rojo de la textura del holograma. Una vez hecho esto, selecciona toda esta configuración y duplícala.

gear_rotator1gear_rotator1gear_rotator1
Haz clic para ampliar 

Después de duplicar toda la configuración, agregue ambas configuraciones usando una expresión ADD. Como se muestra en la imagen de abajo (Setup 1 + Setup 2.) Lo único que necesitamos hacer aquí es cambiar el valor del Rotador, así que sólo cambia la Velocidad del Rotador a -0.5 (Negativo .5).

Ahora que hemos creado una nueva configuración, es el momento de fusionar esta configuración con la configuración del Medidor Central que creamos anteriormente. Para hacer esto, obtenga una expresión Add y conecte la salida del Add para el Setup 1&2, en la A de la expresión ADD recién creada, tal como en la imagen de abajo.

Donde el punto de fusión es de la expresión principal ADD (que fusiona las configuraciones del Medidor Central y del Rotador de Engranajes) asegúrate de conectar la salida de la expresión ADD del Medidor Central, en la B de esta expresión de fusión Add. Que se muestra en la imagen de abajo.

gear_rotator2gear_rotator2gear_rotator2
Haz clic para ampliar

Ambas configuraciones deben verse como lo que se muestra a continuación. Ahora, es el momento de hacer la configuración para algunos efectos de parpadeo.

setup_previewsetup_previewsetup_preview
Haz clic para ampliar

8. Efectos de parpadeo

Obtén una expresión de Tiempo y conéctala a un Seno, y en las propiedades dale un valor de Periodo de 0.000010. Conecta esa expresión Seno a una expresión Abrazadera Constante y dale los siguientes valores, Min= -3 y Max= 1.0 en sus propiedades. Ahora duplica estas tres expresiones y obtén una expresión de Multiplicar, luego conecta estas dos configuraciones en el nodo de Multiplicar. Como se muestra en la imagen de abajo, sólo hay que cambiar el valor del Periodo del nuevo Seno a 0.01 y también cambiar los valores de la Abrazadera Constante, Min y Max a -10 y 2 respectivamente.

Ahora necesitamos que la textura del holograma sea desaturada, así que consigue una expresión de Desaturación y conecta la textura del holograma en la Desaturación, sólo dale un valor de Luminancia de 1.0 a cada canal de Desaturación que sea RGBA. Necesitamos que esta textura desaturada sea animada también, así que obten una expresión de Tiempo y un Seno y luego conecta el Tiempo en el Seno.

También necesitamos que esté ligeramente desplazada en el eje Z. Así que necesitamos una expresión BumpOffset y una expresión Rotator para rotar la textura. Así que coge esas dos expresiones y conecta el Seno en la Altura del Bumpoffset, y conecta ese Bumpoffset en la Coordenada del Rotador. Luego, finalmente, conéctalo a las UVs de la Textura Holograma (como la configuración mostrada en la parte inferior de la imagen de abajo.) Ahora tenemos que multiplicar todas las configuraciones, así que conecta todas las conexiones correctamente como se muestra en la imagen de abajo, y pasemos a crear un efecto Scanline.

Flickering_effectFlickering_effectFlickering_effect
Haz clic para ampliar

9. Efecto Scanline

Arrastra y suelta esa textura del Escáner en esta ventana del Editor de Materiales del Holograma. Y obtén dos expresiones, un Panner y un TexCoordinate. Conecta el TexCoordinate en el Panner, y ahora en las propiedades del Panner, establece la velocidad de X e Y a la misma velocidad de 1.0 y conecta este Panner en los UVs de la Textura Scanline que importamos anteriormente.

Necesitamos que esta línea de escaneo se vea un poco azulada, así que tendremos que multiplicar esto con una expresión Constant3Vector. Al igual que en la imagen de abajo, conecta esta Textura Scanline en la entrada A de la expresión Multiplicar y conecta la Constant3Vector en la B de la expresión Multiple. Luego introduce los valores RGB de 1, 2, 2 en las propiedades de la Constant3Vector respectivamente.

Para completar la configuración, también necesitamos la textura del holograma pero en una versión en escala de grises o desaturada, así que obten esa textura del holograma junto con una expresión de desaturación y conecta esa textura del holograma en la desaturación (como se muestra a continuación.) En las propiedades de la expresión de desaturación, da un valor de luminancia de 1,0 a cada canal que sea RGBA. Ahora sólo tenemos que fusionar todas estas expresiones, para obtener una expresión LERP así como una expresión de Vector Constante, con un valor de 0.

Ahora conecta esa expresión de Vector Constante a la A de la entrada del Lerp, y para la B, simplemente conecta esa expresión de Multiplicación de la Textura de la Línea de Escaneo, y luego conecta esa Desaturación a la Entrada Alfa del LERP. Sólo asegúrate de que cada conexión está conectada correctamente (como se muestra en la imagen de abajo.)

scanline_effectscanline_effectscanline_effect
Haz clic para ampliar

Ahora que tenemos todas las configuraciones listas, es decir, el Medidor Central, el Rotador de Engranajes, el Efecto Parpadeo y el Efecto Línea de Escaneo, es el momento de fusionar las cuatro configuraciones simplemente usando dos expresiones ADD. Así que consigue dos expresiones ADD. La conexión es la siguiente: el rotador de engranajes y el efecto de parpadeo se conectan a las entradas A y B del ADD respectivamente, y luego este ADD se conecta a la A de la segunda entrada del ADD. Y por último, el efecto línea de escaneo se conecta a la B de la segunda entrada ADD.

Ahora comenta estas dos expresiones ADD, como "Interruptor principal". Ahora simplemente conecta el segundo ADD en el canal DIFFUSE, como en la imagen de abajo. Y luego ve a Windows > Propiedades.

final_setupfinal_setupfinal_setup
Haz clic para ampliar

10. Propiedad de los materiales

En la ventana de propiedades, expande la sección Material y establece el valor de la máscara de opacidad a 0.2. Ajusta el modo de fusión a BLEND_Additive, el Lighting Model a MLM_Unlit y también asegúrate de que Two Sided face esté ON marcando la opción.

material_propertiesmaterial_propertiesmaterial_properties
Haz clic para ampliar

Conclusión 

Ya está. Tu material de holograma está listo. ¡Sólo tienes que aplicar este material sobre cualquier malla que te guste y ver la Magia!

A continuación se muestra la vista previa completa en alta resolución de la configuración del material del holograma.

whole_setupwhole_setupwhole_setup
Haz clic para ampliar

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.